크기(size)

크기(size)

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

• 크기 지정

• 비율

• 기타

크기 지정

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

• 절대적인 단위

  • cm(센티미터)

  • mm(밀리미터)

  • Q(1/4밀리미터)

  • in(인치)

  • pc(피카)

  • pt(포인트)

  • px(픽셀)

• 상대적인 단위

  • em

  • rem

  • lh

  • vw

  • vh

픽셀(px)

비율

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

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

width : 100%;

기타

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

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

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