소개
이 프로젝트에서는 공식 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% 로 설정합니다.
반응형 레이아웃 테스트
이 단계에서는 반응형 디자인을 테스트하고 필요한 조정을 수행합니다.
index.html파일을 저장합니다.- 브라우저에서 웹 페이지를 새로 고칩니다.
- 브라우저 창의 크기를 다양한 너비로 조정하여 반응형 레이아웃 변경 사항을 확인합니다.
- 페이지 레이아웃이 제공된 이미지에 표시된 예상 결과와 일치하는지 확인합니다.
이 시점에서 Gulp.js 웹사이트의 반응형 레이아웃 구현을 완료했습니다. 이제 페이지는 요구 사항에 따라 다양한 화면 크기에 적응해야 합니다.
완성된 모바일 결과는 다음과 같습니다:
축하합니다! Gulp.js 웹사이트에 대한 반응형 레이아웃을 성공적으로 구현했습니다.
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
