HTML/CSS 에서 크기단위는 총 세가지가 존재한다.
- px : 절대적 크기 단위
- em : 부모 요소 크기에 따른 배수 단위
->부모 요소가 없는 경우 html 문서 default font size가 적용됨
- rem : html 문서 설정에 따른 배수 단위
※실습 스크립트
<style>
#span1{
font-size: 10px;
}
/* p <->span 은 자식 관계이기 때문에 p 수정시 span 이 영향을 받음 */
p{
font-size: 10px;
}
#span2{
/* em : 부모요소 크기에 따른 배수 단위 */
font-size: 2em;
}
#span3{
/* rem : html 문서의 폰트 크기에 따른 배수 단위 */
font-size: 2rem
}
</style>
. . .<body>
<span id="span1">px로 조정</span>
<p>
<span id="span2">
em으로 조정
</span>
</p>
<br>
<span id="span3">rem으로 조정</span>
</body>
</html>
-<p>는 span2 : 아이디 선택자가 적용된 <span>의 '부모'에 해당됨
※실습 결과
10 px 설정
10px X 2(2em)
html default X 2(2rem)
댓글
댓글 쓰기