markup

Html button의 type 속성

button의 type 기본 값은 submit 입니다. form tag 외부에서 사용시 button의 type에 button을 명시해주는 것이 좋습니다. form tag 외부에서 button tag를 사용할 때는 기본값이 submit이지만 클릭했을때 아무일도 일어나지 않습니다. button의 type 속성에는 3개의 값이 들어갈 수 있습니다. submit, reset, button submit: 서버로 데이터를 전송합니다. form tag 내부에 button 태그가 존재할 때 유효합니다. default 값입니다! reset: 모든 값을 초기값으로 되돌려 줍니다. button: 클릭했을때 아무일도 일어나지 않습니다. 클라이언트의 스크립트와 연결시킬 수 있습니다. 이번에 처음 알게 되었습니다. button의..

HTML 시맨틱 마크업

시맨틱 마크업은 뭐고 왜 필요할까???? 시맨틱(Semantic)은 아래와 같은 의미를 가진다. 시멘틱 뜻은 알겠고 그러면 시맨틱 마크업은 의미의 마크업 일까요???? 시맨틱 마크업은 마크업을 의미를 잘 전달할 수 있도록 작성하자 정도로 저는 이해하고 있습니다. html4 까지는 이러한 것들이 없어서 태그의 이름이 제각각 이었습니다. 각자의 기호에 맞게 사용했기 때문이죠 그래서 검색엔진은 웹페이지의 내용을 올바르게 식별할수가 없었습니다. (기준이 제각각이고 의미도 다 다르니까 우선순위의 설정도 힘들고 여러가지 애로사항이 있었지 않았을까 생각이 드네요) html5가 표준으로 체택되면서 이때 같이 등장한것이 , , , , , , 등등 태그가 의미를 나타낼 수 있는 태그들이 많이 추가되었어요. 이 태그들이 등..

css align-content, align-items, align-self

css속성중 위의 3개 속성들은 flexbox 혹은 grid에서 컨텐츠 들을 정렬시킬때 사용합니다. align-self grid나 flex item들의 정렬위치를 제어할 수 있습니다. 적용할 수 있는 value 값들은 아래와 같습니다. /* Keyword values */ align-self: auto; align-self: normal; /* Positional alignment */ align-self: center; align-self: start; align-self: end; align-self: self-start; align-self: self-end; align-self: flex-start; align-self: flex-end; /* Baseline alignment */ align-s..

css vertical-align

vertical-align 속성은 inline 요소나 table-cell box의 수직정렬을 제어할 수 있습니다. 주로 사용하는 것들만 알아보겠습니다. vertical-algin: baseline; vertical-align: top; vertical-align: middle; vertical-align: bottom; baseline => 부모의 baseline에 맞추어서 inline 요소를 수직정렬 시켜줍니다. top => 부모의 top에 맞추어서 inline 요소를 수직정렬 시켜줍니다. middle => 부모의 baseline + x-height/2 에 맞추어서 inline 요소를 수직정렬 시켜줍니다. 정확히 중앙은 아닐수 있겠네요 bottom => 부모의 bottom에 맞추어서 inline 요소를..

css white-space

css white-space 속성은 연속된 빈칸들에 대한 제어와 개행 문자에 대한 처리를 어떻게 할지에 대한 속성입니다. white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; 하나씩 설명하겠습니다. white-space 속성은 필요할때마다 문서 참고하여서 적용하시는게 건강에 좋을것 같습니다. normal 연속된 공백을 하나로 합칩니다. 개행문자도 다른 띄어쓰기들과 동일하게 처리합니다. 줄이 길어지면 줄바꿈을 해줍니다. nowrap 연속된 공백을 합치고, 줄바꿈은 태그로만 가능합니다.. 부모요소의 크기또한 무시합니다. pre..

css float

css float은 설정된 요소가 흐름을 빠져나와서 다른 요소들이 자기 컨테이너 주위에 배치되는 것을 제어할 수 있습니다. 말이 어려우니 예시와 함께 살펴보겠습니다. float은 아래의 값과 같이 다양한 값을 가질 수 있습니다. // 키워드 값 float: left; float: right; float: none; float: inline-start; float: inline-end; // 전역 값 float: inherit; float: initial; float: unset; 주요 값들의 예시만 살펴보면서 어떻게 화면에 출력되는지 살펴보겠습니다. float: left float 설정을 left를 주게 되면 부모 영역의 top:0, left:0 으로 위치하게 되고 나머지 요소들은 자신의 주위를 감싸게 ..

css display: flex, flex: 1

display flex는 자식 요소들의 정렬을 위하여 사용합니다. 부모 요소에 display: flex를 추가해주면 자식 요소들의 정렬을 제어할 수 있습니다. 자식 요소들이 display: inline 이건 block이건 레이아웃을 설정할 수 있습니다. display: flex를 주게 되면 자식 요소들은 자신이 가진 컨텐츠의 크기만큼만 넓이를 가지게 됩니다. 이때 자식요소들에는 width와 height 속성을 부여할 수 있습니다. 원래 inline 속성에는 width, height을 줄 수가 없지만 display: flex를 부모요소에 적용함으로써 위의 이미지와 같이 width, height 을 줄 수 있습니다. flex-direction 자식 요소들의 정렬방향을 제어할 때 사용합니다. flex-dire..

display: block, inline, inline-block, none

display가 inline인지 block인지 확인할 수 있는 간단한 방법이 있습니다. 확인해보고 싶은 영역에 background-color를 설정해주면 확인할 수 있습니다. inline은 자신의 영역만 차지합니다. 또한 옆으로 쌓이게 됩니다. block은 가로 영역 전부를 차지합니다. 또한 위아래로 쌓이게 됩니다. 위의 이미지에서 확인할 수 있는 block은 , , , 이 있고 , 은 display속성이 Inline 입니다. display: block display: block은 가로영역 전부를 차지하게 됩니다. 또한 위아래로 스택처럼 쌓이게 되어 줄바꿈이 된것처럼 나타나게 됩니다. width, height을 설정할 수 있습니다. display: inline display: inline은 자신의 영역만..

box-sizing 속성

css의 속성중에 box-sizing은 요소의 넓이와 높이가 계산되는 방식에 변화를 줄 수 있습니다. box-sizing을 border-box로 주게 되면 css 속성중 설정한 width, height으로 태그가 고정되게 됩니다. padding과 border-width를 키워도 해당 태그는 width와 height으로 고정됩니다. box-sizing을 content-box로 주게 되면 padding과 border-width를 제외한 컨텐츠 들만 설정된 width와 height의 값을 가지게 됩니다. 아래의 코드를 보겠습니다. 코드의 실행 결과는 아래의 이미지 입니다. border-box content-box border-box의 총 width는 100px 입니다. content-box의 총 width는 ..

label 태그

Input 태그를 작성시 label 태그는 왜 필요한지???? 어떤 이점이 있을지 알고 싶었습니다. 크게 2가지의 이유로 필요하다고 생각합니다. 1. label 태그와 input 태그를 연결해주면 label 태그를 클릭함으로써 input 태그가 체크 or focusing 되게 할 수 있습니다. 이러한 동작은 웹의 ux에 도움을 줄것 같네요 2. 스크린 리더기에서 label 태그를 읽어서 사용자가 입력해야 하는 텍스트가 무엇인지 더 쉽게 이해할 수 있습니다. 이러한 두가지 이유가 있으니 이제 어떻게 사용하는지 알아보도록 하겠습니다. click me click me input 태그는 Label 밖에 위치할 수도 있고 안에 위치할 수도 있습니다. 밖에 위치할 경우 label의 for와 input의 id 값이 ..