[CSS] 크기 단위(px, %, em, rem)

HTML & CSS

[CSS] 크기 단위(px, %, em, rem)

emmaOH! 2024. 5. 19. 20:17

🌱 픽셀(px)

절대적인 크기 단위로 사용자의 화면 해상도에 따라 정확한 크기를 가집니다.

예를 들어, 내 화면이 1280px * 720px의 해상도를 가진 HD 화면일 때

특정 요소의 너비가 64px라면 64칸의 너비값을 가지게 됩니다.

🌱 퍼센트(%)

부모 태그의 크기에 따라 상대적인 크기를 가집니다.

예를 들어, 부모 요소의 너비가 320px일 때 자식 요소의 너비를 50%로 지정했다면

자식 요소의 실제 너비값은 320px의 절반인 160px이 됩니다.

#parent {
  width: 320px;
}

#child {
  width: 50%;	/* 320px * 0.5 = 160px */
}

---------------------------------------------

<div id="parent">
	너비가 320px인 부모 요소
    
	<div id="child">
    	너비가 160px인 자식 요소
    </div>
    
</div>

🌱 em

퍼센트와 마찬가지로 부모 태그의 크기에 따른 상대적인 크기를 가지는 단위입니다.

부모 태그의 font-size에 비례하는 크기값을 가지게 됩니다.

예를 들어, 부모 태그의 font-size가 10px일 때 자식 요소의 font-size를 4em으로 지정했다면

자식 요소의 실제 font-size는 10px의 4배인 40px가 됩니다.

(이 경우, 1em = 10px)

#parent {
  font-size: 10px;
}

#child1 {
  font-size: 4em;	/* 10px * 4 = 40px */
}

#child2 {
  font-size: 0.5em;	/* 10px * 0.5 = 5px */
}

----------------------------------------------

<div id="parent">
	font-size가 16px인 부모 요소
    
	<div id="child1">
    	font-size가 4em인 자식 요소
    </div>    
	<div id="child2">
    	font-size가 0.5em인 자식 요소
    </div>
    
</div>

🌱 rem(root em)

em의 개념과 비슷한 rem은 자식 요소의 부모 태그가 아닌

파일에 존재하는 최상위 태그인 <html> 태그의 font-size에 비례하는 크기값을 가집니다.

예를 들어, <html> 태그의 font-size가 12px이고 특정 요소의 font-size를 4rem으로 지정했다면

해당 요소 실제 font-size는 12px의 4배인 48px가 됩니다.

(이 경우, 1rem = 12px)

html {
	font-size: 12px;
}

body {
  font-size: 10px;
}

#item {
  font-size: 4rem;	/* 12px * 4 = 48px */
}

----------------------------------------------

<html>
	<body>
    	font-size가 10px인 요소
        
        <div id="item">
            font-size가 4rem인 요소
        </div>
        
    </body>
</html>

읽어주셔서 감사합니다:)