[웹 개발 기초] 9화: 미디어 쿼리로 모바일 반응형 웹 만들기

작성자:

안녕하세요, 여러분! 벌써 9화까지 함께해 주셔서 진심으로 감사드립니다.

최근에는 PC보다 스마트폰으로 웹사이트를 방문하시는 분들이 훨씬 더 많아졌습니다. 그래서 화면 크기에 따라 레이아웃이 유연하게 바뀌는 반응형 웹(Responsive Web)은 이제 선택이 아닌 필수적인 기술이 되었답니다.

이번 화에서는 CSS의 강력한 기능 중 하나인 미디어 쿼리(@media)를 활용하여, 모바일 환경에서도 아름답게 보이는 웹 페이지를 만드는 방법을 함께 살펴보도록 하겠습니다.

1. 미디어 쿼리 기본 문법

미디어 쿼리는 화면 너비가 특정 값 이하일 때에만 별도의 스타일을 적용할 수 있도록 해주는 CSS 문법입니다. 일반적으로 태블릿과 모바일을 구분하는 기준점으로 768px을 많이 사용합니다.

한 가지 중요한 팁을 드리자면, 미디어 쿼리는 style.css 파일의 맨 아래쪽에 작성하시는 것이 좋습니다. 이렇게 하면 코드의 흐름이 자연스럽고 나중에 유지보수하실 때도 훨씬 편리하답니다.

/* style.css 맨 하단 */

/* 화면 너비가 768px 이하일 때(모바일) 적용될 스타일 */
@media (max-width: 768px) {
  /* 이 안에 작성된 CSS는 모바일에서만 작동합니다. */
}

2. About 섹션 레이아웃 변경

PC 화면에서는 프로필 사진과 소개글이 가로로 나란히(flex-direction: row) 배치되어 있었는데요, 화면이 좁아지는 모바일 환경에서는 세로로 차곡차곡 쌓이는(column) 배치가 훨씬 보기 좋고 자연스러운 느낌을 줍니다.

아래 코드를 style.css 파일의 맨 아래에 추가해 주시면 됩니다.

@media (max-width: 768px) {
  .about-wrapper {
    /* 가로 배치 -> 세로 배치로 변경 */
    flex-direction: column;
    text-align: center; /* 텍스트 가운데 정렬 */
  }

  .profile-img {
    /* 모바일에서는 이미지 크기를 조금 줄입니다. */
    width: 200px;
    height: 200px;

    /* 그림자 크기도 함께 조정해 줍니다. */
    box-shadow: 10px 10px 0px var(--secondary);
  }

  .about-desc {
    width: 100%; /* 너비가 화면에 꽉 차도록 설정합니다. */
  }

  .skills-container {
    justify-content: center; /* 스킬 태그들도 가운데 정렬해 줍니다. */
  }
}

3. Projects 섹션 레이아웃 변경

프로젝트 카드들은 auto-fit을 사용하고 있지만, 모바일의 좁은 화면에서는 카드가 충분히 줄어들지 않아 레이아웃이 깨질 수 있습니다. 모바일에서는 카드가 한 줄에 하나씩 세로로 쌓이도록 명시적으로 지정해 주는 것이 훨씬 안정적입니다.

@media (max-width: 768px) {
  .project-grid {
    /* 모바일에서는 한 열로 카드를 표시합니다. */
    grid-template-columns: 1fr;
  }
}
미디어 쿼리 project 단

4. 폰트 크기 및 여백 조정

모바일 화면에서 제목 글씨가 너무 크면 다소 답답하게 느껴질 수 있습니다. 전체적인 여백과 폰트 크기를 적절히 줄여주면 훨씬 깔끔하고 편안한 인상을 줄 수 있으니, 아래 스타일도 함께 추가해 보시길 권장드립니다.

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem; /* 4rem -> 2.5rem으로 축소 */
  }

  nav {
    padding: 15px 20px; /* 네비게이션 상하 여백 축소 */
  }

  .section {
    padding: 60px 20px; /* 섹션 상하 여백 축소 */
  }
}

마무리

오늘도 정말 수고 많으셨습니다! 이제 브라우저 창의 너비를 천천히 좁혀보시거나, 개발자 도구(F12)의 모바일 모드로 직접 확인해 보세요. 모든 섹션의 레이아웃이 아주 자연스럽게 변화하는 모습을 직접 눈으로 확인하실 수 있을 거예요.

다음 화는 드디어 대망의 마지막 화입니다! JavaScript를 활용하여 스크롤에 따라 네비게이션 바의 스타일이 우아하게 변화하는 인터랙티브한 효과를 구현하며 시리즈를 멋지게 마무리할 예정입니다. 끝까지 함께해 주셔서 정말 감사드리며, 다음 화에서 또 뵙겠습니다!리즈를 멋지게 마무리할 예정입니다. 끝까지 함께해 주셔서 정말 감사드리며, 다음 화에서 또 뵙겠습니다!

참고 링크

mdn 미디어 쿼리 초보자 안내서