오늘은 CSS Box model에 대해 얘기해 보도록 하겠다.
CSS Box model
개념
CSS Box model 이란, 모든 HTML 요소가 사각형 박스 형태로 구성되어 있다고 보고, 그에 맞춰 박스를 꾸며주는 것이다.
구성요소
이러한 Box model은 4가지 구성요소로 구성된다. margin, border, padding, content이다.
(출처 mdn)
[1] content
컨텐트는 박스 안에 있는 내용물 그 자체다.
[2] border
border는 컨텐츠를 감싸주는 테두리 영역이다.
[3] padding
padding은 컨텐츠와 border 사이의 공백 영역을 말한다.
[4] margin
margin은 border 밖, 다른 박스와의 공백 영역이다.
box model의 구성요소는 또 방향이 있다. top(위), bottom(밑), right(오른쪽), left(좌측)이다.
box-sizing 속성
기본적으로 박스의 너비(width)와 높이(height)는 ‘content’ 영역을 기준으로 적용된다. 하지만, 이렇게 되면 혼란이 올 수도 있다. padding과 border 등에 따라 실제 크기가 예상대로 되지 않을 수 있기 때문이다.
예를 들어 컨텐트 영역의 너비를 200px, padding 10px, border 10px 했다고 치자. 그러면 실제 너비는 어떻게 될까? 200px이 아니다. 200px + 20px + 20px로 총 240px이 된다. 양 옆으로 padding과 border가 있기 때문이다.
이런 혼란을 방지하고 좀 더 직관적으로 크기를 예측하기 위해 box-sizing을 border-box로 설정해둘 수 있다. 그렇게하면 박스의 크기를 content 영역 뿐만 아니라, padding과 border까지 포함하도록 설정하는 것이다. 위의 예시에서는 박스 크기가 200px이 되고, 컨텐츠 영역은 알아서 160px 정도로 줄어든다. 훨씬 박스 크기를 예측하기 편하다.
* {
box-sizing: content-box;
}
=> 이게 원래 기본 설정값이다.
* {
box-sizing: border-box;
}
=> 이렇게 하면 box 크기를 border 기준으로 바꿀 수 있게 된다.Box type
기본적으로 CSS가 적용되지 않은 html 웹 페이지는 Normal flow에 따라 배치된다. Normal flow란, html 요소들이 배치되는 방향인데, 위에서 아래로 배치되거나(Block type 요소일 때) 혹은 왼쪽에서 오른쪽(inline type)으로 배치된다.
[block type]
html 요소 중에서 Block type은 박스 모델 자체가 좌에서 우까지 전체를 다 차지하는 요소이다.(물론 width를 지정하면 끝까지 차지하지는 않는다.)
밑 방향으로 항상 새로운 행이 진행된다. width와 height를 지정할 수 있다.
h1~6태그나, p태그, div 태그 등이 있다.
[inline type]
인라인 타입은 좌우로 전체를 차지하는 것이 아니라, 그냥 그 일부분만 차지하게 된다. 그래서 다음 요소가 아래로 진행되는 것이 아니라 오른쪽으로 진행되게 된다.(위 사진에서의 파란 블록)
inline type은 width와 length 속성을 사용할 수 없다. 또한 수평 방향으로는 padding, margin, border를 적용해서 다른 요소를 밀어낼 수 있지만, 수직 방향으로는 다른 요소를 전혀 밀어낼 수 없다.
인라인 타입의 대표적인 요소로는 a태그, img태그, span 태그가 있다. (그런데 img태그는 독특하게 width와 height 속성을 통해 크기를 조절할 수 있다)
[기타 display 속성]
- display: inline-block;
기본적으로는 Inline 요소이지만, block type 요소의 특징을 가져올 수 있다. 그래서 width와 height 속성을 사용할 수 있으며, padding, margin, border 등의 속성으로 다른 요소를 밀어내는 것도 가능하다.
줄 바꿈을 사용하고 싶진 않지만, 너비와 높이를 적용하고 싶을 때 사용한다. CSS 속성으로 display: inline-block; 을 작성하면 된다.
- display: none;
화면에 표시하지 않을 뿐만 아니라, 공간조차 주지 않는 것이다.
- visibility: hidden;
화면에 표시하지 않을 뿐, 공간은 남기게 된다.
No Responses