html/css - Css 레이아웃
업데이트:
Css포지셔닝과 주요 속성
브라우저 화면 안에 각 콘텐츠 영역을 어떻게 배치할지를 결정할 때 float과 position 속성을 사용한다.
box-sizing - 박스 너비 기준 정하기
css의 width속성은 콘텐츠 영역의 너비를 나타내기 때문에 해당 요소에 적용한 패딩이나 테두리 크기를 따로 계산해서 배치해야 한다. 이럴 때 box-sizing속성을 사용하면 콘텐츠 영역의 너비에 패당과 테두리 크기까지 합쳐서 width속성을 지정할 수 있다.
div {
float:left;
margin-right:20px;
}
.box1 {
box-sizing:content-box; /* 콘텐츠 영역 기준 */
width: 300px; /* 콘텐츠 영역 너비 300px */
height: 150px; /* 높이 */
margin: 10px; /* 마진 */
padding: 30px; /* 패딩 */
border:2px solid red; /* 테두리 */
}
.box2 {
box-sizing:border-box; /* 테두리까지(박스 전체) 기준*/
width: 300px; /* 박스 모델 전체 너비 */
height: 150px; /* 박스 높이 */
margin: 10px; /* 마진 */
padding: 30px; /* 패딩 */
border: 2px solid red; /* 테두리 */
}
- box1의 경우 content-box타입으로 좌우패딩 30px과 좌우테두리 각 2px, 콘텐츠 영역 너비는 300px이다. 실제 화면에서 차지하는 너비는 364px이 된다.
- box2의 경우 box-sizing타입으로 width:300px에 맞추어 좌우패딩 30px, 좌우테두리 각 20px이 할당되고 콘텐츠 영역은 236px이 된다. 화면에서 차지하는 너비는 300px이다.
댓글남기기