프론트엔드 개발 · 기초

HTML 요소 중 블록(Block) 요소와 인라인(Inline) 요소의 차이점을 설명하고, 각각의 예시를 들어주세요.

힌트 · 블록 요소는 항상 새로운 줄에서 시작하여 사용 가능한 너비를 모두 차지하며, 인라인 요소는 필요한 만큼의 너비만 차지하고 줄바꿈을 하지 않습니다.

display 속성width, height자동 줄바꿈content 흐름<div>, <span>

모범답안

면접관님, HTML 요소는 크게 블록 요소와 인라인 요소로 나눌 수 있습니다. 가장 큰 차이점은 화면에 어떻게 배치되느냐입니다.

블록 요소는 항상 새로운 줄에서 시작하고, 부모 요소의 전체 너비를 차지하려고 합니다. <div>, <p>, <h1> 등이 대표적인 예시입니다. 블록 요소는 width와 height 속성을 지정할 수 있습니다.

반면, 인라인 요소는 콘텐츠의 흐름 안에서 필요한 만큼의 공간만 차지하고 줄바꿈을 하지 않습니다. <span>, <a>, <img> 등이 있습니다. 인라인 요소는 width와 height 속성이 잘 적용되지 않는 경우가 많습니다.

이러한 요소들의 특징은 CSS의 display 속성을 통해 변경할 수 있습니다. 예를 들어, display: inline-block을 사용하면 블록 요소처럼 너비와 높이를 지정하면서도 인라인 요소처럼 한 줄에 배치할 수 있습니다.

읽었다면, 이제 직접 답해볼 차례예요

패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.