[CSS] 5. 박스 모델

in CSS on Css



5. 박스 모델

박스 모델이란

  • 네모 박스를 어떻게 구성하느냐
  • 네모가 겹겹히 쌓여서 있는 구조
  • content > padding > border > margin
  • content : html 내용이 담기는 요소 (width, height)
  • padding : content가 테두리를 가질 수 있는데 그 테두리와 내용 사이의 공백
  • border : content의 테두리 (기본값 0)
  • margin : 가장 바깥쪽 여백
  • 실선 영역 : content 박스, border 박스 (content + border)


크기 - width, height

  • width : 요소의 너비 설정
  • 기본값 : auto
  • 상속되지 않는다.
  • auto : 블록/인라인시 자기가 차지할 수 있는 부분의 전체
  • inline 요소에는 width,height를 지정할 수 없다!


크기 - max-width, min-width, max-height, min-height


.container {
    width: 50vw;
    min-width: 300px;
    height: 50px;
}
  • width, height와 사용방법 거의 동일
  • 뷰포트에 따라 달라질때, 어느 시점부터는 동일했으면 좋겠다 싶을 때 사용
  • 부모에 따라서 작아지다가(커지다가) 어느 순간부터 부모영향 안받고 최소(최대) 크기 유지
  • 함수표기법은 익스 안되지만 이건 익스된다!


여백 - margin

<div class="parent">
안녕!
    <div class="child">
    안녕!
    </div>
</div>

.parent {
    width: 300px;
    height: 200px;
}
.child {
    width: 50px;
    height: 50px;
}
  • 박스 모델의 가장 바깥 부분
  • shorthand : top > right > bottom > left
  • 기본값 == 0
  • margin: 10px (네 영역 모두 적용 / rem 사용 가능)
  • margin: 10px 20px (위아래: 10 좌우: 20)
  • margin: 10px 20px 30px (위:10 좌우: 20 아래: 30)
  • % 사용시 부모의 width의 %로 들어간다 (주의하기)


여백 - margin collapsing (마진 상쇄)

<div class="box"><div>
<div class="box"><div>
<div class="box"><div>

.box {
    width: 50px;
    height: 50px;
    margin-top: 10px;
    margin-bottom: 20px;
    // top, bottom 이 만나 더 큰 bottom 20 적용
}
  • margin이 여러개가 겹쳤을 때 사라지는 것
  • 여러 블록요소들의 위/아래 margin이 경우에 따라 가장 큰 크기를 가진 margin으로 결합(상쇄)되는 현상
  • 블록요소에서만 발생
  • 위/아래에서 발생 (좌우 x)


인접 형제일 때 (위아래로)

<div class="box"><div>
<div class="box"><div>
<div class="box"><div>

.box {
    width: 50px;
    height: 50px;
    margin-top: 10px;
    margin-bottom: 20px;
    // top, bottom 이 만나 더 큰 bottom 20 적용
}


부모-자식요소 간

<div class="parent">
    <div class="child">
    </div>
<div>

.parent {
    width: 50px;
    height: 50px;
    margin-top: 10px;
    // border: 1px 주면 마진 상쇄 없어진다.
}

.child {
    width: 20px;
    height: 20px;
    margin-top: 40px;
}
  • 부모의 border,padding이 없을 때 부모의 margin과 자식의 margin이 만난다.
  • 부모의 margin-top이 40으로 적용된다.


빈 블록

  • 내부 컨텐츠가 아무것도 없거나 내부 컨텐츠의 height == 0 일때,
    자신의 margin-top/bottom이 만나서 발생한다.


여백 - padding

<div class="parent">
안녕!
    <div class="child">
    안녕!
     <div class="grand-child">
     </div>
    </div>
</div>

.parent {
    width: 300px;
    height: 300px;
}
.child {
    width: 60px; 
    height: 60px;
    padding: 10%; // 부모 요소(parent)의 가로가 100 > 30
}
.grand-child {
    width: 30px; 
    height: 30px;
}
  • margin과 사용법이 동일하다.
  • shorthand 가능
  • margin은 음수 사용 가능 (padding은 불가)
  • % 조심하기 : 부모 요소의 가로길이가 100이다.
  • 세로의 마진을 주고자할때도 기준은 가로이니 조심하기


테두리 - border-style, border-width, border-color

<div class="contatiner">
    안녕!
</div>

.container {
    width: 300px;
    height: 300px;

    border-style: dotted solid;
    // border-style: none; 이면 아래 속성 반영 안된다.

    border-width: 10px;
    border-color: red blue;
}
  • border-style: solid dashed (maring/padding과 같은 조건으로 적용)
  • border-width: 두께 thin, medium, thick, <length> (thin…얘네는 브라우저마다 다르다)
  • border-color


테두리 - border (shorthand)

.box {
    width: 300px;
    height: 300px;
    border: solid 1px red;
}
  • 세가지 요소 모두 optional
  • style은 기본이 none 이므로 solid 사용하기
  • border와 outline은 개념이 다르다(탭하여 버튼 이동시 외곽선)
  • 순서 상관 없다.


테두리 - border-radius

.box {
    width: 300px;
    height: 300px;
    border: solid 1px red;
    border-radius: 30px;
    // border-radius: 150px 주면 원이 된다.
    // border-radius: 50% 주면 원이 된다.
}
  • 요소 테두리 경계의 꼭지점을 동그랗게 만드는 것
  • px 사용시 모서리에 반지름이 30px 만큼의 원이 생긴다.
  • <lenght>
  • <percentage> : 기준이 가로는 부모의 가로, 세로는 부모의 세로
  • border-radius: 10px 20px 30px 40; (margin과 가능)
  • border-style: none이어도 사용 가능


box-sizing

<div class="box">
    <span>반갑습니다.</span>
    <h3>안녕하세요</h3>
</div>

* {
    box-sizing: border-box;
    // 이 상태를 많이 한다.
}

.box {
    width: 300px;
    height: 300px;
    border: 30px solid blue;
    padding: 20px;
    // 전체 크기 : 300 + 30 + 30 + 20 + 20 = 400

    box-sizing: content-box; // 컨텐츠 박스 기준
    box-sizing: border-box; // border 박스 기준 (padding + border)
    // width 값이 보이는 값과 같으니 더 좋다.
}
  • 박스의 가로와 세로를 지정할 수 있는 방법
  • content-box : 기본값 (content 기준)
  • border-box : 총 가로 길이가 width, 총 세로 길이가 height 이 된다. (margin 제외)


나의 회고 🤫

박스 모델의 마진 상쇄가 항상 내 발목을 잡았었는데 오늘 확실히 알 수 있어서 좋았다.
box-sizing의 개념도 새로웠다. 그동안은 box-sizing을 활용하지 못했었는데,
앞으로 이걸 moverster에 적용하면 더 이쁘게 css 를 꾸밀 수 있을 것 같다.