CSS box model에 대해서 설명해 주세요.

👩🏻‍💻 CSS box model에 대해서 설명해 주세요.

 

💁🏻‍♀️ 요약하자면 ,

HTML 요소는 박스 영역의 형태로 되어 있는데, 이를 디자인적으로 표현하기 위해 box model 이라는 명칭을 붙여 놓은 것입니다. 이 박스는 content, padding, border, margin 총 4가지 요소로 구성됩니다.

 

Content

요소의 텍스트나 이미지 등 HTML 태그 사이에 담긴 내용이 표현되는 영역입니다. width, height 프로퍼티를 갖습니다.

 

Padding

테두리 안쪽에 위치하는 요소의 '내부 여백' 영역이며, border와 content 사이에 위치합니다. 기본적으로 투명색입니다.

 

Border

테두리 영역으로, 박스의 경계를 표시하는 역할을 합니다.

 

Margin

테두리 바깥에 위치하는 요소의 '외부 여백' 영역입니다. 다른 박스와의 간격을 의미합니다. 기본적으로 투명색이며 배경색을 지정할 수 없습니다.

 

 

📎 내용 참조

- velog: 기술 면접 준비

- velog: Section 1 회고