🌱 정의
html에 존재하는 모든 요소는 박스 형태로 구성되며 이것을 박스 모델이라고 부릅니다.
박스 모델 형태로 구성된 html 요소는 안쪽부터
내용(content)-패딩(padding)-테두리(border)-마진(margin) 영역으로 구분됩니다.
- 내용(content): 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
- 패딩(padding): 내용과 테두리 사이의 간격, 영역 안쪽 여백
- 테두리(border): 내용 + 패딩을 감싸는 테두리(선)
- 마진(margin): 테두리와 이웃하는 요소 사이의 간격, 영역 바깥쪽 여백
🌱 box-sizing 속성
기본적으로 요소의 크기를 지정하면 해당 크기는 내용(content) 영역의 크기가 됩니다.
box-sizing: content-box;
따라서 아래의 코드처럼 id = box인 요소의 크기를 정해주면
#box {
box-sizing: content-box; /* 명시적으로 써주지 않아도 기본값임 */
width: 100px;
padding: 30px;
}왼쪽 패딩 영역 30px + 내용 영역 100px + 오른쪽 패딩 영역 30px (+양쪽 테두리 0px) = 160px로
요소의 실제 너비는 100px이 아닌 160px가 됩니다.
요소에 내용 뿐만 아니라 패딩 또는 테두리가 존재한다면 이것들을 고려하여 너비와 높이를 설정해야 합니다.
이는 생각했던 모양과 다른 결과를 초래할 수 있기 때문에 사용자에게 혼동을 줄 수 있습니다.
따라서 좀 더 직관적으로 크기를 지정하기 위해
테두리 영역까지 포함한 크기가 되도록 box-sizing 속성을 바꿔줍니다.
box-sizing: border-box;
따라서 아래의 코드처럼 id = box인 요소의 크기를 정해주면
#box {
box-sizing: border-box;
width: 100px;
padding: 30px;
}왼쪽 패딩 영역 30px + 내용 영역 40px + 오른쪽 패딩 영역 30px (+양쪽 테두리 0px) = 100px로
요소의 실제 너비를 100px로 지정함과 동시에
내용 영역의 너비를 (패딩 영역의 너비 60px를 제외하고 남은) 40px로 지정해 줍니다.
작동해보기
읽어주셔서 감사합니다:)
