[CSS] Input태그의 100%가 밖으로 삐져나오는 이유

프로젝트를 진행하면서 input태그를 사용했다.

input태그의 길이가 바깥의 div에 맞춰 화면 너비에 따라 유동적으로 변화되도록 하기 위해 width:100%속성을 사용했다.

그런데! 아래 사진처럼 div밖으로 input이 빠져나오는 것이었다!

파랑색이 div이고 회색이 input이다.

input태그는 왜 부모 속성의 width를 무시하고 저렇게 삐져나오는 것인지 알아보다가 똑같은 경우에 대한 글을 발견해서 스스로 이해하고자 다시 한번 정리하려 한다.

Input 태그의 너비 100%는 왜 삐져나오지?

 

CSS에서 border와 padding, margin은 기본적으로 바깥쪽으로 생성된다.

이 계산 방법을 box-sizing : content-box라고 한다.

 

하지만 개발자의 입장에서는 제일 바깥요소인 border을 기준으로 width, height를 측정하는 것이 예측에 더 수월하기 때문에 이를 해결하기 위한 속성이 box-sizing : border-box 인 것이다.

 

단, 이 속성은 IE8이상에서만 사용할 수 있다.