오랜만에 경제학 쪽 책들이 아닌 개발 쪽 문서를 보고 일을 하다보니 의문점이 하나 생겼습니다. 디자인을 천천히 해가는데 input 태그의 max-width 값이 100%인데도 불구하고 밖으로 삐져나오는 상황이 발생한 것입니다.

디자인은 천천히 개선할 예정이니 이번만큼을 용서를...

위의 스크린샷에서도 우측에 widthmax-width 값이 모두 100%로 고정되어 있는 것을 볼 수 있습니다.

CSS의 기본적인 박스 모델을 다시 살펴보자

하지만 실제로 얻은 결론은 사실 많이 허를 찔렀습니다. CSS의 박스모델 개념으로 저를 다시 회귀하게 만들었죠.

CSS Input with width: 100% goes outside parent’s bound
I am trying to make a login form constituted of two input fields with an inset padding, but those two fields always end up exceeding its parent’s boundaries; the issue stems from the added inset pa...
According to the CSS basic box model, an element's width and height are applied to its content box. Padding falls outside of that content box and increases the element's overall size.

위의 Stackoverflow의 답변을 인용하자면 CSS의 박스 모델에 따르면 개체의 크기는 개체의 컨텐츠 박스에 의해서 결정이 되는데 이 때 컨텐츠 박스의 크기를 설정하는  width 속성이 100%로 강제된다면 padding 값이 컨텐츠 박스의 바깥쪽으로 만들어져 실제로는 100%보다 큰 크기를 가지게 된다는 것입니다.

box-sizing 정책 변경

이를 해결하기 위해서는 box-sizing 속성을 다시 설정하면 됩니다. box-sizing 속성은 MDN에 따르면 개체의 최종 크기가 계산되는 방식을 다르게 대하여 변경한다고 합니다.

box-sizing - CSS: Cascading Style Sheets | MDN
The box-sizing CSS property sets how the total width and height of an element is calculated.

그래서 위와 같이 최종적으로 보이는 너비가 달라지게 됩니다. 위의 Content Box 방식은 padding, border 그리고 margin을 포함하지 않게 되지만 이를 Border Box 방식으로 바꾸면 margin을 제외한 border까지 포함하여 계산을 한다고 합니다. 물론 두 방식 모두 개체 자체의 내부 컨텐츠를 포함하는 크기로 계산이 됩니다.

input {
    box-sizing: border-box;
}

MDN에서는 이 box-sizing 속성이 input 뿐만 아니라 table, select 그리고 button에서도 반영된다고 언급하고 있습니다.

input 태그에서는 type 속성이 radio, checkbox, reset, button, submit, color 그리고 search인 경우 적용됩니다.

최종적으로 위와 같이 의도대로 input이 렌더링된 모습을 확인할 수 있습니다.

Best practice

동작은 하였지만 나중을 위해 몇 가지 속성을 덧붙일 수 있습니다. 해당 내용은 CSS 기술이 새로 적용될 때마다 커뮤니티를 확인하는 것이 더 나은 선택이 될 것 같아 대신 CSS-Tricks의 글을 첨부합니다. 이를 통하면 다른 요소에서 오는 사이드이펙트나 의도치 않은 효과를 막는데에 더 도움이 된다고 합니다.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
Inheriting box-sizing Probably Slightly Better Best-Practice
I’m a big fan of resetting box-sizing to border-box, so much that we have a special day of the year around here. But there is a little adjustment to

min-widthmax-width 동시에 사용하기

위 방법이 작동하지 않는다면을 전제로 하여 min-widthmax-width를 동시에 사용하는 방안도 있습니다. 하지만 저의 경우에는 이 방법은 동작하지는 않았습니다.

그 외에도 벗어나는 길이를 직접 개발자 도구로 계산하거나 측정하여 calc 함수를 사용하는 등의 비교적 현실적으로 타협이 필요한 방법은 현재 글에서 언급하지 않고 있습니다. 해당 방법은 위 Stack Overflow 질문 글에서 확인하실 수 있습니다.


읽어주셔서 감사합니다. 모두에게 많은 도움이 되었길 바랍니다.