
[CSS] Box Model (Content, Padding, Border, Magin)
Frontend/CSS
2022. 10. 26. 22:48
Box Model이란 ? HTML element가 웹 페이지에서 차지하는 공간입니다. 키보드의 F12를 누르게되면 개발자 도구를 펼칠 수 가 있는데, 가령 Google에 접속하여 로고 공간에 대해서 생각을 해보겠습니다. 아래와 같은 영역을 선택하여 Element -> "Computed"로 진입하면 네모박스 형태의 CSS를 볼 수 있습니다. Computed탭을 자세히 보겠습니다. Google 로고인 box는 파란색 공간(Content)으로 width : 272, height : 92로 구성 되어있습니다. Google 밑에 있는 키보드 모양의 박스를 살펴보겠습니다. 아래의 CSS표기처럼, 1) div태그의 Umvnrc className의 파란색공간(Content)은 23.993 px * 43.993 px의 ..