[CSS] input width 100% 삐져나오는 현상

문제

input width 100%로 스타일을 주었는데, 아래 그림처름 삐져나오는 문제가 발생했습니다.

해결방법

border-box : width와 height 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다.

// styled-components 기반으로 작성되었다.
const Input = styled.input`
  width: 100%;
  box-sizing: border-box;
`

 

 

발생 원인

input의 외곽선 너비가 입력칸 너비에 포함되기 때문임.