CSS에서 요소 확장 취소하기
일반적으로 이전 수업에서 설명한 확장은 해롭고
이를 제거하고 싶을 것입니다. 이를 위해
CSS에는 box-sizing 속성이 있습니다.
여기에 border-box 값을 지정하면,
padding도 테두리도 블록을
확장하지 않습니다:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
width: 100px;
height: 100px;
background: #f1f1f1;
padding: 25px; /* 패딩 설정 */
border: 10px solid green; /* 테두리 설정 */
box-sizing: border-box; /* 확장 제거 */
}
:
설명된 box-sizing 속성을
직접 시도해 보세요.
