이 페이지는 Cloud Translation API를 통해 번역되었습니다.

반응형 디자인

이 Codelab은 Google Developers 교육팀에서 개발한 프로그레시브 웹 앱 개발 교육 과정의 일부입니다. Codelab을 순서대로 진행하면 이 과정의 학습 효과를 극대화할 수 있습니다.

과정에 관한 자세한 내용은 프로그레시브 웹 앱 개발 개요를 참고하세요.

소개

이 실습에서는 웹사이트 콘텐츠를 스타일링하여 반응형으로 만드는 방법을 알아봅니다.

학습할 내용

여러 폼 팩터에서 앱이 잘 작동하도록 스타일을 지정하는 방법
Flexbox를 사용하여 콘텐츠를 열로 쉽게 정리하는 방법
미디어 쿼리를 사용하여 화면 크기에 따라 콘텐츠를 재구성하는 방법

유의해야 할 사항

기본 HTML 및 CSS

필요한 항목

터미널/셸 액세스가 가능한 컴퓨터
인터넷 연결
텍스트 편집기

GitHub에서 pwa-training-labs 저장소를 다운로드하거나 클론하고 필요한 경우 LTS 버전의 Node.js를 설치합니다.

선호하는 로컬 개발 서버가 없는 경우 Node.js http-server 패키지를 설치합니다.

npm install http-server -g

responsive-design-lab/app/ 디렉터리로 이동하여 서버를 시작합니다.

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

Ctrl-c을 사용하여 언제든지 서버를 종료할 수 있습니다.

브라우저를 열고 localhost:8080/으로 이동합니다.

참고: 서비스 워커가 실습을 방해하지 않도록 서비스 워커를 등록 취소하고 localhost의 모든 서비스 워커 캐시를 지우세요. Chrome DevTools에서는 Application(애플리케이션) 탭의 Clear storage(저장소 지우기) 섹션에서 Clear site data(사이트 데이터 지우기)를 클릭하여 이를 달성할 수 있습니다.

프로젝트를 열 수 있는 텍스트 편집기가 있는 경우 responsive-design-lab/app/ 폴더를 엽니다. 이렇게 하면 체계적으로 정리하기가 더 쉬워집니다. 그렇지 않으면 컴퓨터의 파일 시스템에서 폴더를 엽니다. app/ 폴더에서 실습을 빌드합니다.

이 폴더에는 다음이 포함됩니다.

index.html은 샘플 사이트/애플리케이션의 기본 HTML 페이지입니다.
modernizr-custom.js는 Flexbox 지원 테스트를 간소화하는 기능 감지 도구입니다.
styles/main.css은 샘플 사이트의 캐스케이딩 스타일 시트입니다.

브라우저에서 앱으로 돌아갑니다. 창 너비를 500px 미만으로 줄이면 콘텐츠가 제대로 반응하지 않습니다.

개발자 도구를 열고 브라우저에서 기기 모드를 사용 설정합니다. 이 모드는 휴대기기에서 앱의 동작을 시뮬레이션합니다. 페이지가 화면의 고정 너비 콘텐츠에 맞게 축소됩니다. 대부분의 사용자에게 콘텐츠가 너무 작아 확대/축소 및 이동을 해야 하므로 좋은 환경이 아닙니다.

index.html의 TODO 3을 다음 태그로 바꿉니다.

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

파일을 저장합니다. 브라우저에서 페이지를 새로고침하고 기기 모드에서 페이지를 확인합니다. 페이지가 더 이상 축소되지 않고 콘텐츠의 크기가 데스크톱 기기의 크기와 일치합니다. 기기 에뮬레이터에서 콘텐츠가 예상대로 작동하지 않으면 기기 모드를 전환하여 재설정합니다.

참고: 기기 에뮬레이션을 사용하면 휴대기기에서 사이트가 어떻게 표시될지 대략적으로 알 수 있지만, 전체적인 모습을 확인하려면 실제 기기에서 사이트를 테스트해야 합니다. Chrome 및 Firefox에서 Android 기기를 디버깅하는 방법을 자세히 알아보세요.

설명

메타 뷰포트 태그는 페이지의 크기와 배율을 제어하는 방법을 브라우저에 알립니다. width 속성은 표시 영역의 크기를 제어합니다. 특정 픽셀 수 (예: width=500) 또는 100% 비율의 CSS 픽셀 단위 화면 너비인 특수 값 device-width,로 설정할 수 있습니다. (표시 영역 높이에 따라 크기나 위치가 변경되는 요소가 있는 페이지에 유용할 수 있는 height 및 device-height 값이 있습니다.)

initial-scale 속성은 페이지가 처음 로드될 때의 확대/축소 수준을 제어합니다. 초기 크기를 설정하면 환경이 개선되지만 콘텐츠가 화면 가장자리를 지나 계속 오버플로됩니다. 다음 단계에서 이 문제를 해결합니다.

추가 정보

표시 영역 설정 - 반응형 웹 디자인 기본사항
viewport meta 태그를 사용하여 모바일 브라우저에서 레이아웃 제어하기 - MDN

styles/main.css의 TODO 4를 다음 코드로 바꿉니다.

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

파일을 저장합니다. 브라우저에서 기기 모드를 사용 중지하고 페이지를 새로고침합니다. 창 너비를 줄여 보세요. 콘텐츠가 지정된 너비에서 단일 열 레이아웃으로 전환됩니다. 기기 모드를 다시 사용 설정하고 콘텐츠가 기기 너비에 맞게 반응하는지 확인합니다.

설명

텍스트를 읽을 수 있도록 브라우저의 너비가 48rem (브라우저의 기본 글꼴 크기에서 768픽셀 또는 사용자 브라우저의 기본 글꼴 크기의 48배)이 되면 미디어 쿼리를 사용합니다. rem이 상대 단위로 적합한 이유에 관한 자세한 내용은 em과 rem의 사용 시기를 참고하세요. 미디어 쿼리가 트리거되면 세 개의 div 각각의 width를 변경하여 페이지를 채움으로써 레이아웃을 3열에서 1열로 변경합니다.

가변형 상자 레이아웃 모듈 (Flexbox)은 콘텐츠를 반응형으로 만드는 데 유용하고 사용하기 쉬운 도구입니다. Flexbox를 사용하면 이전 단계와 동일한 결과를 얻을 수 있지만, 간격 계산을 처리하고 콘텐츠 구조화를 위한 다양한 즉시 사용 가능한 CSS 속성을 제공합니다.

CSS에서 기존 규칙 주석 처리

/* 및 */로 래핑하여 styles/main.css의 모든 규칙을 주석 처리합니다. 이를 'Flexbox를 점진적 개선으로 사용' 섹션에서 Flexbox가 지원되지 않는 경우의 대체 규칙으로 사용합니다.

Flexbox 레이아웃 추가

styles/main.css의 TODO 5.2를 다음 코드로 바꿉니다.

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

코드를 저장하고 브라우저에서 index.html를 새로고침합니다. 브라우저에서 기기 모드를 사용 중지하고 페이지를 새로고침합니다. 브라우저 창을 좁히면 열이 점점 얇아져 하나만 표시됩니다. 다음 연습에서 미디어 쿼리를 사용하여 이 문제를 해결합니다.

설명

첫 번째 규칙은 container div를 플렉스 컨테이너로 정의합니다. 이렇게 하면 모든 직접 하위 요소에 플렉스 컨텍스트가 사용 설정됩니다. 더 광범위한 지원을 위해 Flexbox를 포함하는 이전 및 새로운 구문을 혼합하고 있습니다 (자세한 내용은 자세히 알아보기 참고).

두 번째 규칙은 .col 클래스를 사용하여 동일한 너비의 플렉스 하위 요소를 만듭니다. 클래스가 col인 모든 div에 대해 flex 속성의 첫 번째 인수를 1로 설정하면 나머지 공간이 div 사이에 균등하게 분배됩니다. 이렇게 하면 상대 너비를 직접 계산하고 설정하는 것보다 편리합니다.

추가 정보

A Complete Guide to Flexbox(Flexbox 완전 가이드) - CSS Tricks
CSS Flexible Box Layout Module Level 1 - W3C
CSS에 어떤 접두사를 붙일까요?
Using Flexbox(Flexbox 사용) - CSS Tricks

선택사항: 다른 상대 너비 설정

nth-child 의사 클래스를 사용하여 처음 두 열의 상대 너비를 1로, 세 번째 열의 상대 너비를 1.5로 설정합니다. flex 속성을 사용하여 각 열의 상대적 너비를 설정해야 합니다. 예를 들어 첫 번째 열의 선택기는 다음과 같습니다.

.container .col:nth-child(1)

Flexbox와 함께 미디어 쿼리 사용

styles/main.css의 TODO 5.4를 아래 코드로 바꿉니다.

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

코드를 저장하고 브라우저에서 index.html를 새로고침합니다. 이제 브라우저 너비를 줄이면 콘텐츠가 하나의 열로 재구성됩니다.

설명

미디어 쿼리가 트리거되면 flex-flow 속성을 column로 설정하여 레이아웃을 3열에서 1열로 변경합니다. 이는 5단계에서 추가한 미디어 쿼리와 동일한 결과를 제공합니다. Flexbox는 flex-flow와 같은 다양한 속성을 제공하므로 콘텐츠를 쉽게 구조화하고, 재정렬하고, 정렬하여 어떤 맥락에서도 잘 반응하도록 할 수 있습니다.

Flexbox는 비교적 새로운 기술이므로 CSS에 대체 요소를 포함해야 합니다.

Modernizr 추가

Modernizr는 Flexbox 지원 테스트를 간소화하는 기능 감지 도구입니다.

index.html의 TODO 6.1을 맞춤 Modernizr 빌드를 포함하는 코드로 바꿉니다.

<script src="modernizr-custom.js"></script>

설명

index.html 상단에는 Flexbox 지원을 테스트하는 Modernizr 빌드가 포함되어 있습니다. 이렇게 하면 페이지 로드 시 테스트가 실행되고 브라우저에서 Flexbox를 지원하는 경우 <html> 요소에 flexbox 클래스가 추가됩니다. 그렇지 않으면 no-flexbox 클래스를 <html> 요소에 추가합니다. 다음 섹션에서는 이러한 클래스를 CSS에 추가합니다.

참고: Flexbox의 flex-wrap 속성을 사용하는 경우 이 기능에만 해당하는 별도의 Modernizr 감지기를 추가해야 합니다. 일부 브라우저의 이전 버전에서는 Flexbox를 부분적으로 지원하며 이 기능이 포함되어 있지 않습니다.

점진적으로 Flexbox 사용

CSS에서 flexbox 및 no-flexbox 클래스를 사용하여 Flexbox가 지원되지 않는 경우 대체 규칙을 제공합니다.

이제 styles/main.css에서 주석 처리된 각 규칙 앞에 .no-flexbox를 추가합니다.

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

같은 파일에서 나머지 규칙 앞에 .flexbox를 추가합니다.

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

선택사항인 5.3단계를 완료한 경우 개별 열의 규칙에 .flexbox를 추가해야 합니다.

코드를 저장하고 브라우저에서 index.html를 새로고침합니다. 페이지는 이전과 동일하게 표시되지만 이제 모든 기기의 모든 브라우저에서 제대로 작동합니다. Flexbox를 지원하지 않는 브라우저가 있는 경우 해당 브라우저에서 index.html를 열어 대체 규칙을 테스트할 수 있습니다.

추가 정보

Flexbox로 이전 - Cutting the Mustard
Modernizr 문서

콘텐츠를 반응형으로 만들기 위해 스타일을 지정하는 방법을 배웠습니다. 미디어 쿼리를 사용하면 사용자의 기기 창 또는 화면 크기에 따라 콘텐츠의 레이아웃을 변경할 수 있습니다.

학습한 내용

시각적 표시 영역 설정
Flexbox
미디어 쿼리

리소스