컨테이너는 블록 요소와 인라인 요소를 포함하는 상위 개념입니다. 컨테이너는 다른 요소나 콘텐츠를 포함하고 배치하는 역할을 합니다. 여기서 컨테이너는 주로 블록 레벨 요소로 구성되며, 이러한 블록 레벨 요소는 특정 영역을 차지하고 수직으로 쌓이는 특성을 가집니다.
일반적으로 웹 페이지의 구조는 컨테이너와 그 내부에 있는 블록 요소로 구성됩니다. 예를 들어, div 요소는 주로 컨테이너로 사용되며, p, h1, ul, li와 같은 요소들은 주로 블록 레벨 요소로 사용됩니다.
인라인 요소는 블록 요소 내에 삽입되며, 블록 요소 내의 텍스트나 다른 인라인 요소와 같이 가로로 나란히 배치됩니다. 컨테이너와 블록 레벨 요소가 웹 페이지의 구조를 형성하고 레이아웃을 제어하는 데 주요한 역할을 하며, 인라인 요소는 그 내부의 내용을 보다 세부적으로 다루는 데 사용됩니다.
따라서 웹 페이지의 구조와 레이아웃을 이해하려면 컨테이너와 블록 레벨 요소, 그리고 인라인 요소의 개념을 이해하는 것이 중요합니다.
예시 : flex와 text-align의 각 역활
flex 속성은 주로 요소의 배치와 정렬을 다루는 데 사용되며, text-align 속성은 텍스트를 가로 방향으로 정렬하는 데 사용되는 CSS 속성입니다. text-align 속성은 주로 블록 레벨 요소 내부의 인라인 레벨 요소(텍스트 등)를 정렬하는 데 적용됩니다.
text-align 속성은 블록 레벨 요소에 적용되며, 블록 레벨 요소 내의 텍스트 컨텐츠를 어떻게 정렬할지를 결정합니다. 반면에 flex 속성은 컨테이너와 그 안의 아이템 간의 레이아웃을 조정하는 데 사용되는 속성이며, 주로 아이템 간의 가로 및 세로 정렬과 간격을 다룹니다.
따라서 flex 컨테이너 내부의 텍스트를 가로로 정렬하려면 해당 텍스트를 감싸는 요소에 text-align: center;와 같은 스타일을 적용해야 합니다. 예를 들어:
