Flexbox로 프로필 배치하기

이번에 만들 배치

지금까지 자기소개 페이지의 색상과 글꼴, 영역의 간격을 정리했습니다. 이번에는 기존 소개 영역의 스타일을 유지하면서 프로필 이미지와 소개 글을 나란히 놓겠습니다.

Flexbox는 한 방향으로 요소를 배치하고 정렬할 때 사용하는 CSS 기능입니다. 배치를 담당하는 부모 요소를 Flex 컨테이너, 그 안의 직계 자식 요소를 Flex 아이템이라고 합니다.

기존 소개 영역 확인하기

저장해 둔 자기소개 HTML에서 기존 소개 영역을 찾으세요. 영역에 이미 intro 클래스가 있다면 지우지 말고, 같은 요소에 배치용 클래스 profile을 공백으로 구분해 추가합니다. 하나의 요소에는 여러 클래스를 지정할 수 있습니다.

이미지와 소개 글이 그 영역의 직계 자식이 되도록 구성하세요. 예를 들면 다음과 같습니다.

<section class="intro profile">
  <img class="profile-image" src="profile.jpg" alt="나의 프로필 사진">
  <div class="profile-text">
    <h2>안녕하세요!</h2>
    <p>저는 웹페이지를 만드는 것을 배우고 있습니다.</p>
  </div>
</section>

이 예시는 구조를 보여 주기 위한 것입니다. 기존 페이지의 소개 내용과 이미지 경로는 그대로 사용하세요. intro 클래스도 유지해야 이전 강의에서 작성한 .intro 규칙이 계속 적용됩니다. 기존에 소개 글을 감싸는 요소가 없다면 제목과 문단을 div로 함께 감싸세요.

여기서 section의 직계 자식은 img와 div입니다. h2와 p는 div 안에 있으므로 section의 직계 자식은 아닙니다. 따라서 소개 영역을 Flex 컨테이너로 만들면 이미지와 소개 글 묶음이 각각 하나의 Flex 아이템이 됩니다.

src에는 실제 이미지 파일의 경로를 사용하세요. alt에는 이미지를 볼 수 없을 때도 내용을 이해할 수 있도록 사진에 맞는 설명을 적습니다.

가로로 배치하기

기존 HTML에 연결한 CSS 파일에 다음 규칙을 추가하세요. 기존 .intro 규칙은 그대로 둡니다.

.profile {
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile-image {
  width: 160px;
  height: auto;
}

display: flex는 .profile을 Flex 컨테이너로 만듭니다. 기본 배치 방향은 row이므로 직계 자식인 이미지와 소개 글 묶음이 가로로 놓입니다. align-items: center는 이 가로 배치에서 두 아이템을 세로 방향의 가운데에 맞춥니다. gap: 24px은 두 아이템 사이에 간격을 만듭니다.

이미지의 width는 배치에서 사용할 너비를 정하고, height: auto는 이미지의 가로세로 비율을 유지하도록 합니다. 공간이 부족하면 Flex 아이템은 기본적으로 줄어들 수 있습니다.

기존 .intro 규칙에 배경색이나 안쪽 여백이 있다면 새 배치에도 계속 적용됩니다. 다만 기존 규칙과 새 규칙이 같은 속성을 지정하면 CSS의 우선순위에 따라 적용되는 값이 결정됩니다. 특히 기존에 이미지 크기나 display, gap을 지정했다면 함께 확인하고 원하는 값으로 정리하세요.

파일을 저장한 뒤 브라우저에서 페이지를 새로고침하세요. 화면이 충분히 넓을 때 기존 소개 영역의 색상과 여백이 유지되는지, 이미지 옆에 소개 글이 나타나고 두 요소 사이에 간격이 생겼는지 확인합니다. 원하는 대로 보이지 않는다면 HTML의 클래스 이름과 CSS 선택자가 같은지, CSS 파일이 연결되어 있는지 살펴보세요.

정렬 바꿔 보기

다음 값을 하나씩 바꾸고 저장한 뒤, 브라우저에서 차이를 확인해 보세요.

• align-items: center를 align-items: flex-start로 바꾸면 가로로 놓인 아이템들의 위쪽을 기준으로 정렬합니다.
• gap: 24px을 gap: 12px 또는 gap: 40px으로 바꾸면 아이템 사이 간격이 달라집니다.
• .profile에 justify-content: space-between을 추가하면 가로 방향에 남는 공간을 아이템 사이에 배분합니다. 컨테이너에 남는 공간이 있을 때 변화를 살펴보세요.

가로 배치에서 justify-content는 가로 방향, align-items는 세로 방향의 정렬을 담당합니다. 방향을 나중에 세로로 바꾸면 이 관계도 함께 바뀝니다. 실험 후에는 자기소개 페이지에 어울리는 값으로 정리하세요.

직접 연습하기

1. 기존 소개 영역의 intro 클래스를 유지하고 같은 요소에 profile 클래스를 추가하세요.
2. 프로필 이미지와 소개 글 묶음이 그 영역의 직계 자식인지 확인하세요.
3. display: flex를 적용한 뒤 기존 소개 스타일과 가로 배치가 함께 보이는지 확인하세요.
4. align-items와 gap 값을 바꾸어 보며 읽기 편한 위치와 간격을 고르세요.
5. 브라우저 창을 좁혀 배치가 어떻게 달라지는지 관찰하세요.

이번 강의에서는 충분히 넓은 화면의 가로 배치를 만듭니다. 좁은 화면에서 프로필을 세로로 전환하고 이미지와 콘텐츠 너비를 조절하는 방법은 다음 강의에서 다룹니다.

이번 강의의 전체 파일

앞 강의의 파일이 없다면 아래 파일로 시작해도 됩니다. 6강 전체 예제 내려받기에서 04 폴더를 열면 이 단계의 파일을 확인할 수 있습니다. 프로필 일러스트는 함께 들어 있는 profile.svg를 사용합니다. 내 사진으로 바꿔도 됩니다.

완성 화면 열기 · CSS 파일 보기

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>지민의 자기소개</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <header>
      <h1>안녕하세요, 지민입니다</h1>
      <p>작은 웹페이지를 만들며 배우는 기록입니다.</p>
    </header>
    <section class="intro profile">
      <img class="profile-image" src="profile.svg" width="240" height="240" alt="지민의 프로필을 나타내는 예제 일러스트">
      <div class="profile-text">
      <h2>저를 소개합니다</h2>
      <p>저는 웹페이지를 만드는 것을 배우고 있습니다.</p>
      <p>오늘의 목표는 CSS로 읽기 좋은 자기소개 페이지를 완성하는 것입니다.</p>
      </div>
    </section>
    <section class="interests">
      <h2>관심사</h2>
      <ul>
        <li>웹 만들기</li>
        <li>산책과 사진</li>
        <li>배운 내용을 짧게 기록하기</li>
      </ul>
    </section>
    <footer id="contact">
      <a href="mailto:hello@example.com">연락하기</a>
      <p>예제용 주소입니다. 내 페이지에서는 실제 연락 방법으로 바꾸세요.</p>
    </footer>
  </main>
</body>
</html>

body {
  background-color: #f5f7fa;
  color: #1f2937;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  color: #173b6c;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  color: #173b6c;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.intro {
  background-color: lightyellow;
}

.intro, .interests {
  padding: 24px;
  border: 1px solid #b8c5d6;
  margin-bottom: 24px;
}

.profile {
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile-image {
  width: 160px;
  height: auto;
}

실행으로 본 결과

프로필 이미지와 소개 글이 가로로 놓입니다. 좁은 화면 처리는 다음 강의에서 다룹니다.