- CSS 박스 모델을 이해할 수 있다.
- 박스를 구성하는 네 가지 요소를 구분하고 각각에 대해 설명할 수 있다. ➡ margin, border, padding, content
- 박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다.
모든 콘텐츠는 각자의 영역을 가지며,
일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다.
⭐줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
-
줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있음!
-
block 요소의 대표적인 예는
<div>,<p>
inline 요소의 대표적인 예는<span> -
inline 박스는 width, height 속성이 적용되지 X
전 inline 쓰고 싶은데 width, height 속성도 쓰고 싶은데요??
➡ "inline-block 박스"
⭐박스 모델
➡ border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있다.
border (테두리)
- 심미적인 용도 외에도, 개발 과정에서도 매우 의미 있게 사용
- 세부 속성: 테두리 두께(border-width), 테두리 스타일(border-style / 점선: Dotted), 테두리 색상(border-color), 둥근 모서리(border-radius), 그림자(border-shadow) 등등
margin (바깥 여백)
- 각각의 값은 top, right, bottom, left로 시계방향
- 바깥 여백에는 음수 값을 지정할 수 있다!
극단적으로 적용하면, 화면(viewport)에서 아예 사라지게하거나, 다른 엘리먼트와 겹치게 만들 수도 있음.
padding (안쪽 여백)
- border를 기준으로 박스 내부의 여백을 지정
- 값의 순서에 따른 방향은 top, right, bottom, left
(margin과 동일)
💫박스를 벗어나는 콘텐츠 처리
박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나온다.
➡ 이렇게 콘텐츠가 박스를 뚫고 나가는 경우에는 박스 크기에 맞게 콘텐츠를 더 이상 표시하지 않거나, 혹은 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만들자!
- overflow 속성을 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시
-auto: 콘텐츠가 넘치는 경우 스크롤을 생성
-hidden: 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 때
-overflow-x 속성과 overflow-y 속성有 (스크롤 방향)
박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있다.
즉, 여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 만듬
But, How?
* { box-sizing: border-box; }
➡ 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산
목표는 "함께 일하고 싶은, 함께 일해서 좋은" Front-end 개발자