Guidelines
Practice
실습 템플릿 Flexbox 레이아웃
실습 템플릿에 flex
레이아웃이 어떻게 사용되었을까요?
.header-container
.header-container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 128px; padding: 24px; }
-
display: flex;
: 요소를 flex 컨테이너로 만듭니다. 해당 컨테이너의 자식 요소들은 자동으로 flex 아이템이 됩니다. -
flex-direction: column;
: flex 아이템들이 세로 방향으로 배열됩니다. -
align-items: center;
: flex 아이템들을 가로 방향(횡축)으로 가운데 정렬합니다. -
justify-content: center;
: flex 아이템들을 세로 방향(종축)으로 가운데 정렬합니다.
.navbar .container
.navbar .container { display: flex; align-items: center; justify-content: space-between; z-index: 10; height: 60px; width: 100%; }
-
align-items: center;
: flex 아이템들을 가로 방향(횡축)으로 가운데 정렬합니다. -
justify-content: space-between;
: 첫 번째와 마지막 아이템을 컨테이너의 양 끝에 배치하고, 나머지 아이템 사이에 동일한 공간을 배분합니다.
.navbar .nav-menu
.navbar .nav-menu { display: flex; align-items: center; background: white; }
- 여기서도 flex 컨테이너를 사용하여 아이템들을 한 줄에 나란히 배열하고, 가로 방향(횡축)으로 가운데 정렬하도록 설정했습니다.
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help