Container
Container
출처: 문서
본문
페이지의 기본 구조를 잡아주는 컨테이너 컴포넌트예요. 레이아웃의 뼈대를 만들 때 쓰는 다섯 가지 컴포넌트를 함께 확인해 볼게요.
<el-container>: 전체를 감싸는 래퍼 컨테이너예요. 안에<el-header>또는<el-footer>가 중첩되어 있으면 자식 요소들이 세로로 배치되고, 그렇지 않으면 가로로 배치돼요.<el-header>: 헤더 영역을 담는 컨테이너예요.<el-aside>: 사이드 영역(보통 사이드 내비게이션)을 담는 컨테이너예요.<el-main>: 메인 영역을 담는 컨테이너예요.<el-footer>: 푸터 영역을 담는 컨테이너예요.
TIP
이 컴포넌트들은 레이아웃을 위해 flex를 사용해요. 그러니 브라우저가 flex를 지원하는지 먼저 확인해 주세요. 추가로 <el-container>의 직계 자식 요소는 뒤에 나오는 네 컴포넌트 중 하나 이상이어야 하고, 그 네 컴포넌트의 부모 요소는 반드시 <el-container>여야 해요.
공통 레이아웃 (Common layouts)
Header와 Main으로 이루어진 전형적인 레이아웃 예시예요. 이 구조를 바탕으로 페이지의 상단 헤더와 본문 영역을 간단히 구분할 수 있어요.