09. box-sizing

09-1. box-sizing

index.html을 실행하고 style.css를 확인해주세요.

글씨만 적혀있어서 각 요소의 너비를 확인하기가 어렵네요. style.css의 14줄에 white를 yellow로 바꾸고 재실행해봅시다.

그리고 나서 결과 화면을 다시 확인해주세요.

style.css 파일 한 번 보셨나요?

width 값은 300px로 같은데 결과에 보이는 화면은 그렇지 않습니다. padding, width를 배우고 나서 반드시 알고 있어야 할 특성입니다.

첫 번째는 가로가 300px이 맞는데, 두 번째 박스는 확인해보면 가로가 300px가 아닙니다.

.first {
  width: 300px;
  margin-bottom: 20px;
}

.second {
  width: 300px;
  margin-bottom: 20px;
  padding: 50px;
  border-width: 10px;
}

div {
  background-color: yellow;
}

.new {
  box-sizing: border-box;
}

이유는 양쪽으로 테두리 10px이 추가되었고, padding이 50px 씩 추가 되어서 가로가 420px이 되었습니다.

10+10+50+50+300 = 420

이런 특성을 파악하고 코딩하면 딱히 문제가 없겠지만, 귀찮은 일이 생깁니다.

디자인 시안에는 컴포넌트의 가로값만을 알 수 있는데, 디자인만 보고 코딩하려면 머리속으로 padding을 계산해가며 최종적으로 width가 얼마인지 안 후에 css를 적용하는 일이 벌어지게 됩니다.

눈으로 보이는 그 너비가, 개발자가 코딩하는 그 값이여야 코딩과 머리속으로 생각하는 로직이 같아집니다.

수 많은 개발자가 이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS 프로퍼티를 만들었습니다.

.new {
box-sizing: border-box;
}

이와 같이 보이는대로 width 값을 주고, 그 후에 그 안 쪽으로 padding을 주는 것이 생각하기에 쉽습니다.

그래서 거의 대부분의 웹페이지에 box-sizing 프로퍼티를 기본적으로 적용합니다.

또한, 모든 태그에 이 프로퍼티가 적용되어야 하는데 일일히 태그마다 적용하기에는 코드가 길어지겠죠.

아래와 같은 "*" selector로 모든 태그에 적용할 수 있습니다.

* {
box-sizing: border-box;
}

앞으로 강의에서 box-sizing 프로퍼티를 딱히 넣지는 않고 진행하겠습니다.

하지만 개인 프로젝트나, 실무를 할 때는 꼭 적용해야하는 프로퍼티 입니다.

Assignment

new 클래스가 아니라 모든 태그에 box-sizing: border-box; 이 적용될 수 있도록 css를 수정해주세요.
html </body>바로 위에(24번째 라인 아래) 마지막 요소를 추가하려고 합니다.

<div>태그에 "new 클래스가 없는 박스" 라고 내용을 채워주세요.
해당 요소의 가로도 300px로 해주세요.
1,2번 완료 후 모든 너비가 같은지 확인해주세요.

주의 사항) 해당 과제를 수행하기 위해서는 Assignment 이전의 과정들도 잘 진행하셔야 됩니다. 쉽게 확인할 수 있게 div 태그의 background-color를 yellow로 계속 유지해주세요.