<aside> 📄 요약 Udemy The Web Developer 부트캠프 2024 - Section 8 완강

CSS 박스 모델 및 CSS에서 사용되는 단위 개념 이해

작성한 소스코드

https://github.com/YunGyeong05/2024_Summer_Mogakso/tree/main/0724

</aside>

< Summary >

# 박스 모델 : CSS의 모든 요소가 박스에 들어간다.

브라우저 안의 모든 요소를 박스로 구분한다. 각 박스마다 다른 특성을 가진다.

박스 중앙에는 실질적인 정보가 위치한다. 그 주변에는 패딩이 있고, 테두리가 둘러져 있으며 박스 사이에는 여백이 있다.

박스는 콘텐츠 레이아웃에 매우 중요하다. 콘텐츠의 크기, 모양, 테두리 간격을 바꿀 때 필요하다.

이렇게 나타나는 박스를 말한다.

# 가로(width)와 세로(height)

박스 모델은 가로와 세로로 콘텐츠가 들어가는 영역의 크기를 조정한다.

여기 보이는 파란 영역이 콘텐츠 박스이다.

가로는 280, 세로는 128이다.

div {
    width: 200px;
}

해당 코드를 통해 div의 가로 넓이를 바꿀 수 있다.

글의 가로 폭이 좁아졌다. 세로도 같은 원리이다.