본문으로 건너뛰기
실습하기

Flex 활용 자기소개 Section 만들기

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


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
.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)을 만듭니다.


bio-item 클래스​

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

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

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

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!