반응형 웹 디자인 | Gulp.js 웹사이트 튜토리얼

소개

이 프로젝트에서는 공식 Gulp.js 웹사이트와 유사한 반응형 레이아웃을 웹사이트에 구현하는 방법을 배우게 됩니다. 미디어 쿼리를 사용하여 화면 크기에 따라 웹 페이지의 레이아웃과 스타일을 조정합니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

반응형 레이아웃을 만들기 위해 HTML 파일에 미디어 쿼리 규칙을 추가하는 방법
다양한 화면 크기에 따라 페이지 요소의 너비와 가시성을 조정하는 방법
브라우저 창 크기를 조정하여 반응형 레이아웃을 테스트하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

미디어 쿼리를 사용하여 반응형 웹 디자인을 구현할 수 있습니다.
화면 크기에 따라 레이아웃과 스타일을 조정할 수 있습니다.
다양한 장치 및 화면 해상도에 맞게 웹 페이지를 효과적으로 테스트하고 최적화할 수 있습니다.

프로젝트 설정

이 단계에서는 프로젝트를 설정하고 편집기에서 파일을 엽니다.

다음 파일과 디렉토리가 포함된 프로젝트 폴더를 엽니다:

├── css
├── imgs
├── js
└── index.html

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

이제 아직 반응형이 아닌 Gulp 웹사이트의 정적 페이지를 볼 수 있습니다. 창 크기를 수동으로 변경하면 다음과 같은 효과를 볼 수 있습니다.

✨ 솔루션 확인 및 연습

미디어 쿼리 추가

이 단계에서는 페이지를 반응형으로 만들기 위해 HTML 파일에 미디어 쿼리를 추가하는 방법을 배웁니다.

코드 편집기에서 index.html 파일을 엽니다.
문서의 <head>에서 첫 번째 <style> 섹션을 찾습니다.
<style>의 /* TODO */ 아래에 다음 미디어 쿼리 규칙을 추가합니다:

/* TODO */
@media screen and (max-width: 1400px) {
  nav .content,
  main section {
    width: 900px !important;
  }
}

@media screen and (max-width: 900px) {
  nav .content,
  main section {
    width: 700px !important;
  }
}

@media screen and (max-width: 650px) {
  main section,
  main ul li {
    width: 100% !important;
  }

  nav .content .list {
    display: none;
  }

  nav .content .menu {
    display: block;
    position: absolute;
    right: 10px;
  }

  main ul li:nth-child(even) {
    margin-left: 0 !important;
  }
}

이러한 미디어 쿼리는 화면 너비를 기반으로 페이지에 특정 스타일을 적용합니다. 첫 번째 미디어 쿼리는 화면 너비가 1400px 이하일 때 콘텐츠 및 주요 섹션의 너비를 900px 로 설정합니다. 두 번째 미디어 쿼리는 화면 너비가 900px 이하일 때 너비를 700px 로 설정합니다. 세 번째 미디어 쿼리는 화면 너비가 650px 이하일 때 탐색 목록을 숨기고, 메뉴 아이콘을 표시하며, 주요 섹션 및 목록 항목의 너비를 100% 로 설정합니다.

✨ 솔루션 확인 및 연습