[CSS] box-sizing 속성 완벽 정리! 개념부터 활용법까지

[CSS] box-sizing 속성 완벽 정리! 개념부터 활용법까지

 

 

 

border-box : 테두리를 기준으로 크기를 정합니다.

                 레이아웃을 짤 때, 수치나 퍼센트로 정확하게 코드로 구현하기 쉬워짐

 

 

 

 

html {
    background-color: black;
}
.item-list {
    position: relative;
    border: 2px solid #004fff;
    background-color: #ddd;
}
.item {
    width: 50%;
    margin: 20px;
    padding: 30px;
    border: 1px solid blue;
    text-align: center;
    background-color: #fff;
    transition: 0.3s;
}

문제

box에 width를 50%로 지정해주었지만 실질적으론 50% 값보다 넓게 잡힘

-> 패딩값과 보더값이 넓이로 계산이 안되어 있는 상태에서 계산을 한 이후에 추가가 되었기 때문

 

 

 

 

margin:20px, padding:30px

해결

box-sizing:border-box; 지정

-> width:50%이 border라인에 맞춰짐

 

패딩이나 보더의 값을 변경해도 width 50%의 영역은 변하지 않음

50%의 영역 안에서 변경됨 

 

box의 margin을 없애고

padding값을 10px 변경

border에 맞춰 width 50% 설정 완료

보기 좋게

box의 부모태그 item-list에 padding:20px 설정 

html {
    background-color: black;
}
.item-list {
    position: relative;
    border: 2px solid #004fff;
    background-color: #ddd;
    padding: 20px;
}
.item {
    width: 50%;
    /* margin: 20px; */
    padding: 10px;
    border: 1px solid blue;
    text-align: center;
    background-color: #fff;
    transition: 0.3s;
    box-sizing: border-box;
}
.item:hover {
    box-shadow: 0 6px 32px rgba(0,79,255,0.3);
}

 

 

모든 태그의 box-sizing 넣기 (일일이 입력할 필요x)

* {
        box-sizing: border-box;
}

 

---

 

https://www.w3schools.com/css/css3_box-sizing.asp

 

---

 

홀 이중에 헤더 메뉴바 만들때 해봐야겟다 !