HTML 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 프레젠테이션 특성으로서, 지금은 CSS display 속성이 이를 결정합니다.
인라인 레벨 콘텐츠
CSS에서, 인라인 레이아웃에 참여하는 콘텐츠를 인라인 수준 콘텐츠라고 합니다. 대부분의 텍스트 시퀀스, 교체된 요소 및 생성된 콘텐츠는 기본적으로 인라인 수준입니다.
인라인 레이아웃에서, 텍스트의 혼합 스트림, 대체된 요소 및 기타 인라인 상자는 줄 상자 스택으로 조각화하여 배치됩니다. 각 줄 상자 내에서, 인라인 수준의 상자는 쓰기 모드에 따라 수직 또는 수평으로 정렬됩니다. 일반적으로 텍스트의 기준선에 따라 정렬되며, 이는 CSS로 변경할 수 있습니다.
예제
<p>
This span is an <span class="highlight">inline-level element</span>; its
background has been colored to display both the beginning and end of the
element's influence. Input elements, like <input type="radio" /> and
<input type="checkbox" />, are also inline-level content.
</p>
body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color: #ee3;
}
이 예제에서, <p> 요소에는 일부 텍스트가 포함되어 있습니다. 해당 텍스트 내에는 인라인 수준 요소인 <span> 요소와 <input> 요소가 있습니다. <span>이 두 줄에 걸쳐 있으면, 두 줄 상자가 생성됩니다. 이러한 요소는 인라인이기 때문에, 단락이 끊어지지 않은 텍스트 흐름의 단일 단락으로 렌더링됩니다.
블록 레벨 콘텐츠
CSS에서, 블록 레이아웃에 속하는 콘텐츠를 블록 레벨 콘텐츠라고 합니다.
블록 레이아웃에서, 상자는 둘러싸는 블록의 맨 위에서 시작하여 수직으로 차례로 배치됩니다. 각 상자의 왼쪽 바깥쪽 가장자리는 둘러싸는 블록의 왼쪽 가장자리에 닿게 됩니다. 블록 수준 요소는 항상 새로운 줄에서 시작합니다. 영어나 아랍어 같은 수평 쓰기 모드에서는, 상위 요소(컨테이너)의 전체 가로 공간과 내용의 높이와 같은 세로 공간을 가지게 되어 "블록"을 만듭니다.
기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다.
둘러싸는 블록의
writing-mode가 기본값 이외의 값으로 설정되면, 위의 블록 레이아웃 동작이 변경됩니다.
예제
<div>
<p>
이 문단은 블록 레벨 요소입니다. 부모 요소와 구분할 수 있도록 배경 색을
입혔습니다.
</p>
<p>이 문단은 두 번째 단락입니다.</p>
</div>
p {
background-color: #8abb55;
}
단락(<p>) 요소는 기본적으로 블록 레벨 요소이기 때문에, 블록 레이아웃으로 표시됩니다. 이 예제에선, 두 개의 단락 요소가 <div> 안에 배치됩니다.
같이 보기
원문: MDN Web Docs — 인라인 레벨 콘텐츠, 블록 레벨 콘텐츠 — CC BY-SA 2.5