input 의 width를 100%로 할 때 삐져나오는 현상

HTML, CSS를 배우고 나서 잠시 접어두고 Javascript와 React를 배우다보니 기본 상식처럼 알고 있던 border-box에 대해 잊고 있었다.

그래서 왜 계속 input창이 삐져나오는지 모르겠어서 분노하기 직전이었는데 구글링 하다가 해답을 반견하고 나서는 좀 민망해졌다.

.inputWrapper {
    border: 1px solid #d0d7de;
    border-radius: 6px;
    width: 100%;
    padding: 8px;
}

.input {
    width: 100%;
    background-color: #f6f8fa;
    padding: 5px 12px;
    line-height: 20px;
    box-shadow: 208, 215, 222, 0.2;
}

.textarea {
    height: 200px;
    min-height: 200px;
    margin-top: 8px;
}

위에 코드에 간단한 코드 하나로 스트레스 해소가 됐다.

*{
	box-sizing: border-box;
}

이제 잊어버리진 않을 것 같다