[css] 단위

1. 절대 단위

• px : pixel, 화소를 의미한다. 화면을 구성하는 가장 기본 단위이다. 네모 한칸을 의미한다.
• pt : 1 / 72 인치이다. 웹에서는 거의 사용하지 않는다.

2. 상대 단위

• % : 부모 요소에 비례하여 비율 적용한다.
• em : 현재 폰트 사이즈를 기준으로 한다.
• rem : 최상위 폰트 사이즈를 기준으로 한다.

/* em 예시 */
/* 현재 폰트 사이즈가 20px인 경우 */

1em = 1 X 20 = 20px
3em = 3 X 20 = 60px

/* rem 예시 */
/* 최상위 폰트 사이즈가 20px인 경우 */

1em = 1 X 20 = 20px
3em = 3 X 20 = 60px

em과 rem의 차이를 잘 알아두기.

3. Viewport를 고려한 단위

- 화면에서 그려지는 영역을 뜻하는 viewport를 고려한 단위가 있다. 반응형 작업 시 많이 이용하는 단위이다.

• vw  
• vh

(예시) viewport가 가로는 1200px이고 세로는 920px이다.

이 때 10vw = 1200 X 0.1 = 120px 이다.

그리고 50vh = 920 X 0.5 = 460px 이다. 

 

viewport

4. calc 함수 단위

- css에서 이용할 수 있는 함수이다. 연산 가능한 css 함수이다.

- 사칙연산 수행 결과를 속성값에 이용한다.

- 이 때 주의할 점은 사칙연산 사이에 반드시 공백을 주기.

 

단위를 이용할 때에 <div> 태그를 많이 이용하는데, div 안에 내용이 없으면 보여지지 않는 경우가 많기 때문에 잘 보이도록 텍스트를 적어주기.