09-1. box-sizing
index.html을 실행하고 style.css를 확인해주세요.
글씨만 적혀있어서 각 요소의 너비를 확인하기가 어렵네요.
style.css의 14줄에 white를 yellow로 바꾸고 재실행해봅시다.
그리고 나서 결과 화면을 다시 확인해주세요.
style.css 파일 한 번 보셨나요?
width 값은 300px로 같은데 결과에 보이는 화면은 그렇지 않습니다.
padding, width를 배우고 나서 반드시 알고 있어야 할 특성입니다.
첫 번째는 가로가 300px이 맞는데,
두 번째 박스는 확인해보면 가로가 300px가 아닙니다.
이유는 양쪽으로 테두리 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 프로퍼티를 딱히 넣지는 않고 진행하겠습니다.
하지만 개인 프로젝트나, 실무를 할 때는 꼭 적용해야하는 프로퍼티 입니다.
