블록과 인라인

개념 이해하기

블록 요소는 보통 새 줄에서 시작해 가능한 가로 공간을 차지하고, 인라인 요소는 문장 흐름 안에서 내용만큼 자리 잡습니다. CSS display로 표현을 바꿀 수 있지만 HTML 요소의 의미 자체는 유지됩니다.

예제에서는 <div>블록</div><span>인라인</span> 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.

먼저 현재 결과를 확인한 뒤 span에 display:block을 적용하고 배치 변화를 확인하세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.