CSS 정리
CSS는 과거에도 그랬고 현재에도 그렇고 익숙해지기 힘든 도구이다. HTML을 마크업 한뒤 CSS로 스타일링한다는 매우 간단해 보이지만, 막상 원하는 대로 사이트를 마크업하려면 쉽게 손이 움직이지 않는다. 이 글은 좀더 CSS 기본 원리에 익숙해지고 활용하기 위해 인터넷 강의를 듣고 정리한 글입니다.
box
HTML의 모든 요소들은 box로 구성되어 있습니다. 동그란 모양의 이미지이더라도 내부적으로 보면 box형태를 띄고 있습니다. 그리고 모든 box들은 margin - border - padding - content 4 가지 요소를 가지고 있습니다.
CSS에서는 block, inline, inline-block 세 가지 박스모델과 flex 모델을 제공합니다. 오늘은 이 박스모델들의 성질을 알아보겠습니다.
block
block의 사전적 의미는 차단하다입니다. 이에 걸맞게 display 타입이 block인 요소는 가로 화면을 본인이 차지하고 다른 요소를 줄바꿈하여 내려보냅니다. css속성인 width, height를 자유롭게 줄 수 있습니다.
inline
inline의 사전적 의미는 일렬로 늘어선 입니다. block과는 다르게 요소들이 흐름을 유지하려는게 큰 차이입니다. css 속성인 width, height, margin-top, margin-bottom, padding-top, padding-bottom 등 줄의 흐름을 거스르는 속성은 사용불가입니다.
div 태그는 기본적으로 block을 타입으로 가지기 때문에 display: inline; 으로 변경했습니다. 그 후, 파랑색에 width을 주었지만 아무 변화가 없으므로, width 속성이 먹히지 않음을 알 수 있습니다. 반면, font-size 같은 속성을 적용됩니다.
inline-block
block과 inline을 특징을 합친 것입니다. 앞서 block은 요소를 줄 지을 수 없었습니다. inline은 width값을 적용 할 수 없었습니다. inline-block은 inline 처럼 다른 요소를 차단하지 않을 뿐 더러 width, height 속성도 적용할 수 있습니다.
파랑에 width 값 300을 주어도 아래로 줄바꿈이 되지않고 그대로 줄을 유지하며 요소들이 늘어섭니다.
flex
CSS를 하면서 주요 관심사는 요소들의 가로 배치입니다. flex를 적용함으로써 요소들의 배치 및 정렬을 쉽게 할 수 있습니다.
기본적인 사용법은 다음과 같습니다.
- 정렬을 하고자 하는 부모 태그에 display: flex; 를 한다.
- 정렬하고자 하는 방향을 선택한다 (row, column, reverse-row, reverse-column) row가 default
- 한 줄로 정렬할지, 줄바꿈을 허용할 지 선택한다 (wrap, nowrap) nowrap이 default(줄바꿈허용 x, 요소 크기가 줄어듬)
1
2
3
4
5
6
7
부모 선택자{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
그 다음, 정렬을 위해서 justify-content: center; 와 align-items: center 로 부모요소의 정중앙에 위치시킬수 있습니다.
main-axis, cross-axis
Justify-content는 main-axis에 대응합니다. 즉, flex-direction에 따라 main-axis가 가로축(row), 세로축(column)이 정해지는데 위 코드같은 경우는 main-axis가 가로축입니다. 따라서 justify-content: center를 하면 가로축 기준 가운데 정렬이 됩니다.
Align-items 는 main-axis의 수직 방향 축에 대응합니다. flex-direction을 row로 했다면 cross-axis는 세로축이 됩니다. 따라서 align-items: center; 를 하면 <div class="red">빨강</div> 의 “빨강” 자식요소가 div 태그의 정중앙에 배치됩니다.
정리
html 페이지의 스타일링이 되는 모든 요소들(태그)은 box 형태를 띄고 있습니다. 이 box 모델은 block, inline, inline-block 으로 크게 나눌 수 있고 각자의 성질이 다릅니다. 거기에 더해 flex 모델은 기본적으로 block의 성질을 띄지만 보다 정렬에 특화된 편리한 모델입니다. 오늘은 기본적인 내용에 대해 알아봤고 다음엔 flex에 대해 자세히 알아보겠습니다.