블록 요소와 인라인 요소의 기본 배치 차이를 이해합니다.
블록 요소는 보통 새 줄에서 시작해 가능한 가로 공간을 차지하고, 인라인 요소는 문장 흐름 안에서 내용만큼 자리 잡습니다. CSS display로 표현을 바꿀 수 있지만 HTML 요소의 의미 자체는 유지됩니다.
연한 초록 배경은 div.block이 가로 공간을 끝까지 차지한다는 것을 눈으로 보여 줍니다. 글은 짧아도 배경이 카드 오른쪽 끝까지 이어집니다. 반대로 p 안의 span과 a는 문장 사이에 끼어 글자만큼만 자리를 잡고, span은 초록 굵은 글씨로 바뀌었을 뿐 줄을 끊지 않습니다.
인라인 상자에 준 width와 height는 무시되고, 위아래 margin도 앞뒤 줄을 밀어내지 않습니다. 크기를 주면서 문장 흐름 안에 두고 싶다면 display: inline-block을 씁니다. 이 상자는 바깥으로는 인라인처럼 줄 안에 놓이고 안쪽은 블록처럼 크기와 여백을 받습니다.
블록/인라인은 의미가 아니라 기본 표시 방식입니다. 태그 선택은 먼저 콘텐츠 의미를 기준으로 하세요.
직접 바꿔보세요span에 display:block을 적용하고 배치 변화를 확인하세요.