블록 레벨 콘텐츠

CSS에서, 블록 레이아웃에 속하는 콘텐츠를 블록 레벨 콘텐츠라고 합니다.

블록 레이아웃에서, 상자는 둘러싸는 블록의 맨 위에서 시작하여 수직으로 차례로 배치됩니다. 각 상자의 왼쪽 바깥쪽 가장자리는 둘러싸는 블록의 왼쪽 가장자리에 닿게 됩니다. 블록 수준 요소는 항상 새로운 줄에서 시작합니다. 영어나 아랍어 같은 수평 쓰기 모드에서는, 상위 요소(컨테이너)의 전체 가로 공간과 내용의 높이와 같은 세로 공간을 가지게 되어 "블록"을 만듭니다.

HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서 자세한 설명을 읽을 수 있습니다.

<div>
  <p>
    이 문단은 블록 레벨 요소입니다. 부모 요소와 구분할 수 있도록 배경 색을
    입혔습니다.
  </p>
  <p>이 문단은 두 번째 단락입니다.</p>
</div>

p {
  background-color: #8abb55;
}