box-model (padding, margin)

 

각각의 요소는 브라우저가 랜더링할때

기본적으로 사각형 형태로 영역을 차지하게된다 = 박스

 

CSS는 이러한 박스의 크기나 위치 속성 등 스타일을 결정할 수 있다.

 

 

하나의 박스는 4개의 영역으로 구성되어있다.

👉🏻 콘텐츠 영역  언제나 테두리로 감싸져 있다

👉🏻 안쪽 여백  콘텐츠 안쪽에 여백을 줄 수 있다

👉🏻 경계선 (테두리)

👉🏻 바깥쪽 여백 콘텐츠 바깥쪽에 설정하는 여백 

 

 

 

---

 

 

영역별 크기를 정의할 수 있는 속성

콘텐츠 영여	width	height
안쪽 여백	padding
바깥쪽 여백	magin
테두리	border-width

 

 

 

 

 

여백은 상 하 좌 우 네곳에 개별적/일괄적으로 여백을 줄 수 있다.

(margin에도 동일)

 

 

 

---

 

---

 

박스모델의 여백

 

 

 

---

 

콘텐츠영역은 개발자가 태그안에 보여주는 콘텐츠

테두리는 컨텐츠를 감싸서 요소와 요소사이의 경계를 보여줌

마진은 바깥에 여백을 줘서 요소와 요소간의 거리를 벌려줌