개념정리 크기 단위 (ps, %, em, vm)

2025. 12. 1. 10:16·FrontEnd/CSS

px : 절대값

em, % : 상대값

 

대부분의 브라우저 폰트 사이즈 기본값 : 16px, 1em, 100%

 

px

% : 지정된 사이즈의 상대적인 사이즈를 결정. 기본이 10px로 지정되어 있으면 50% 지정시 5px로 변경

em : em은 배수 단위 상속받은 요소의 사이즈 기준

rem : 최상위 요소의 사이즈 기준

 

vw / vh : viewport 단위 브라우저 너비를 기준으로 한 상대적 사이즈를 의미

vw : viewport 너비의 1/100

vh  : viewport 높이의 1/100

vmin  : viewport 너비 또는 높이 중 작은 쪽의 1/100

vmax :  viewport 너비 또는 높이 중  쪽의 1/100

 

'FrontEnd > CSS' 카테고리의 다른 글

Position  (0) 2025.12.06
개념 정리 (inline, block, box, margin겹침)  (0) 2025.12.06
개념정리 SELECTOR(선택자)  (0) 2025.12.01
레이아웃 Flex와 Grid  (0) 2025.11.27
'FrontEnd/CSS' 카테고리의 다른 글
  • Position
  • 개념 정리 (inline, block, box, margin겹침)
  • 개념정리 SELECTOR(선택자)
  • 레이아웃 Flex와 Grid
dev_user
dev_user
csjang94-dev 님의 블로그 입니다.
  • dev_user
    devJang
    dev_user
    • Category (127)
      • Linux (2)
      • FrontEnd (11)
        • HTML (1)
        • CSS (5)
        • JavaScript (4)
        • React (1)
      • BackEnd (4)
        • node.js (7)
        • Vue.js (1)
      • DB (13)
      • Python (3)
      • GitHub (1)
      • AWS (18)
      • ErrorCode (2)
      • AWS 광주 개발일지(25.08.19~25.01... (55)
        • 교육 25년 8월 일지 (7)
        • 교육 25년 9월 일지 (22)
        • 교육 25년 10월 일지 (2)
        • 교육 25년 11월 일지 (4)
        • 교육 25년 12월 일지 (19)
      • Projects (3)
        • 미니프로젝트(25.08.29) (0)
        • Git Page -> Portfolio제작 (2.. (1)
      • 개념 정리 (1)
      • 유용한 서비스 (3)
  • 인기 글

  • 링크

    • GitHub
    • Portfolio
    • YouTube
    • 개발자 로드맵 사이트
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 전체
    오늘
    어제
  • hELLO· Designed By정상우.v4.10.4
dev_user
개념정리 크기 단위 (ps, %, em, vm)
상단으로

티스토리툴바