<p>body에 길이 100%를 줄 때&nbsp;</p>
<div style="color: #eeffff; background-color: #263238; font-family: Consolas, 'Courier New', monospace; font-size: 17px; line-height: 23px; white-space: pre;">
<div><span style="color: #ffcb6b;">html</span><span style="color: #89ddff;">,</span></div>
<div><span style="color: #ffcb6b;">body</span><span style="color: #89ddff;">,</span></div>
<div><span style="color: #89ddff;">#</span><span style="color: #f78c6c;">root</span><span style="color: #89ddff;">,</span></div>
<div><span style="color: #89ddff;">#</span><span style="color: #f78c6c;">root</span>&nbsp;<span style="color: #89ddff;">&gt;</span>&nbsp;<span style="color: #ffcb6b;">div</span>&nbsp;<span style="color: #89ddff;">{</span></div>
<div>&nbsp;&nbsp;<span style="color: #b2ccd6;">height</span><span style="color: #89ddff;">:</span>&nbsp;<span style="color: #f78c6c;">100%</span><span style="color: #89ddff;">;</span></div>
<div><span style="color: #89ddff;">}</span></div>
</div>
<p>이렇게 주셨는데 왜 #root를 써야 하나요? 어쩌다가 클래스 명이 루트가 된건가요</p>

<p>#root같은 경우는 react에서 자동으로 만들어주는 div 태그라고 보시면 됩니다!</p>
<p>개발자도구에서 html 요소들을 확인해보면, id가 root인 div 태그가 포함되어 있습니다. 그래서 body 태그의 최상위 자식으로 있는 #root 태그에도 height를 줘서 우리가 코딩하는 컴포넌트는 부모가 100%인 상태로 시작할 수 있어서 높이 조절이 자유롭다는 장점이 있습니다.</p>
<p></p>
<p>감사합니다.</p>

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

#root에 대해 더 알고 싶습니다.