반응형 웹 디자인 | 적응형 레이아웃 | 모바일 친화적

소개

이 프로젝트에서는 다양한 화면 크기에 적응하는 반응형 웹 디자인을 만드는 방법을 배우게 됩니다. 목표는 데스크톱 및 모바일 사용자 모두에게 편안한 사용자 경험을 제공하는 웹 페이지를 개발하는 것입니다.

👀 미리보기

반응형 디자인 미리보기

🎯 과제

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

메뉴 및 콘텐츠 섹션의 초기 레이아웃 설정 방법
미디어 쿼리 (media queries) 를 사용하여 반응형 디자인을 구현하는 방법
원활한 경험을 보장하기 위해 반응형 디자인을 테스트하고 개선하는 방법

🏆 성과

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

다양한 화면 크기에 적응하는 반응형 웹 디자인을 생성할 수 있습니다.
접을 수 있는 메뉴를 포함하여 사용자 친화적인 모바일 인터페이스를 개발할 수 있습니다.
반응형 웹 디자인을 테스트하고 반복하기 위한 모범 사례를 적용할 수 있습니다.

프로젝트 설정

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

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

├── css
│   └── style.css
├── images
│   ├── 1.png
│   └── 2.png
├─── js
│    └── jQuery.min.js
└─── index.html

그 중:

index.html은 메인 페이지입니다.
css/style.css는 스타일을 추가해야 하는 파일입니다.
js/jQuery.min.js는 jQuery 라이브러리 파일입니다.
images는 이미지 폴더입니다.

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

다음으로, VM 상단에서 "Web 8080"을 열고 페이지를 수동으로 새로 고쳐 브라우저에서 다음 효과를 확인합니다.

초기 효과

반응형 디자인 구현

이 단계에서는 웹 페이지에 대한 반응형 디자인을 구현하는 방법을 배우게 됩니다.

다음 CSS 규칙을 css/style.css 파일의 맨 아래에 추가합니다.

@media (max-width: 800px) {
  .menu {
    height: 54px;
    line-height: 54px;
    margin-bottom: 25px;
  }

  .icon-menu {
    color: #a0a0a0;
    margin-left: 20px;
    display: inline-block !important;
  }

  .icon-menu:hover {
    color: white;
    cursor: pointer;
  }

  .collapse {
    display: none;
  }

  input[type="checkbox"]:checked ~ .collapse {
    display: flex;
    flex-direction: column;
    background-color: #252525;
  }

  .dropdown:hover ul {
    display: flex;
    flex-direction: column;
  }

  .row {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }

  .box {
    margin-bottom: 15px;
  }

  #tutorials img {
    margin: 0;
  }
}

이 CSS 코드는 웹 페이지에 대한 반응형 디자인을 설정합니다. 메뉴 버튼, 확장된 메뉴 및 콘텐츠 레이아웃을 포함하여 모바일 측면 레이아웃에 대한 스타일을 포함합니다.

주요 변경 사항은 다음과 같습니다.

메뉴 높이와 line-height 는 모바일 디자인에 맞게 54px 로 설정됩니다.
메뉴 버튼 (.icon-menu) 이 표시되고 스타일이 지정됩니다.
.collapse 클래스는 기본적으로 메뉴 항목을 숨기는 데 사용되며, 메뉴 버튼을 클릭하면 표시됩니다.
.row 및 .box 스타일은 모바일에서 콘텐츠를 단일 열 레이아웃으로 표시하도록 업데이트됩니다.
#tutorials img 여백은 모바일 레이아웃에 맞게 제거됩니다.

css/style.css 파일을 저장하고 웹 페이지를 새로 고칩니다. 이제 화면 너비가 800px 미만일 때 모바일 레이아웃이 표시되면서 반응형 디자인이 작동하는 것을 볼 수 있습니다.

반응형 디자인 테스트 및 개선

이 단계에서는 반응형 디자인을 테스트하고 필요한 개선 사항을 적용합니다.

브라우저에서 웹 페이지를 열고 창의 크기를 다양한 너비로 조정하여 레이아웃이 올바르게 조정되는지 확인합니다.
모바일 레이아웃에서 메뉴 버튼 기능을 테스트하여 버튼을 클릭했을 때 메뉴 항목이 표시되는지 확인합니다.
데스크톱 및 모바일 보기 모두에서 콘텐츠 레이아웃을 검사하여 이미지, 텍스트 및 간격이 보기 좋게 표시되는지 확인합니다.
문제 또는 개선할 부분이 발견되면 css/style.css 파일에서 CSS 를 업데이트하고 페이지를 새로 고쳐 변경 사항을 확인합니다.

반응형 웹 디자인은 반복적인 프로세스이므로, 결과에 만족할 때까지 주저하지 말고 실험하고 디자인을 개선하십시오.

완성된 모바일 결과는 다음과 같습니다.

완료된 효과

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

모든 화면을 위한 반응형 웹 디자인

소개