HyunJun 기술 블로그

CSS 길이/크기 단위, 절대 길이, 상대 길이 본문

CSS

CSS 길이/크기 단위, 절대 길이, 상대 길이

공부 좋아 2023. 6. 1. 15:27
728x90
반응형

1. 절대 길이

1) px

  • 1픽셀(화소)은 1dot을 의미한다.
  • pixel은 해상도에 따라 상대적인 크기를 갖는다.

2) inch

  • 인치는 물리적인 측정값이지만, CSS에서는 결국 pixel로 변환된다.
  • 1in == 96px

2. 상대 길이

  • %
    • 보통 부모의 길이를 기준으로 0% ~ 100%까지 설정 가능하다.

1) 글꼴 상대 길이

  • em
    • 부모의 font-size를 기준으로 한다.
    • 부모의 font-size가 16px일 때 자식 엘리먼트에게 1em을 설정할 경우 16px로 적용된다.
  • rem
    • 최상위 엘리먼트(<html>)의 font-size를 기준으로 한다.
    • html의 font-size가 32px이고 하위 div의 font-size가 2rem으로 설정했을 때 출력되는 크기는 64px이다.
    • 반응형에서 많이 사용한다.

2) Viewport 상대 길이

  • vm, vh
    • viewport width, viewport height
    • %와 마찬가지로 0 ~ 100까지이며, 화면 크기를 기준으로 한다.
728x90
반응형
저작자표시 비영리 변경금지
'CSS' Related Articles more
Comments