컨테이너란?

CSS에서 컨테이너(Container) 라는 용어는 웹페이지의 레이아웃을 구성하기 위해 사용되는 요소를 지칭합니다.

컨테이`는 콘텐츠를 감싸고, 정렬하며, 그룹화하는 역할을 합니다.

웹페이지의 디자인과 구조를 관리하는 데 컨테이너를 사용할 수 있습니다.

그러므로 컨테이너는 웹페이지를 깔끔하고 구조적으로 유지하는 데 도움이 되는 중요한 역할을 합니다.

컨테이너를 만들기 위해 주로 <div> 태그를 사용하지만, 의미를 가진 태그를 사용하는 것이 더 바람직합니다.

의미를 가진 태그의 예시로는 <header>, <main>, <footer> 등이 있습니다.

의미를 가진 태그를 사용하면 코드를 볼 때 웹페이지의 구조를 한눈에 파악할 수 있습니다.

다른 사람이 코드를 읽을 때도 명확하게 이해할 수 있습니다.

이렇게 의미를 가진 태그는 시멘틱 태그(Semantic Tag) 라고 부릅니다.

컨테이너 요소 만들기

컨테이너 요소 만들기
<nav class="navbar">
  <div class="container"></div>
</nav>

먼저 <nav> 태그를 사용하여 네비게이션 영역을 정의합니다. 그리고 <div> 태그와 container라는 클래스를 사용하여 컨테이너를 만듭니다.

이때, <nav> 태그와 <div> 태그는 둘 다 컨테이너 역할을 하지만, 그 역할에는 약간의 차이가 있습니다.

각각의 태그를 사용한 이유를 다음 가이드에서 스타일링을 하면서 더 자세히 살펴보겠습니다.