CSS 에서는 모든 요소를 박스로 취급하는데요, 이 박스 모델에 대해 알아봅시다.
✅ Box Model
박스 모델은 다음과 같이 구성됩니다.
<div>hello</div>
// 컨텐츠는 hellocontent: hello 라는 컨텐츠가 위치하는 영역 (텍스트 등의 내용이 위치)border: 요소의 내부와 외부를 구분하는 경계선padding: border 과 content 영역 사이에 위치. content 외부이면서 요소의 내부인 영역margin: 경계 바깥쪽, 요소 외부의 영역. 여백이라고도 함
요소의 색이나 형태 등을 정의하는 속성은 border 내부, 즉 요소의 내부에만 적용됩니다.
border 외부 영역인 margin 에는 속성이 적용되지 않으며, 그저 영역만 존재합니다.
padding 요소 내부의 여백, margin 은 요소 외부의 여백입니다.
🥦 box-sizing
CSS 의 box-sizing 속성은 요소의 너비와 높이는 계산하는 방식을 결정합니다.
기본 설정은 box-sizing: content-box; 입니다.
❗ content-box, 내 맘 같지 않아
content-box 는 해당 요소에 설정된 width 와 height 값을
컨텐츠 영역의 크기에 적용한다는 뜻입니다.
그런데, 이 경우 문제가 생길 수 있습니다.
padding 을 더하는 등의 경우인데요, content-box 는 컨텐츠 영역만 고려하여 크기를 결정하므로
생각한 것과 크기가 다르게 나타날 수 있습니다.
만약 div 를 만들어 너비 100px, 높이 100px 로 설정했다고 합시다.
그리고 padding 을 20px 로 설정한다면?
브라우저: content-box 인데 padding 이 추가되어서 컨텐츠 영역이 100px 보다 작아졌네?
이렇게... 너비높이 100px 의 박스를 만들었는데 설정된 width, height 값보다 작아진다?
용납할 수 없는 일입니다...
브라우저: padding 때문에 작아진만큼 컨텐츠 영역 늘려. 대신, padding 크기는 유지해.
이렇게 됩니다.
그래서 결국 요소 박스의 전체 크기는 너비와 높이가 140px (padding 20px + 컨텐츠 100px) 이 되어버립니다.
완전 별로인데요? 난 전체 너비높이 100px 의 요소에 20px 의 padding 을 주고 싶은데...
그럼 애초에 너비와 높이를 padding 값을 산정해서 계산해야 하나? (80px 로 한다거나...)
할 수도 있지만, 그럴 필요 없습니다.
box-sizing: border-box; 를 사용하면 됩니다.
🍀 border-box 를 사용하자!
box-sizing: border-box; 로 설정하면, 요소의 너비와 높이는 컨텐츠 기준이 아닌
border 기준으로 계산합니다.
즉, 설정한 width 와 height 가 border 까지의 영역에 적용됩니다.
위 예시처럼 100px 로 설정하면 padding 과 컨텐츠 영역, border 까지
모두 포함하여 100px 이 되도록 합니다.
더 자세한 건 여기에...
box-sizing | MDN
🧩 block 와 inline
html 요소는 블록 요소와 인라인 요소로 분류할 수 있습니다.
블록과 인라인은 요소가 쌓이는 방식, 가지는 속성 등에 차이가 있습니다.
block 요소
블록 요소의 특징은 다음과 같습니다.
width와height속성이 적용됨 (속성이 블록 요소 크기에 반영됨)- 기본적으로 너비는 부모 요소의 100%, 높이는 컨텐츠의 높이
- 컨텐츠(자손) 로 블록 요소와 인라인 요소를 모두 가질 수 있음
- ✅ 수직으로 쌓임 (좌우에 다른 요소가 올 수 ❌)
- 상하좌우의
border,padding,margin을 모두 가질 수 있음
블록 요소는 쌓아올릴 수만 있는 상자같은 개념으로 생각하면 됩니다.
양 옆에 다른 요소가 올 수 없어 문서 흐름에서 줄바꿈을 강제한다고 말합니다.
inline 요소
인라인 요소의 특징은 다음과 같습니다.
width와height속성이 적용되지 않음- 너비와 높이는 컨텐츠의 크기를 따라감
- 컨텐츠(자손) 로 인라인 데이터(텍스트)와 다른 인라인 요소만을 가짐
- ✅ 수평하게 위치함 (좌우에 다른 요소 위치 가능❗)
- 상하좌우
border,padding을 가질 수 있음 margin은 좌우로만 가짐❗ 상하는 ❌line-wrapping(자동 줄 바꿈)이 적용됨
인라인 요소끼리는 서로 나란히 위치하는 게 가능합니다.
블록 요소처럼 줄바꿈을 강제하지 않습니다.
display 로 전환하기
display 속성을 이용하여 요소를 블록처럼 만들 수도, 인라인처럼 만들 수도 있습니다.
display: block;: 블록 요소의 특성을 적용display: inline: 인라인 요소의 특성을 적용display: inline-block;: 블록과 인라인의 특성을 동시에 가짐width,height속성이 적용됨- 상하좌우의
margin을 모두 가짐 - 요소가 수평하게 배치됨
- 내부에 블록 요소를 포함할 수 없음
line-wrapping(자동 줄 바꿈) 적용 ❌
Flow Layout
요소에 아무런 레이아웃도 지정하지 않은 상태에서,
일반적으로 요소가 배치되는 기본 방식을 flow layout 이라고 합니다.
블록 요소는 수직으로, 인라인 요소는 수평으로 배열되며
인접하는 요소 사이 margin 에 상쇄 현상이 일어납니다.
