<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: d2coding, Consolas, 'Courier New', monospace; font-size: 24px; line-height: 32px; white-space: pre;">
<div><span style="color: #d7ba7d;">안녕하세요!<br /><br />.main-message</span>&nbsp;<span style="color: #d7ba7d;">small</span>{</div>
<div><span style="color: #9cdcfe;">display</span>:&nbsp;<span style="color: #ce9178;">block</span>;&nbsp;&nbsp;</div>
<div><span style="color: #9cdcfe;">font-size</span>:&nbsp;<span style="color: #b5cea8;">1rem</span>;</div>
<div><span style="color: #9cdcfe;">margin-bottom</span>:&nbsp;<span style="color: #b5cea8;">0.5em</span>;</div>
<div>}</div>
<br />
<div><span style="color: #d7ba7d;">#scroll-section-2</span>&nbsp;<span style="color: #d7ba7d;">.main-message</span>&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #9cdcfe;">font-size</span>:&nbsp;<span style="color: #b5cea8;">3.5rem</span>;</div>
<div>&nbsp;&nbsp;<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">blue</span>;</div>
<div>}<br /><br />html 이 14pt일때<br />small 은 14*1 이고<br />아래 main-message 는 14*3.5<br />라는 의도는 알겠고 실제로도<br />그렇게 확인이 됐는데요,<br /><br />궁금한건<br />small태그는 main-message안에<br />있기도 하니까, <br />아래 3.5배가 한번 더 적용되어야<br />된다고 생각했는데 안 되는 이유가<br />뭔가요??<br /><br /></div>
</div>

<p>rem은 무조건 루트 요소, 즉 html의 폰트 사이즈를 기준으로 하기 때문에<br />요소가 얼마나 중첩되어있는지는 상관 없답니다.<br />em의 경우는 말씀하신대로 요소를 포함하고 있는 부모 요소의 폰트 크기에 영향을 받습니다^^</p>

인프런 커뮤니티 질문&답변

css 우선순위?