Dico

[입문] 웹 프론트 엔드 - 4주차 - box model

  • Lovefield

box model

웹 사이에서는 다양한 모양을 볼 수 있습니다.

하지만 실질적으로 웹 사이트에서는 모두 box 모양을 하고 있습니다.

이번 강의에서는 웹 사이트에서 엘리먼트가 표현되는 box model에 대해서 알아봅시다.

box model, 즉 박스 모양의 모델입니다.

웹사이트에서는 표시되는 방식이 모두 box 모양이기 때문에, box모양을 표현하기 위한 방법입니다.

가장 많이 쓰는 3가지 속성은 다음과 같습니다.

  • block
    block은 기본적으로 부모 사이즈(가로)를 모두 상속받습니다.
    자기 자신의 사이즈를 가질 수 있습니다.

  • inline-block
    inline-block은 기본적으로 자손의 사이즈를 가집니다.
    inline속성 때문에 텍스트 관련 속성의 영향을 받습니다.
    자기 자신의 사이즈를 가질 수 있습니다.

  • inline
    inline은 기본적으로 자손의 사이즈를 가집니다.
    텍스트 관련 속성의 영향을 받습니다.
    자기 자신의 사이즈를 가질 수 없습니다.

box-sizing

엘리먼트의 사이즈의 범주를 어디까지 잡을 것인지에 대한 속성입니다.

  • content-box
    기본적으로 설정되어 있는 속성입니다.
    width가 padding을 제외한 content 부분까지만 적용됩니다.

  • border-box
    width가 padding과 border 까지 포함한 값으로 적용됩니다.