[css] 단위

이 글을 부스트코스 강의를 기반으로 작성하였습니다.

절대 길이

px(pixels)

• 1px는 화면에 한 개의 점과 같다.

• 사실 컴퓨터 화면, 해상도에 따라 상대적인 단위이다. 따라서 픽셀은 상대 단위이지만 화면에서 고정된 크기값을 가지고 있기 때문에 절대길이 라고 생각하자.

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

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

pt(point)

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

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

• 윈도우에서는 9pt = 12px, 맥에서는 9pt = 9px로 보이게 된다.

• 따라서 웹갤발시 권장하는 단위가 아니다.

상대 길이

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

%(percentage)

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

em(font soze of the element)

• 선언한 해당 폰트의 대문자 M의 너비를 기준으로 하는 상대적인 단위이다.

• 1em은 현재 지정된 폰트 크기와 같고, 2em은 현재 폰트 크기의 두배, 즉 200%를 의마한다.

• 1em은 16px이다.

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

rem(font size of the root element)

• root의 font-size를 기준으로 값을 환산합니다.

vw(1% of viewport's width)

• viewport의 width값을 기준으로 1%의 값으로 계산됩니다.

추가

절대 단위

컨테이너의 사이즈가 변경되어도 고정된 크기를 유지한다. 즉 반응형으로는 작동되지 않는다.

• px

상대 단위

부모컨테이너의 크기에 따라 크기를 유동적으로 정한다. 반응형 웹으로 작성할 때 유용하다.

반응형 웹사이트를 만들기 위해서는 컨텐츠는 물처럼 만들어야한다.

px 과 같은 고정적인 절대단위가 아닌 상대단위를 이용해야 물처럼 만들수 있다.

• em (relative to parent element)
  - 폰트사이즈를 나타내는 단위이다.
  - 1em = 16px이다.
  - 부모의 폰트크기(em)에 따라 자식의 폰트크기를 상대적으로 조절할 수 있다.
  - %와 유사하다. 1em = 100%, 0.5em = 50% (단, 폰트에 한해서)
• rem (relative to root element)
  - 루트의 폰트크기(em)에 따라 자식의 폰트크기를 상대적으로 조절할 수 있다.
  - 루트 폰트의크기(em)는 따로 건들지 않는이상 100%, 브라우저가 제공하는 기본 크기이다.
• vw (viewport reated width)
  - 뷰포트(브라우저화면)의 넓이에 따라 상대적인 크기를 지정
• vh (viewport reated height)
  - 뷰포트(브라우저화면)의 높이에 따라 상대적인 크기를 지정
• %
  - 부모요소의 상대적인 크기를 지정