CSS - 8-1. box-sizing

1. box-sizing

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

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

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

 

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

그래서 거의 대부분 웹페이지에 box-sizing 프로퍼티를 기본적으로 적용한다. 또한, 모든 태그에 이 프로퍼티가 적용되어야 하는데 일일이 태그마다 적용하기에는 코드가 길어진다.

* {
  box-sizing: border-box;
}

위와 같이 "*" selector를 쓰면 모든 태그에 적용할 수 있다.

 

⚠️ 'box-sizing' 프로퍼티는 개인 프로젝트나 실무를 할 때 꼭 적용해야하는 프로퍼티이다.