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

by Lovefield

CSS /

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 까지 포함한 값으로 적용됩니다.

Author

Lovefield

Lovefield

Web Front-End developer

하고싶은게 많고, 나만의 서비스를 만들고 싶은 변태스러운 개발자입니다.

로그인

디코에 오신 것을 환영해요!
전문가들의 수많은 아티클 창고 🤓