✏️ 박스 모델(box model)
너비와 높이를 가지는 개별 요소를 가리켜 '박스'라 표현,
박스를 네가지 세부 영역으로 나누어 구분한 일종의 디자인 모델
CSS로 스타일을 정의할 수 있는 모든 요소에는 박스 모델 관련 속성 중 일부 또는 전부를 적용 가능
CSS는 영역 별로 크기를 따로 설정할 수 있도록 다양한 속성들을 제공
🔎 박스 모델의 세부 영역
-
콘텐츠 영역 : 요소 내에 포함된 콘텐츠를 표시하는 영역
관련 속성 - width, height -
안쪽 여백 : 테두리 안에서 콘텐츠 주변을 감싸는 여백
관련 속성 - padding -
경계선(테두리) : 콘텐츠와 안쪽 여백을 둘러싸는 테두리
관련 속성 - border -
바깥쪽 여백 : 테두리 바깥에서 요소를 감싸는 여백
관련 속성 - margin
✏️ 콘텐츠 영역 크기 변경
콘텐츠 영역의 너비를 변경할 때는 width 속성, 높이를 결정할 때는 height 속성을 사용
속성값을 결정할 때는 수치와 단위를 함께 입력
주로 px이나 % 단위를 사용함
안녕하세요☺️