🌱 픽셀(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>
읽어주셔서 감사합니다:)
