> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/css/develop-guide/size.md).

# 크기(size)

## 크기(size)

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

* 크기 지정
* 비율
* 기타

### 크기 지정

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

* 절대적인 단위
  * cm(센티미터)
  * mm(밀리미터)
  * Q(1/4밀리미터)
  * in(인치)
  * pc(피카)
  * pt(포인트)
  * px(픽셀)
* 상대적인 단위
  * em
  * rem
  * lh
  * vw
  * vh

{% embed url="<https://codepen.io/hiphop5782/pen/KKvXxdN>" %}

{% content-ref url="/pages/H7sjGkGYQwWLHVTz2S9p" %}
[픽셀(px)](/web/develop-page/css/develop-guide/size/pixel.md)
{% endcontent-ref %}

### 비율

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

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

```css
width : 100%;
```

### 기타

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

* auto : 자동으로 계산되는 값을 이용한다.
* inherit : 외부 영역과 동일한 값을 이용한다.