em : 부모 기준
rem : root 기준
font-size: 16px; == 1em == 100%
<div class="box-em">
<h1>em : 상대적인 폰트(부모기준으로 상대적)</h1>
<p>
곧 너의 뭇 방황하였으며, 봄바람이다. 아름답고 이상의 끝에 것이다.
인도하겠다는 불어 피가 인간은 불어 풀이 봄바람이다.
얼음 청춘 심장의 없으면, 날카로우나 원대하고, 끝에 피다.
있을 청춘의 무엇을 돋고, 과실이 교향악이다. 어디 쓸쓸한
발휘하기 위하여 끝에 거선의 구할 아니다. 우는 것이 이상을 따뜻한
천고에 투명하되 사막이다. 목숨이 인도하겠다는 사는가 쓸쓸하랴?
얼음과 않는 없으면, 주며, 때문이다.
</p>
</div>
<div class="box-rem">
<h1>rem : 가장 상위요소(html)기준</h1>
<p>
곧 너의 뭇 방황하였으며, 봄바람이다. 아름답고 이상의 끝에 것이다.
인도하겠다는 불어 피가 인간은 불어 풀이 봄바람이다.
얼음 청춘 심장의 없으면, 날카로우나 원대하고, 끝에 피다.
있을 청춘의 무엇을 돋고, 과실이 교향악이다. 어디 쓸쓸한
발휘하기 위하여 끝에 거선의 구할 아니다. 우는 것이 이상을 따뜻한
천고에 투명하되 사막이다. 목숨이 인도하겠다는 사는가 쓸쓸하랴?
얼음과 않는 없으면, 주며, 때문이다.
</p>
</div>
body {
font-size: 16px;
}
.box-em {
font-size: 20px;
}
.box-em p {
/* 1em => 부모(.box-em)이 fz20 이기때문에 20px이다. */
font-size: 1em;
/* 30px */
line-height: 1.5em;
}
.box-rem {
/* root가 16px, 16*1.25 == 20px */
font-size: 1.25rem;
}
바디 : 16px
div.box-em : 20px
div > p : 1em (부모 20픽셀기준으로 p는 20픽셀이다)
div.box-rem : 1.25rem
( 최상위 요소(html)기준으로 16*1.25 == 20px)
'Web > HTML CSS 퍼블리싱' 카테고리의 다른 글
이미지맵(image map) 만들기 (0) | 2022.02.09 |
---|---|
부모요소의 값을 상속하는 inherit (0) | 2022.02.07 |
display 속성의 이해 (인라인, 인라인블록, 블록) (0) | 2022.02.03 |
Hamburger Menu (+, ~ 선택자 이용) (0) | 2021.07.22 |
iframe, a target속성 (0) | 2021.07.22 |