[ CSS ] 속성 ( 단위 )

들어가기

CSS 속성은 그 종류가 매우 다양하고, 지속해서 업데이트 되고 있다.

기존의 속성 명이 변경되기도 하고, 속성이 스펙아웃 되기도 하며, 새로운 속성이 추가되기도 한다.

 

학습하기

CSS 속성과 값을 사용할 때 값과 함께 많이 사용되는 것 중의 하나가 단위이다.

단위의 종류와 그 특성에 대해서 알아보자.

---

📌 단위

단위는 크게 절대 길이 단위와 상대 길이 단위로 구분되어진다.

🤍 절대 길이

 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않는다.

 

- px ( 1px=1/96th of 1 inch )

: 절대 길이

  다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적이다.

  여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어있다.

  디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장한다.

 

- pt ( 1px=1/72 of 1 inch )

: 컴퓨터가 없던 시절부터 있던 단위이다.

  인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위이다.

  웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용할 수 있다.

  그러나 사용하는 기기의 해상도에 따라 차이가 있어 W3C에서도 pt는 웹개발 시 권장하는 단위가 아니다.

  ex)

  Windows에서는 9pt = 12px,  Mac에서는 9pt = 9px 로 보이게 된다.

---

🤍 상대 길이

다른 요소의 크기나 폰트 크기, 브라우저 등의 크기에 따라 상대적으로 값이 변한다.

- %

: 부모의 값에 대해서 백분율로 환산한 크기를 갖게 된다.

 

- em

: font-size를 기준으로 값을 환산한다. 소수점 3자리까지 표현이 가능하다.

 

- rem

: root의 font-size를 기준으로 값을 환산한다.

 

- vw

: viewport의 width값을 기준으로 1%의 값으로 계산된다.

---

01. https://www.boostcourse.org/단위 설명

비전공자를 위한 HTML/CSS