1. 박스 모델 (Box-Model) 1) 박스 모델이란?
HTML 문서를 통해 웹 콘텐츠 요소를 표현하면 브라우저에서 해당 문서를 바탕으로 렌더링을 수행합니다. 브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 박스 형태로 영역을 차지합니다.
CSS는 요소들의 박스의 크기, 위치, 속성을 결정할 수 있습니다. 2) 박스의 4가지 영역 박스는 콘텐츠 영역, padding, 경계선, margin 으로 총 4가지의 영역으로 구성됩니다. ① 콘텐츠 영역 (Content) 박스의 중심부에 위치하며, 태그 안에 작성된 텍스트나 이미지 같은 콘텐츠들의 나타냅니다. 이때 콘텐츠의 높이와 너비를 가집니다.
크기 속성으로 width, height가 있습니다. ② 안쪽 여백 (Padding) 콘텐츠 영역과 경계선 사이의 여백 영역을 안쪽 여백이라고 하며 padding으로 사용됩니다. 크기 속성으로 padding 있습니다. ③ 경계선 (Border) 콘텐츠 영역은 경계선 (테두리)로 감...
![[CSS] 박스 모델](https://mblogthumb-phinf.pstatic.net/MjAyMzAyMDhfMjg5/MDAxNjc1ODYzOTIzMDMw.vOjKoMR412R_lQCYYNtCDZVN59y0ojWw4FTAVtlrokIg.xVflrUCj_xSjxdk70Oh65QaGREOE7DSO_EEIhPdrkEog.PNG.srang_/image.png?type=w2)
#
border
#
배경속성
#
배경
#
박스사이징
#
박스사이즈
#
박스모델
#
width
#
padding
#
margin
#
height
#
CSS
#
배경이미지
원문 링크 : [CSS] 박스 모델
