140 lines
3.4 KiB
Markdown
140 lines
3.4 KiB
Markdown
# 단위와 크기
|
|
|
|
CSS에서 크기를 지정할 때는 다양한 **단위(unit)**를 사용할 수 있어.
|
|
단위에 따라 요소의 크기, 여백, 글자 크기 등을 다르게 설정할 수 있어!
|
|
|
|
CSS 단위는 크게 절대 단위와 상대 단위로 나뉘어.
|
|
|
|
* 절대 단위
|
|
- px, cm, mm, in, pt, pc
|
|
* 상대 단위
|
|
- %, em, rem, vw, vh, vmin, vmax, ex, ch
|
|
|
|
## 절대 단위 (Absolute Units)
|
|
절대 단위는 특정한 물리적 크기를 기준으로 설정돼.
|
|
웹에서는 주로 px을 많이 사용해.
|
|
|
|
### px (픽셀)
|
|
* 가장 많이 쓰이는 단위
|
|
* 디바이스의 **물리적 픽셀(pixel)**을 기준으로 함
|
|
* 고정된 크기이기 때문에 반응형 디자인에는 다소 불리함
|
|
```css
|
|
p {
|
|
font-size: 16px;
|
|
}
|
|
```
|
|
> 일반적으로 웹 브라우저의 기본 글자 크기는 16px이야.
|
|
|
|
### cm, mm, in, pt, pc
|
|
* 인쇄용 디자인에서 주로 사용
|
|
* 웹에서는 거의 사용되지 않음
|
|
|
|
```css
|
|
div {
|
|
width: 10cm;
|
|
height: 2in;
|
|
}
|
|
```
|
|
|
|
* cm : 센티미터 (1cm = 10mm)
|
|
* mm : 밀리미터
|
|
* in : 인치 (1in = 2.54cm)
|
|
* pt : 포인트 (1pt = 1/72인치)
|
|
* pc : 파이카 (1pc = 12pt)
|
|
|
|
## 상대 단위 (Relative Units)
|
|
상대 단위는 요소의 부모 요소나 화면 크기에 따라 유동적으로 변하는 단위야.
|
|
반응형 웹 디자인에서 필수적으로 사용돼!
|
|
|
|
### % (백분율)
|
|
* 부모 요소의 크기를 기준으로 %만큼 크기를 설정
|
|
* 레이아웃에서 유동적인 크기를 지정할 때 유용함
|
|
```css
|
|
.parent {
|
|
width: 500px;
|
|
}
|
|
|
|
.child {
|
|
width: 50%; /* 부모의 50% */
|
|
/* 부모의 크기가 500px이면 자식 요소는 250px이 됨! */
|
|
}
|
|
```
|
|
|
|
### em (부모 요소의 글자 크기 기준)
|
|
* 부모 요소의 font-size를 기준으로 크기가 결정됨
|
|
* 기본적으로 1em = 부모 글자 크기
|
|
* 배수로 크기를 조정할 수 있음
|
|
```css
|
|
.parent {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.child {
|
|
font-size: 1.5em; /* 부모의 1.5배 */
|
|
/* 부모가 20px이면, 자식 요소의 글자 크기는 30px이 됨. */
|
|
}
|
|
```
|
|
> em을 중첩해서 사용하면 예상보다 큰 값이 나올 수 있음!
|
|
> ```css
|
|
> body {
|
|
> font-size: 16px;
|
|
> }
|
|
> .container {
|
|
> font-size: 1.5em; /* 16px * 1.5 = 24px */
|
|
> }
|
|
> .child {
|
|
> font-size: 2em; /* 24px * 2 = 48px */
|
|
> }
|
|
> ```
|
|
|
|
### rem (루트 요소 <html>의 글자 크기 기준)
|
|
* html 요소의 font-size를 기준으로 크기 결정
|
|
* em과 달리 부모 요소에 영향을 받지 않음
|
|
```css
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.container {
|
|
font-size: 1.5rem; /* 16px * 1.5 = 24px */
|
|
}
|
|
|
|
.child {
|
|
font-size: 2rem; /* 16px * 2 = 32px */
|
|
}
|
|
```
|
|
> 반응형 웹에서 추천되는 단위!
|
|
|
|
### vw / vh (뷰포트 기준)
|
|
* vw: 브라우저 너비(Viewport Width)의 %
|
|
* vh: 브라우저 높이(Viewport Height)의 %
|
|
```css
|
|
div {
|
|
width: 50vw; /* 화면 너비의 50% */
|
|
height: 30vh; /* 화면 높이의 30% */
|
|
}
|
|
```
|
|
> 반응형 디자인에서 매우 유용!
|
|
|
|
### vmin / vmax (작은 쪽 or 큰 쪽 기준)
|
|
* vmin: vw와 vh 중 작은 값 사용
|
|
* vmax: vw와 vh 중 큰 값 사용
|
|
```css
|
|
div {
|
|
width: 10vmin; /* 작은 쪽의 10% */
|
|
height: 20vmax; /* 큰 쪽의 20% */
|
|
}
|
|
```
|
|
> 정사각형 요소를 만들 때 유용!
|
|
|
|
### ex / ch (문자 기준)
|
|
* ex: 소문자 x의 높이를 기준으로 크기 지정
|
|
* ch: 숫자 0의 너비를 기준으로 크기 지정
|
|
```css
|
|
p {
|
|
width: 10ch; /* 숫자 0이 10개 들어갈 크기 */
|
|
}
|
|
```
|
|
> 코드 블록이나 글자 기반 디자인에서 유용!
|
|
|