크기(size)

크기(size)

CSS에서는 크기를 설정하기 위한 다양한 방법을 제공한다.

  • 크기 지정

  • 비율

  • 기타

크기 지정

단위를 지정하여 크기를 명시하는 방법이다.

  • 절대적인 단위

    • cm(센티미터)

    • mm(밀리미터)

    • Q(1/4밀리미터)

    • in(인치)

    • pc(피카)

    • pt(포인트)

    • px(픽셀)

  • 상대적인 단위

    • em

    • rem

    • lh

    • vw

    • vh

비율

외부 영역에 대한 백분율 크기를 지정할 수 있다. 주의할 점은 외부 영역에 크기가 설정되어 있어야 한다는 점이다. HTML의 특성상 폭(width)은는 정해지지만 높이(height)는 자동 계산되는 경우가 많은데, 이 때 높이에 비율을 설정할 수 없다.

이미지 등 기본 크기가 정해져 있는 요에 폭 또는 높이만 설정할 경우 나머지 속성은 비율에 맞게 자동 조정된다.

width : 100%;

기타

각종 키워드를 이용하여 크기를 설정할 수 있다.

  • auto : 자동으로 계산되는 값을 이용한다.

  • inherit : 외부 영역과 동일한 값을 이용한다.

Last updated