Mini Quiz 질문

Question

이 박스의 세로 사이즈는 몇 px일까요?

.box1 { border: 1px solid black; padding: 10px 20px; } .text1 { font-size: 24px; height: 3em; } text1이라는 클래스를 가진 div의 세로 사이즈는 어떻게 될까요? 이 문제를 잘 모르겠습니다.

nwd09074926 · Answer

안녕하세요! JiHyunLim 님! 해당 문제 는 class="text1" 이 입력되어있는

박스의 세로 높이 가 얼마가될지 고민해 보는 문제랍니다! 물론 입력된 글자는 텍스트이겠지만, 텍스트가

상자 안에 들어가 있겠죠?! 그

상자의 높이를 묻는 질문입니다! 따라서, 밖에 있는

말고,

인 상자의 높이 를 구하셔야합니다! 두 상자가 다르다는 것을 먼저 확인하기 위해서는

과

각각에 배경색을 노란색, 파란색 등으로 변경해 보세요! 그러면,

상자 안에

상자가 들어있다는 것을 확인하실 수 있고, 이 때

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

communityai8509 · Answer

안녕하세요, 인프런 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 를 초과할 경우, 실제 세로 사이즈는 달라질 수 있습니다.