🐇 width 100%

input이나 textarea에 width: 100%를 주었지만, 요소가 100%보다 삐져나가 자리잡고 있는 경우가 있었다.

기본적으로 제공되는 input 등의 요소에는 padding과 border-width가 잡혀있는데, 이 사이즈는 요소가 가진 크기에 영향을 미치게된다.

이런경우 다음과 같은 해결방법이 있다.

🥕 size 0

padding: 0;
border-width: 0;

두 사이즈 모두 0으로 만들어주는 방식이다. 그러나 border-width가 0이기 때문에 사용자가 요소를 인식하는데 어려움이 있다.

🥕 box-sizing: border-box

box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 지정한다. CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 즉, 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다.

※ 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.

box-sizing은 다음과 같은 두 속성이 있습니다.

• content-box : 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
• border-box : 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.

따라서 box-sizing: border-box를 주면 테두리도 남아있어 사용자가 요소를 인식하는데 어려움이 없고 삐져나오는 모습도 사라지게 됩니다.