반응형
난감하다 난감해~
배경
1.reset.css적용
2.css상황은 아래와같음
body {
width: 100%;
height: 100vh;
}
header {
position: fixed;
top: 0;
left: 0;
width: 30%;
height: 600px;
padding: 75px;
}
main {
width: 70%;
margin-left: 30%;
background-color: $signiture_color;
#movieContainer {
.movie {
width: 400px;
height: 1000px;
background-color: blue;
}
}
}
문제
문제의 화면은 아래와같다.

CSS에 맞게 각각의 영역에 이름을 표시해보자면 아래와 같다.

Main영역은
margin-left의 값으로
Header영역의 width크기와 동일한 30%을 줬음에도 불구하고
왜 영역이 겹치는걸까? (회색과 파란색부분이 겹치는 부분)
추가정보
Header | Main |
![]() |
![]() |
Main의 width:30%은
Header의 컨텐츠의 크기만큼 들어간것으로 보인다.
즉, 패딩 75px의값 * 2 = 150px의값은 들어있지않다.
요소의 width값은
컨텐츠의값만을 의미하는걸까?
padding border margin은 해당되지않는걸까?
알아보자.
CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다. box-sizing 속성을 사용해 이 방식을 바꿀 수 있습니다.
|
결론말 말해보자면, '그렇다'
width는 컨텐츠의 영역만 고려된다.
그러나 테두리와 안쪽 크기도 요소의 크기로 고려하고싶다면, box-sizing 속성의 값을 border-box로 주면 된다.
해보자.
header {
position: fixed;
top: 0;
left: 0;
width: 30%;
height: 600px;
padding: 75px;
box-sizing: border-box;
}
결과

된다 ✌️
반응형