화면 크기에 맞춰 배치 바꾸기

지난 강의에서는 프로필 이미지와 소개 글을 Flexbox로 나란히 배치했습니다. 이번에는 화면이 좁아지면 두 요소를 세로로 쌓고, 이미지와 페이지가 화면 밖으로 밀려나지 않도록 조정합니다.

모바일 화면을 위한 뷰포트 설정

뷰포트는 웹페이지가 표시되는 화면 영역입니다. 모바일 브라우저에서는 뷰포트를 설정하지 않으면 페이지를 넓은 화면용으로 표시한 뒤 축소할 수 있습니다. 그러면 글자가 작아지고 화면 너비에 따른 배치도 의도와 다르게 보일 수 있습니다.

HTML 파일의 <head> 안에 다음 코드가 있는지 확인하고, 없다면 추가하세요.

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width는 뷰포트 너비를 기기 화면의 너비에 맞추고, initial-scale=1은 페이지를 처음 표시할 때의 배율을 1로 설정합니다.

페이지와 이미지의 너비 조절하기

아래 예제는 페이지의 주요 내용을 main으로 감싸고, 프로필 영역에 profile 클래스를 사용한다고 가정합니다. 기존 HTML에서 다른 요소나 클래스 이름을 썼다면 선택자를 자신의 코드에 맞게 바꾸세요.

<main>
  <section class="profile">
    <img src="profile.jpg" alt="나의 프로필 사진">
    <div class="profile-text">
      <h1>안녕하세요, 저는 지민입니다</h1>
      <p>웹을 배우며 작은 페이지를 만들고 있습니다.</p>
    </div>
  </section>
  <!-- 기존 관심사와 연락처 영역 -->
</main>

이미지 경로와 대체 텍스트는 실제 이미지에 맞게 바꾸세요. 기존 페이지에 이미지와 소개 글을 감싼 요소가 있다면 새로 만들지 않고 그 요소를 사용하면 됩니다.

기존 CSS에 다음 규칙을 추가하거나 같은 선택자의 규칙을 수정하세요.

* {
  box-sizing: border-box;
}
main {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 24px;
}
.profile {
display: flex;
align-items: center;
gap: 24px;
}
.profile img {
width: 200px;
max-width: 100%;
height: auto;
}
.profile-text {
min-width: 0;
}

main은 화면이 넓어져도 최대 960px까지만 넓어지고, margin: 0 auto로 가운데 놓입니다. box-sizing: border-box는 지정한 너비에 안쪽 여백과 테두리를 포함하므로 좁은 화면에서 너비를 계산하기 쉽습니다.

이미지는 기본적으로 200px 너비를 사용하되 부모보다 커지지 않습니다. height: auto는 너비가 바뀔 때 이미지의 원래 가로세로 비율을 유지합니다. min-width: 0은 Flex 항목인 소개 글이 필요할 때 줄어들 수 있도록 합니다. 다만 띄어쓰기 없는 긴 주소나 단어는 여전히 넘칠 수 있으므로 필요한 곳에 overflow-wrap: anywhere;를 추가할 수 있습니다.

좁은 화면에서 세로로 전환하기

미디어 쿼리는 화면 너비처럼 조건이 맞을 때만 CSS 규칙을 적용합니다. 기존 프로필 스타일 뒤에 다음 코드를 추가하세요.

@media (max-width: 600px) {
  main {
    padding: 16px;
  }
.profile {
flex-direction: column;
align-items: flex-start;
}
}

뷰포트 너비가 600px 이하이면 프로필의 주축이 가로에서 세로로 바뀝니다. align-items: flex-start는 세로로 쌓인 항목을 왼쪽에 맞춥니다. 기존 gap은 항목 사이의 세로 간격으로 적용됩니다. 600px은 이 예제의 기준이므로 자신의 콘텐츠가 답답해지는 너비에 맞춰 조정해도 됩니다.

직접 확인하고 연습하기

1. HTML과 CSS 파일을 저장하고 브라우저에서 페이지를 새로고침하세요. 넓은 창에서 이미지와 소개 글이 나란히 표시되는지 확인합니다.
2. 브라우저 창을 좁히거나 개발자 도구의 기기 화면 모드를 사용해 너비를 600px보다 작게 바꿉니다. 프로필이 세로로 바뀌고 이미지가 잘 보이는지 확인합니다.
3. 너비를 600px 안팎으로 바꾸며 배치가 전환되는 지점을 살펴봅니다. 글이 답답하거나 공간이 지나치게 남으면 미디어 쿼리의 기준 너비를 조정해 보세요.
4. 좁은 화면에서 가로 스크롤이 생긴다면 개발자 도구로 튀어나온 요소를 찾아봅니다. 고정 너비나 긴 주소가 원인인지 살펴보고 필요한 규칙을 수정하세요.

다음 강의에서는 여러 화면에서 간격, 색상 대비, 이미지와 링크까지 점검해 페이지를 마무리합니다.

이번 강의의 전체 파일

앞 강의의 파일이 없다면 아래 파일로 시작해도 됩니다. 6강 전체 예제 내려받기에서 05 폴더를 열면 이 단계의 파일을 확인할 수 있습니다. 프로필 일러스트는 함께 들어 있는 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;
}

* {
  box-sizing: border-box;
}

main {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

.profile img {
  width: 200px;
  max-width: 100%;
  height: auto;
}

.profile-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  main {
    padding: 16px;
  }

  .profile {
    flex-direction: column;
    align-items: flex-start;
  }
}

실행으로 본 결과

960px에서는 프로필이 가로로, 390px에서는 세로로 배치됩니다.