소개
활기찬 도시 펫빌 (Petville) 에서 웹 개발자인 조던은 "Pet's House" 웹사이트를 재설계하는 임무를 맡았습니다.
이 랩은 애완동물 소유자를 위한 반응형 (responsive) 하고 시각적으로 매력적인 레이아웃을 만듭니다. 웹사이트는 서비스, 회사 소개, 연락처 정보를 다양한 기기에서 효과적으로 보여주어야 합니다. 조던은 강력한 레이아웃 기능을 위해 Flexbox 를 사용하기로 결정했습니다.
Flexbox 기본 및 Display 속성
Flexbox 를 시작하려면 기본 개념을 이해해야 합니다.
자신이 인테리어 디자이너이고, 웹 페이지가 크고 텅 빈 방이라고 상상해 보세요. 여러분의 임무는 이 방을 아늑하고 미적으로 보기 좋게 만드는 것입니다. Flexbox 는 여러분의 마법 지팡이로, 가구 (즉, 웹 페이지 요소) 를 쉽게 배치할 수 있도록 도와줍니다. 소파 (주요 콘텐츠) 든 커피 테이블 (지원 정보) 이든, Flexbox 를 사용하면 모든 것을 완벽하게 배치할 수 있습니다.
Flexbox 를 실제로 사용하기 전에 몇 가지 기본적인 개념을 빠르게 살펴보겠습니다.
- Flex 컨테이너 (Flex Container): 다양한 가구를 배치할 방이라고 생각하십시오.
- Flex 아이템 (Flex Items): 이것들은 소파, 의자, 커피 테이블과 같은 가구입니다.
Flexbox 를 사용하려면 먼저 Flex 컨테이너를 선언해야 합니다. "자, 이 방을 꾸며보자"라고 말하는 것과 같습니다.
.container {
display: flex;
}이렇게 하면 .container 클래스의 모든 직접적인 자식 요소가 Flex 아이템이 되어 Flexbox 의 레이아웃 규칙을 따릅니다.
display CSS 속성은 요소가 블록 또는 인라인 박스로 처리되는지 여부와 흐름 레이아웃, 그리드 또는 플렉스와 같은 자식 요소에 사용되는 레이아웃을 설정합니다.
예를 들어, 인라인 요소가 배치되는 방식을 변경하기 위해 display 속성을 사용할 수 있습니다.
display: block은 요소에 자체 공간을 제공하는 반면, display: inline-block은 더 유연한 레이아웃을 허용하여 요소가 서로 옆에 위치하면서도 치수를 제어할 수 있도록 합니다.
이제 display 가 어떻게 사용되는지 알았으므로, style.css에 다음을 추가할 수 있습니다.
.navigation li {
display: inline-block;
}
.navigation li a {
text-decoration: none;
color: black;
padding: 10px;
display: block;
}
form .form-content {
display: block;
padding: 0.8em 0;
}Main Axis 와 Cross Axis
Flexbox 영역에서 두 가지 개념이 중요합니다: **메인 축 (main axis)**과 교차 축 (cross axis). 기본적으로 메인 축은 수평이고 교차 축은 수직이지만, 이는 flex-direction 속성을 사용하여 조정할 수 있습니다.
- 수평 메인 축:
flex-direction: row;(기본값) - 수직 메인 축:
flex-direction: column;
예를 들어:
Flex 아이템
이제 가구 (Flex 아이템) 를 배치하는 방법에 대해 이야기해 보겠습니다.
justify-content: 이 속성은 Flex 아이템이 메인 축을 따라 어떻게 분배되는지 제어합니다. 소파와 의자 사이의 거리를 조절하여 너무 멀리 떨어져 있거나 너무 가깝지 않도록 하는 것을 상상해 보세요.align-items: 이 속성은 Flex 아이템이 교차 축을 따라 어떻게 정렬되는지 결정합니다. 모든 그림이 같은 높이에 걸려 방이 깔끔해 보이도록 하는 것과 같습니다.flex-grow: 책장이 나머지 공간의 전부 또는 일부를 차지하도록 하려는 경우를 상상해 보세요. 이 속성을 사용하면 여분의 공간을 채우기 위해 가구 (아이템) 를 "확장"할 수 있습니다.
컨테이너와 세 개의 아이템으로 구성된 간단한 레이아웃으로 Flexbox 의 마법을 살펴보겠습니다. 우리가 원하는 것은 이 세 개의 아이템을 컨테이너 내에서 수평으로 중앙에 배치하고 충분한 공간이 있을 때 균등하게 분배하는 것입니다.
이 설정을 사용하면 가구 (아이템) 가 우리가 원하는 대로 배치됩니다.
Flexbox 는 정말 마법과 같아서, 전례 없는 유연성과 쉬움으로 웹 페이지를 정렬할 수 있게 해줍니다. 이제 이 마법을 마스터했으니, 시도해 보세요! 꿈에 그리던 "방"을 만들어 보세요!
Flexbox 의 마법을 생생하게 보여주기 위해, Flexbox 레이아웃이 있는 방을 보여주는 그림을 생성할 것입니다. 여기에는 다양한 Flex 아이템을 나타내는 가구 조각 (소파, 커피 테이블, 책장 등) 이 포함됩니다. 이는 justify-content 및 align-items와 같은 Flexbox 속성을 사용하여 방에서 어떻게 우아하게 배치되는지 보여줍니다.
요약하면, Flexbox 는 아이템을 수평 또는 수직으로 쉽게 정렬할 수 있게 해주는 1 차원 레이아웃 모델이며, 반응형 디자인을 만드는 데 완벽합니다. 알아야 할 몇 가지 주요 용어는 다음과 같습니다.
- Flex 컨테이너 (Flex container): Flex 아이템을 포함하는 부모 요소입니다.
- Flex 아이템 (Flex item): Flex 컨테이너 내의 개별 요소입니다.
- Flex direction: 컨테이너의 메인 축을 결정합니다.
- Flex wrap: 아이템이 여러 줄로 래핑될지 여부를 제어합니다.
- Justify content: 메인 축을 따라 아이템을 정렬합니다.
- Align items: 교차 축을 따라 아이템을 정렬합니다.
이제 Flexbox 를 사용하는 방법을 알았으므로, style.css에 다음을 추가할 수 있습니다.
body {
display: flex;
flex-direction: column;
letter-spacing: 2px;
font-weight: 400;
font-size: 1.2vw;
}
header {
display: flex;
flex-direction: row;
background-color: rgb(233, 174, 87);
width: 100%;
max-height: max-content;
min-height: 1em;
padding-top: 1%;
padding-bottom: 1%;
text-transform: uppercase;
}
ul {
list-style: none;
display: flex;
flex-direction: row;
}
.navigation-section {
width: 70%;
}
section {
display: flex;
flex-direction: row;
width: 100%;
padding: 10% 0;
}
.story-sect {
display: flex;
flex-direction: row-reverse;
background-color: rgb(233, 174, 87);
color: #fff;
}
.samples {
flex-direction: column;
text-align: center;
}
footer {
display: flex;
flex-direction: row-reverse;
height: 5em;
width: 100%;
color: #fff;
background-color: rgb(239, 206, 157);
text-transform: uppercase;
}요약
이 랩에서 Jordan 은 Flexbox 를 "Pet's House" 웹사이트에 성공적으로 적용하여 레이아웃의 반응성과 미적 감각을 향상시켰습니다. 헤더, 탐색 및 주요 섹션에 중점을 둔 단계를 통해 웹사이트는 이제 다양한 장치에서 콘텐츠를 효율적으로 표시합니다. Flexbox 는 동적이고 유연한 레이아웃을 만드는 데 매우 유용한 도구임이 입증되었으며, 현대 웹 디자인에서 그 중요성을 보여줍니다.
