lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webLightPracticeChapter2Title

webLightPracticeChapter1Title

lesson13Title

lesson14Title

webLightPracticeChapter3Title

webLightPracticeChapter4Title

webLightPracticeChapter5Title

webLightPracticeChapter6Title

# Flex 활용 자기소개 Section 만들기

웹사이트 내 자기소개 Section을 아래와 같이 구성했습니다.

<br/>

```html title="HTML"
<div class="bio-container">
  <div class="bio-item">
    <h4>생년월일</h4>
    <p class="bio-text">2000.01.01</p>
  </div>

  <div class="bio-item">
    <h4>MBTI</h4>
    <p class="bio-text">ENTJ</p>
  </div>

  <div class="bio-item">
    <h4>사는 곳</h4>
    <p class="bio-text">서울</p>
  </div>
</div>
```

```css title="CSS"
.bio-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 24px;
  gap: 16px;
}

.bio-item {
  text-align: center;
  width: 80px;
}

.bio-text {
  color: grey;
  margin-top: 8px;
}
```

## bio-container 클래스

가장 바깥쪽 div에 `bio-container` 클래스를 사용했습니다.

`bio-container`의 `display: flex;`는 바깥 상자를 flex 컨테이너(Container)로 만들고, 컨테이너 내 아이템(Item)들을 가로로 정렬합니다.

`justify-content: space-around;`는 이 항목들 사이에 균일한 간격을 둔다는 의미이며, `align-items: center;`는 각 항목들을 상자의 중앙에 위치시킵니다.

`flex-wrap: wrap;`는 상자의 가로 길이를 넘어서는 항목들을 다음 줄로 넘기도록 설정하고, `padding-top: 24px;`는 상자의 위쪽에 24px의 여백을 만듭니다.

마지막으로, `gap: 16px;`는 각 항목들 사이에 16px의 간격(gap)을 만듭니다.


<br/>

## bio-item 클래스

바깥 컨테이너 안에는 세 개의 div 상자들이 있고, 각 아이템에 `bio-item`라는 클래스를 사용합니다.

이 상자들은 flex의 아이템들입니다. 여기서 `text-align: center;`는 항목의 텍스트를 중앙 정렬하고, `width: 80px;`는 상자의 가로 길이를 80px로 지정합니다.

flex 아이템 내 p 태그에는 `bio-text` 클래스를 사용해 폰트 색상을 회색(grey)으로 바꾸고, 위쪽 바깥 여백(margin-top)을 8px로 설정했습니다.