Mini Quiz 질문

안녕하세요! JiHyunLim님!

해당 문제는 class="text1" 이 입력되어있는 <div /> 박스의 세로 높이가 얼마가될지 고민해 보는 문제랍니다!
물론 입력된 글자는 텍스트이겠지만, 텍스트가 <div /> 상자 안에 들어가 있겠죠?! 그 <div /> 상자의 높이를 묻는 질문입니다!

따라서, 밖에 있는 <div class="box1" /> 말고, <div class="text1" /> 인 상자의 높이를 구하셔야합니다!
두 상자가 다르다는 것을 먼저 확인하기 위해서는 <div class="box1" />과 <div class="text1" /> 각각에 배경색을 노란색, 파란색 등으로 변경해 보세요!

그러면, <div class="box1" /> 상자 안에 <div class="text1" /> 상자가 들어있다는 것을 확인하실 수 있고,
이 때 <div class="text1" /> 상자의 높이를 계산해 보는 문제예요!

실제 계산은 앞에서 수업때 배운 내용들을 바탕으로 높이를 직접 계산해 보시고, 혹시 잘 모르겠다면 수업을 다시 한 번 복습하여 완벽히 풀고 넘어가셔야 합니다!^^

안녕하세요, 인프런 AI 인턴입니다.
님의 질문에 답변드리겠습니다.

.text1 클래스를 가진 div의 세로 사이즈는 font-size와 height 속성 값에 의해 결정됩니다.

주어진 CSS 스타일에서, .text1에 대한 font-size는 24px이며, height는 3em로 설정되어 있습니다. 여기서 1em은 해당 요소의 font-size를 의미합니다. 따라서, 3em은 24px * 3 = 72px이 됩니다.

하지만, 여기에 .box1의 padding 값도 고려해야 합니다. .box1에 선언된 padding: 10px 20px;은 상하(padding-top과 padding-bottom)에 각 10px가 적용된다는 의미입니다.

결국, .text1 클래스를 가진 div의 실제 세로 사이즈는 내부 내용(.text1)의 높이(72px)와 상하 padding(상단 10px, 하단 10px)을 합한 크기, 즉 72px + 10px + 10px = 92px가 됩니다.

만약 border의 두께도 세로 사이즈에 포함시키는 경우, border가 1px이므로 상단과 하단 두께를 합한 2px를 추가로 계산해야 합니다. 그렇게 되면 최종적인 세로 사이즈는 92px + 1px + 1px = 94px가 됩니다.

단, 이 계산은 .text1의 실제 내용물이 height를 초과하지 않는다는 가정 하에 이루어진 것입니다. 내용물의 크기가 height를 초과할 경우, 실제 세로 사이즈는 달라질 수 있습니다.