-
카카오톡 클론 코딩 #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값만큼 잘려서 화면에 보이지 않을 수 있습니다.
(왜냐하면 기본적으로 box는 왼쪽정렬이고, content 정렬이 flex이기 때문입니다. )위와 같은 문제가 생기지 않도록, box-sizing: border-box;를 입력해 준다면,
box에 padding을 추가하지만 box의 크기를 키우지 않게 해 줍니다.
즉, box에 padding-left:20px;을 추가하더라도, 크기가 320px로 커지지 않고, 원래 설정한 300px로 유지됩니다.
하지만 content를 입력할 수 있는 공간은 200px로 줄어들게 됩니다.(이건 flex로 지정하면 문제가 되지 않아요)'이거 공부 했더니 어때? > HTML & CSS & JS' 카테고리의 다른 글
카카오톡 클론 코딩 #18 친구목록_행 (0) 2020.11.24 카카오톡 클론 코딩 #17 알림 물풍선 (0) 2020.11.23 카카오톡 클론 코딩 #15 네비게이션 바 CSS (0) 2020.11.21 카카오톡 클론 코딩 #14 header CSS (0) 2020.11.20 카카오톡 클론 코딩 #13 상태표시줄 (0) 2020.11.19