티스토리 뷰
1. HTML요소는 모두 box로 이루어져 있다.
HTML에서 흔히 사용하는 table, img, li, ul태그들은 사실 눈에 보이지 않는 박스영역으로 이루어져 있다.실제로 개발자 도구를 사용하여 페이지에 사용되는 태그들을 클릭하게 되면 박스영역이 나타나는 것을 볼 수 있다.때문에 HTML를 기본으로 하는 CSS를 잘 사용하려면 이 Box에 대한 개념을 잘 이해하고 있어야 한다.
2. Box 공간의 구성
Box 공간이 어떻게 구성되어 있는지 가장 안쪽부터 살펴보면, 우리 눈에 보이는 내용을 감싸고 있는 부분을 content box라고 한다. 그리고 내용과 테두리 사이의 공간을 padding, 테두리가 있는 공간을 border라고 하며 테두리 바깥에 요소와 요소 사이의 여백 공간을 margin이라고 한다.
우리는 종종 요소의 가로 또는 세로 길이를 조절하기 위해 width, height값을 지정한다.그러나, 사실 우리가 지정하고 있던 것은 가장 안쪽의 content box의 가로,세로 길이였다.예를 들어, width를 100px로 지정해주었다면 요소의 실제 가로 길이는 content box의 100px에 padding, border영역의 길이를 모두 더해 100px보다 큰 값이 되는 것이다.
따라서,오차 없이 요소의 길이를 지정하고 싶다면 box-sizing 속성의 속성값을 border-box로 바꾸자!원래 box-sizing의 default값은 content-box이기 때문에, width나 height를 조절하면 content-box의 값이 바뀌었던 것이다.이를 border-box로 바꾸게 되면 원하는 길이만큼 요소의 전체 길이를 조절할 수 있게 되어 오차 없는 완벽한 길이 조절이 가능해진다.
코드 예시:http://ko.learnlayout.com/box-sizing.html
3. Box의 display속성
box의 속성display의 속성값 block은 별도의 width 값을 주지 않으면 부모 요소의 content-box의 width 만큼의 길이로 지정된다. 만약,별도의 width값이 주어진다면 width값을 제외한 나머지 가로 공간은 모두 margin이 되어 다음 요소는 반드시 다음 줄에 위치하게 된다.따라서,width값의 지정여부와 관계없이 항상 다음 요소는 현재 요소의 다음 줄에 위치하게 된다.
display의 또 다른 속성값 inline은 요소들을 옆으로 줄 세우는 특징이 있다.만약,남은 공간이 요소의 크기보다 작아 위치하기 어렵다면 다음 줄로 넘어가서 위치하게 된다.
block과 inline의 차이점을 비교해보면, block이 면이라면 inline은 흐름이라고 할 수 있다. block은 영역을 나타내므로 width, height와 같은 길이조절이 가능하지만 inline은 흐름이기 때문에 불가능하다.이 밖에도 display 속성값이 inline이라면 width, height, padding-top, padding-bottom, margin-top, margin-bottom등의 길이를 조절하는 것은 불가능하다.
이러한 단점을 해결하고자 나온 것이 바로 inline-block이다. inline-block은 inline 성질을 가지면서 width, height의 값을 지정할 수 있는 속성값이다.물론, padding-top, padding-bottom, margin-top, margin-bottom의 값도 조절할 수 있다.
3. Box의 float 속성
box의 속성display의 속성값 block은 별도의 width 값을 주지 않으면 부모 요소의 content-box의 width 만큼의 길이로 지정된다. 만약,별도의 width값이 주어진다면 width값을 제외한 나머지 가로 공간은 모두 margin이 되어 다음 요소는 반드시 다음 줄에 위치하게 된다.따라서,width값의 지정여부와 관계없이 항상 다음 요소는 현재 요소의 다음 줄에 위치하게 된다.
display의 또 다른 속성값 inline은 요소들을 옆으로 줄 세우는 특징이 있다.만약,남은 공간이 요소의 크기보다 작아 위치하기 어렵다면 다음 줄로 넘어가서 위치하게 된다.
block과 inline의 차이점을 비교해보면, block이 면이라면 inline은 흐름이라고 할 수 있다. block은 영역을 나타내므로 width, height와 같은 길이조절이 가능하지만 inline은 흐름이기 때문에 불가능하다.이 밖에도 display 속성값이 inline이라면 width, height, padding-top, padding-bottom, margin-top, margin-bottom등의 길이를 조절하는 것은 불가능하다.
이러한 단점을 해결하고자 나온 것이 바로 inline-block이다. inline-block은 inline 성질을 가지면서 width, height의 값을 지정할 수 있는 속성값이다.물론, padding-top, padding-bottom, margin-top, margin-bottom의 값도 조절할 수 있다.
3. Box의 float 속성
보통,float 속성은 어떤 요소들을 가로 배치할 때 사용한다.위 사진 속 2개의 예시는 float가 어떤 역할을 하는지 나타낸다.왼쪽은 float 속성을 적용하지 않은 경우이다.사진과 글이 따로 배치되는 것을 볼 수 있다.반대로,오른쪽은 사진에 float:left 속성을 적용한 것이다.사진과 글이 함께 가로로 배치되는 것을 확인할 수 있다.이러한 float 속성은 div, p, ol, ul, table, img같은 묶음 태그에만 적용할 수 있다.
float 속성이 어떻게 적용되는지 살펴보자.빨강,노랑,파랑 box들이 있고 이들의 부모를 회색 box라고 하자.빨강 box에 float:left를 적용하면 빨강 box는 부모 box로부터 붕 뜨게 되고 버려진 자식이 된다.이때 노랑,파랑 box 들은 원래 빨강 box가 있던 곳으로 이동한다.또한,부모 box는 빨강 box를 제외한 노랑,파랑 2개의 box만을 자신의 자식으로 인식하고 크기가 줄어들게 된다.빨강 box는 float속성이 적용되는 순간,원래 자신의 content 크기로 바뀌고 display 값은 block이 된다.
빨강,노랑 파랑 box들이 모두 float이 되었다면 부모 box는 자식이 없다고 생각하여 자신의 크기를 0으로 만들어버린다.이때,다른 요소인 초록색 box가 들어온다면 부모의 크기가 0이므로 부모의 시작점에 위치하게 된다.따라서, 초록색 box는 빨강 box뒤에 숨어버리게 되고 보이지 않게 된다.
이런 문제를 해결하려면 부모에게 가상 요소를 만들어주어 자식요소를 모두 인식할 수 있도록 해야 한다.::after를 사용하여 부모 요소 뒤에 content는 없고 display는 block이며 float는 left인 요소를 모두 clear하라는 ::after{content:’’; display:block; clear:left;} css코드를 사용하면 초록색 box는 파랑 box다음으로 위치하기 때문에 눈으로 확인 가능하다.
4. Flexbox
기존의 box를 사용하면, display, float, position등 복잡한 속성을 사용해야만 했고 효율적이지 못했다.따라서 flexbox를 사용하면 쉽고 간단하게 정렬이 가능하다.다음은 flexbox의 기본 개념이다. flex-direction은 row와 column 2가지로 설정할 수 있다.이때, flex-direction과 같은 방향의 축을main axis, 수직 방향의 축을 cross axis라고 한다.
flexbox의 flex-wrap속성은 box들을 한 줄에 배치할 것인지 또는 여러 줄에 배치할 것인지 결정하는 속성이다.nowrap은 한 줄에 box들을 배치하면서 그 크기를 자동으로 균등하게 맞춰준다.wrap은 여러 줄에 걸쳐서 box들을 배치한다.
flexbox의 justify-content속성은 flex-direction과 같은 방향인 main axis를 따라서 정렬하는 속성이다.flex-start는 main start를 중심으로 정렬하고, flex-end는 main end를 중심으로 정렬하며 center는 main axis를 따라 중심으로 향해 정렬된다. space-between로 정렬하면,첫 번째 box는 시작선에 마지막 box는 도착선에 위치하고 동일한 간격을 유지한다. space-around는 box들주위에 동일한 간격(margin)을 유지하며 space-evenly는 모든 간격을 일정하게 유지한다.
flexbox의 align-items는 flex-direction의 수직방향인 cross axis를 따라서 정렬하는 방법이다.이전과 다른 정렬 방법이 있다면 stretch는 box의 cross axis 방향 길이를 가득 늘려 정렬하는 방법이고 baseline은 box 안에 text가 있다면 그 text 라인에 맞추어 정렬되는 방법이다.
flexbox의 align-content는 justify-content와 비슷하나 box들이 한 줄이 아닌 여러 줄에 걸쳐져 있을 경우 정렬하는 방법이다.
※ 수정이 필요한 부분이 있다면 언제든지 댓글로 적어주세요! 피드백을 원합니다J