패딩
-
카카오톡 클론 코딩 #16 box-sizing: border-box이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 22. 01:51
이번 포스트에서는 너비가 300px, 높이가 100px인 box를 가지고, box에 padding 값을 줄 때 생길 수 있는 문제를 해결해 주는 box-sizing: border-box;를 살펴 보겠습니다. 기본적으로 box에 padding-left: 20px;를 줄 때, 즉, box-sizing: border-box;를 입력하지 않았다면, box 내부에 padding 값만큼, 빈공간을 만들어 주기 위해, box의 크기를 20px만큼 더 키우고 내부에 padding, 빈공간을 만듭니다. (padding은 초록색으로 표시) 만약 box의 너비를 100%로 맞춰 놓고(브라우저 창에 맞추기), box에 padding값을 추가하면, box의 크기는 커지기 때문에, 우측 content는 padding값만큼 잘려서..