미디어 쿼리가있는 적응 형 레이아웃

  • 필요한 지식 : 중급 CSS
  • 요구 사항 : 텍스트 편집기, 최신 브라우저, 프로젝트 파일
  • 프로젝트 시간 : 30 분
  • 소스 파일

1993 년에 NCSA의 Mosaic 브라우저는 웹을 시각적으로 바꿔 매체를 영원히 바꿔 놓았습니다. 인쇄 계의 디자이너들은이 새로운 캔버스로 실험을 시작했고 당시 사용할 수 있었던 기초적인 도구로 최선을 다했습니다. 웹은 수천 개의 '브로셔'사이트의 본거지가되었고 인쇄 개념 (하나의 경우 '접기')이 웹 페이지 레이아웃에 대한 거의 모든 토론에 적용되기 시작했습니다. 웹이 인쇄되었습니다.

1 년 만에 웹은 오디오로 활기를 띠고 비디오와 애니메이션이 순식간에 이어졌습니다. Director 및 FutureSplash와 같은 도구는 모션 그래픽 세계의 디자이너들에게 손짓을했고 그들은 몰려 들었습니다. 웹은 두 번째로 큰 변화를 겪었고 거의 모든 대형 사이트가 마치 대화 형 CD-ROM처럼 재 설계되었습니다. 완전한 대화 형 재창조를위한 예산이없는 모든 프로젝트에는 애니메이션 스플래시 페이지가 있으며 거의 ​​모든 디자인 토론에서 누군가 스크롤바를 비난 할 것입니다. 웹은 키오스크가되었습니다.



시간이 지남에 따라 괴짜들은 소프트웨어를 구축 할 수있는 일련의 API로 다시 돌아와 웹을 재구성했습니다. 마크 업보다 프로그래밍 언어에 더 익숙한 개발자는 데스크톱을 브라우저로 가져 오는 것을 중심으로 토론을 진행하면서 웹의 빌딩 블록을 찌르고 찌르고 이기고 제출했습니다. 웹은 플랫폼이되었습니다.



정말 이해할 수있는 일이었습니다. 웹은 우리에게 새로운 것이었고 다른 경험과 마찬가지로 우리는 이미 이해 한 것과의 유사성에 초점을 맞추어 이해하려고 노력했습니다. 고맙게도 웹에서 작업하는 많은 사람들은 웹에 더 많은 것이 있다는 것을 깨닫고 웹을 독특하게 만든 것에 대해 감사하기 시작했습니다. '알았다'는 사람들은 다음과 같이 반발하기 시작했습니다.

  • 접기가 존재하지 않습니다.
  • 사람들은 스크롤바로 혼동하지 않습니다.
  • 사용자는 그 미친 애니메이션 인트로와 지속적인 '로드'대화 상자를 싫어합니다.

우리는 마침내이 매체가 부분의 합 이상이라는 것을 이해하기 시작했습니다.



시간이 지남에 따라 웹이 이전에 알고 있던 매체와 얼마나 다른지 완전히 이해하기 시작했습니다. 사람들이 웹 페이지를 인쇄했기 때문에 인쇄되었습니다. 사람들이 영화를보고 게임을하고 있었기 때문에 상호 작용했습니다. 사람들이 데스크톱 애플리케이션을 온라인에 상응하는 애플리케이션으로 교체했기 때문에 플랫폼이었습니다. 이 모든 것 이상이었습니다. 그 외에도 사람들은 TV, 비디오 게임 콘솔, 휴대폰, 심지어 냉장고 등 어디에 있든 웹을 사용할 수 있도록 요구하기 시작했습니다. 우리는 어디서나 웹을 원했습니다.

01. 적응

디자이너와 개발자로서 우리는 이러한 추세를 초기에 알아 차리기 시작했습니다. 주로 우리가 이러한 요구를 웹에 올려 놓은 바로 그 사람들 이었기 때문입니다. 따라서 CSS2 사양은 디자이너가 특정 매체에 맞게 스타일을 조정할 수있는 기능을 도입했습니다. 게이트 밖에서 컴퓨터, 모바일 장치, 텔레비전, 프린터, 프로젝터 및 보조 장치에 대한 지원을 제안했습니다.

미디어 별 스타일에 대한 아이디어가 떠오른 직후 공급 업체는이를 실행하기 시작했습니다. 물론 '화면'매체는 기본적으로 브라우저에서 선택되었지만 일부는 인쇄 스타일 시트에 대한 지원을 추가하여 최초의 진정한 적응 형 레이아웃을위한 문을 열었습니다.



2002 년에 Eric Meyer는 인쇄 매체를 위해 특별히 설계된 스타일 시트를 선호하여 별도로 유지 관리되는 '프린터 친화적'페이지를 폐기하는 사례를 만들었습니다. CSS를 사용하여 그는 인쇄에서 의미가없는 항목 (내비게이션, 배경 이미지)을 숨기는 방법을 보여 주었고 인쇄 환경에 맞게 특별히 제공하는 몇 가지 방법 (예 : 생성 된 콘텐츠를 사용하여 링크 대상 표시)을 보여주었습니다. 갑자기 '한 번 게시하면 모든 곳에 배포'라는 웹의 비전이 현실처럼 보였습니다.

몇 년 후 Cameron Adams는 사이트가 채워야 할 수많은 브라우저 크기에 적응하도록 돕는 방법으로 최초의 해상도 종속 레이아웃을 제공했습니다. Paul Sowden이 대중화 한 스타일 시트 전환 개념을 기반으로 구축 된이 기술은 800x600 대 1024x768 논쟁을 해결하기 위해 도입되었습니다. 그러나 그것은 그 이상을 수행하여 'Invasion of the Body Switchers'및 'Switchy McLayout'과 같은 다른 기술의 기반을 마련했습니다. 이 기술 (및 후속 기술)이 잘 작동했지만 모두 거의 전적으로 JavaScript에 의존하여 작동했습니다. 그런 다음 미디어 질문이 나왔습니다.

한 사이먼 콜리슨의 멋진 홈페이지는 가로로 잡으면 아이 패드에서 작동하지만 작은 화면에서는 감상하기가 조금 어렵습니다.

한 사이먼 콜리슨의 멋진 홈페이지는 가로로 잡으면 아이 패드에서 작동하지만 작은 화면에서는 감상하기가 조금 어렵습니다.

2001 년에 CSS3의 모듈로 초안이 작성된 CSS 미디어 쿼리는 마침내 유용 할 정도로 광범위하게 지원됩니다. 본질적으로, 그것들은 더 설명적인 미디어 할당 일뿐입니다. 예를 들면 다음과 같습니다.

@media (최소 너비 : 801px) {
/ * 이러한 규칙을 얻으려면 브라우저 창 너비가 801px 이상이어야합니다. * /
}

iPad가 세로 일 때 사이트의 2 열 버전은 정말 멋집니다.

iPad가 세로 일 때 사이트의 2 열 버전은 정말 멋집니다.

실제로 미디어 쿼리는 우리가 사용했던 해키 필터 및 현재 사용하고있는 조건부 주석과 매우 유사하지만 훨씬 더 강력합니다. 또한 미디어 유형이 할당 될 수있는 모든 곳에서 사용할 수 있습니다 (예 : 링크 및 스타일 요소, ​​@import 지시문 및 @media 블록).

미디어 쿼리를 정의하는 CSS3 모듈은 지난 여름 후보 추천 단계에 도달했으며 다음 요소를 기반으로 검색 환경에 대한 내성을 제공합니다.

  • 브라우저 크기 (너비, 높이 및 종횡비)
  • 장치 크기 (장치 너비, 장치 높이 및 장치 종횡비)
  • 브라우저 방향;
  • 색상 정보 (컬러, 컬러 인덱스 및 단색) 및
  • 해상도, 디스플레이가 그리드 또는 비트 맵 기반인지 여부, 스캔 유형 (프로그레시브 또는 인터레이스… TV에 적용 가능)과 같은 장치 별 세부 정보.

이러한 속성이 모두 현재 지원되는 것은 아니지만 대부분이 지원됩니다. 또한 대부분은 위에서 사용한 것과 같은 최소 및 최대 접두사를 지원하므로 쿼리를 매우 구체적으로 조정할 수 있습니다.

미디어 쿼리는 및 키워드를 사용하여 결합하고 not 키워드를 사용하여 부정 할 수도 있습니다. 이로 인해 미디어 쿼리에 정말 열광 할 수 있다고 믿게 될 수도 있지만 구문은 여전히 ​​매우 제한적입니다. JavaScript 또는 PHP와 같은 실제 프로그래밍 언어에서 가능한 한 구체적으로 설명 할 수 없습니다 (예 : A와 B 또는 B와 C 인 경우, A와 C는 제외). 그러나 쉼표를 사용하여 '또는'을 암시 할 수 있습니다.

@media (최대 너비 : 800px), 투영 {
/ * 브라우저 창 너비는 800px 또는이 장치를 초과 할 수 없습니다.
이 규칙을 적용하려면 영사 미디어 여야합니다. * /
}

미디어 쿼리는 너무 많은 가능성을 열어서 어디서부터 시작해야할지 알기 어렵 기 때문에 천천히 시작하는 것이 가장 좋습니다. 이 튜토리얼에서는 기존 웹 페이지 (Colly.com에서 본 Mr Simon Collison의 홈페이지)를 가져 와서 미디어 쿼리를 사용하여 사이트의 두 가지 대체보기를 생성하여 다른 화면 너비에서도 잘 보이게합니다. . 여기에있는 동안 최신 버전의 iPhone 및 iPad에서 적절한보기가 트리거되는지 확인합니다. 두 버전 모두 미디어 쿼리를 적절하게 지원합니다.

CSS의 특성 때문에 미디어 쿼리는 점진적 향상 도구 상자에 완벽하게 들어 맞습니다. 브라우저가 이해하지 못하는 것은 무시됩니다. 미디어 쿼리를 신중하게 작성하면이를 이해하지 못하는 브라우저에 문제를 일으키지 않는 적응 형 레이아웃을 만들 수 있습니다.

02. 신청

이 모든 것을 염두에두고 Simon의 기존 CSS 위에 적응 형 레이아웃을 적용하고 꼭 필요한 경우에만 원래 코드를 변경합니다. 집에서 함께 연주하려면 좋아하는 편집기를 실행하고이 호의 CD에있는 파일에서 css / screen.css를 엽니 다.

두 개의 @media 블록 안에있는 Colly의 CSS 파일 맨 아래에있는 대체 레이아웃을 격리 할 것입니다. 이러한 방식으로 설정하면 원래 4 열 레이아웃의 규칙이 두 개의 대체 레이아웃으로 계단식으로 내려 가고 2 열 레이아웃에 대한 변경 사항은 1 열 레이아웃으로 계단식으로 내려갑니다. 이는 일을 크게 단순화하고 작성 / 재 작성해야하는 규칙의 수를 줄입니다.

2 열 레이아웃부터 시작하겠습니다. 진행 상황을 보려면 최신 브라우저에서 index.html을 열고 가로 스크롤바가 나타나는 지점까지 창 너비를 줄이십시오 (Colly의 디자인은 990px ​​너비로 고정되어 있으므로 989px).

2 열 버전의 사이트에 필요한 너비는 510px입니다 (페이지의 원래 여백, 패딩 등을 유지하기 위해). 따라서 div # page의 너비를 468px로 조정하여 시작하겠습니다.

@media (최대 너비 : 989px) {
div # page {너비 : 468px; }
}

가로 모드에서 iPhone은 2 열보기를 잘 처리 할 수 ​​있습니다.

가로 모드에서 iPhone은 2 열보기를 잘 처리 할 수 ​​있습니다.

Colly가 열을 만들기 위해 float를 사용했기 때문에이 작업은 상당히 많은 작업을 수행합니다. 이제 간격을 조정하기 위해 몇 가지 규칙을 추가하면됩니다.
디자인의 :

.home ul # navigation_pri, .home ul # subnav-b {padding-bottom : 30px; }
ul # navigation_pri li, ul # subnav-a li, ul # subnav-b li {margin-bottom : 10px; }
ul # navigation_pri li : nth-child (even), ul # subnav-a li : nth-child (even),
ul # subnav-b li : nth-child (even) {margin-right : 0; }
#page ul [id ^ = subnav] {margin-bottom : 0; }

오른쪽 여백을 조정하기 위해 다른 모든 탐색 항목을 선택하기 위해 : nth-child ()를 사용하고 있음을 알 수 있습니다. 이 선택기를 사용하면 다른 방법으로 수행해야 할 마크 업 변경 횟수를 줄이는 데 도움이됩니다. 미디어 쿼리 내에서 사용되고 있고 거의 모든 브라우저에서 미디어 쿼리에 대한 지원 이전에 : nth-child ()에 대한 지원이 사용되기 때문에 작동 할 것이라고 확신 할 수 있습니다.

여러분이 눈치 채 셨을 또 다른 점은 우리 디자인에 여전히 몇 가지 문제가 있다는 것입니다. 즉, 외부 참조 제목이 오른쪽 끝까지 약간 잘립니다. 이를 수정하기 위해 사이트의 원래 규칙을 몇 가지 미묘하게 조정합니다. 스타일 시트의 제목 아래에서 선택기 h2.ext-dests a를 찾은 다음 0 0을 배경 속성의 가운데 상단으로 변경하여 조정합니다. 배경 이미지의 위치.

축소 된 뷰포트가있는 iPhone은 세로 방향으로 잡았을 때 1 열 레이아웃의 이점을 제공합니다.

축소 된 뷰포트가있는 iPhone은 세로 방향으로 잡았을 때 1 열 레이아웃의 이점을 제공합니다.

만들 가치가있는 또 다른 미묘한 조정은 div # page에서 사용되는 배경 이미지입니다. 배경 위치를 설정하지 않으면 그리드가이 작은 크기에서 약간 벗겨 지지만 배경 위치도 중앙 상단으로 설정하면이를 수정할 수 있습니다. 스타일 시트의 레이아웃 섹션에서 첫 번째 선언 블록의 일부로 div # page에 설정된 배경 속성을 찾을 수 있으며 여기에이 조정을 추가 할 수 있습니다.

클래스 10 SD 카드 베스트 바이

이제 편안히 앉아 당신의 수작업에 감탄하십시오. 미디어 쿼리를 사용하여 적응 형 레이아웃을 만들었습니다!

1 열보기

하지만 우리의 일은 끝나지 않았습니다. 생성 할 1 열보기가 여전히 있습니다. 두 번째 @media 블록을 만들고 최대 너비 509px를 쿼리하도록합니다 (2 열 레이아웃에는 510px 너비가 필요하기 때문).

이 단일 열 모드에서는 320px 너비로 레이아웃을 최적화하므로 dix # page의 너비를 310px로 설정하고 왼쪽 및 오른쪽 패딩을 각각 5px로 줄입니다.

@media (최대 너비 : 509px) {
div # page {padding : 30px 5px 10px; 너비 : 310px; }
}

브라우저 크기를 조금 더 좁 히면이 레이아웃이 트리거됩니다. 해결해야 할 몇 가지 나머지 문제와 함께 거의 모든 것이 제자리에 있는지 확인해야합니다. 첫 번째는 마스트 헤드입니다. 그래야하는 것처럼 중앙에 있지 않습니다. 이 문제는 다음을 통해 신속하게 해결됩니다.

h1 a {너비 : 310px; 배경 위치 : 중앙 상단; }
h1 a : hover {배경 위치 : 중앙 -90px; }

다음은 탐색 블록입니다. 이 너비로보기 좋게 보이지만 실제로 레이아웃을 활용하려면 약간 더 넓게 만들어야합니다. 하지만 안타깝게도 블록의 각 span.label에 적용된 배경 이미지가 반복되도록 설정되어 있으므로이를 조정해야합니다.

이 작업을하는 동안 압축 된 공간에서 더 쉽게 읽을 수 있도록 블록의 글꼴 크기를 약간 늘려 보지 않겠습니까? 이렇게하면 더 넓은 블록에서도 선 길이가 더 잘 유지됩니다.

ul # navigation_pri li, ul # subnav-a li,
ul # subnav-b li {너비 : 290px; 글꼴 크기 : 1.25em; }
ul # navigation_pri li a span.label, ul # subnav-a li a span.label,
ul # subnav-b li a span.label {background-repeat : no-repeat; }

마지막으로 레이아웃을 조금 더 조이기 위해 탐색 목록 주변의 간격을 조정하고 바닥 글 텍스트를 왼쪽으로 정렬하여 짧은 줄로 인해 이상하게 보이지 않도록합니다.

.home ul # navigation_pri, .home ul # subnav-b {padding-bottom : 30px; }
div # siteinfo {텍스트 정렬 : 왼쪽; }

만세! 이제 매력적인 단일 열 레이아웃이 있습니다.

03. 아이 패드가 시들어?

앞서 언급했듯이이 연습의 또 다른 핵심 작업은 이러한 레이아웃을 iPhone 및 iPad에 적용하는 것입니다. 두 기기 중 하나에서 사물의 현재 상태를 본 경우 결과가 최적이 아니라는 것을 알 수 있습니다. 수정하겠습니다.

가장 먼저해야 할 일은 이러한 장치가 뷰포트를 처리하는 방식을 조정하는 것입니다. 페이지에 새로운 메타 요소를 도입함으로써 목표 달성에 한 걸음 더 다가 갈 수 있습니다.

이 명령은 뷰포트 너비를 장치 자체의 너비로 설정하도록 지원하는 장치에 지시합니다. 이제 본격적으로 iPad 및 iPhone 최적화를 시작할 수 있습니다. 그러나 그 전에 각 장치에서 어떤 레이아웃이 가장 잘 보이는지 고려해야하며, 그 이상으로 각 방향에서 가장 잘 보이는 레이아웃이 무엇인지 고려해야합니다 (미디어 쿼리는 이에 대한 내성도 제공하므로). 나에게 가장 의미있는 것은 iPhone을 세로로 잡았을 때 단일 열보기를 제공하고 수평으로 잡을 때 두 열 버전을 제공하는 것입니다.

iPad의 경우 세로 방향은 2 열보기에서 가장 큰 이점을 얻을 수 있지만 가로 방향은 원래 4 열 레이아웃을 잘 처리 할 수 ​​있습니다.

미디어 쿼리로이 모든 작업을 수행하기 위해 장치 측정을 사용하여 안내 할 수 있습니다. iPhone 디스플레이는 480px x 320px이고 iPad는 1024px x 768px의 훨씬 더 큰 캔버스를 제공합니다. 이러한 차원과 방향 지원 (iOS 4.0의 iPhone에 제공되지만 이미 iPad에서 사용 가능)을 미디어 쿼리에 포함하면 다음과 같은 결과가 나타납니다.

@media (최대 너비 : 989px),
(최대 기기 너비 : 480px) 및 (방향 : 가로),
(min-device-width : 481px) 및 (orientation : portrait) {
/ * 2 열 * /
}
@media (최대 너비 : 509px),
(max-device-width : 480px) 및 (orientation : portrait) {
/ * 1 열 * /
}

이론적으로는 장치 너비에 480px / 481px 컷오프를 사용하여 각 장치가 제대로 작동하도록 할 수 있습니다. 불행히도 이러한 단일 최대 너비 쿼리는 작업에 스패너를 던집니다. 그 영향을 최소화하려면 각각을 복합 쿼리로 변환해야합니다. 또한 구형 iPhone (iOS 4.0 이전)의 경우 여전히 대체보기가 필요하므로 두 개의 열을 중간 지점으로 지정합니다.

@media (최소 장치 너비 : 1024px) 및 (최대 너비 : 989px),
화면 및 (최대 기기 너비 : 480px),
(최대 기기 너비 : 480px) 및 (방향 : 가로),
(min-device-width : 481px) 및 (orientation : portrait) {
/ * 2 열 * /
}
@media (최소 장치 너비 : 1024px) 및 (최대 너비 : 509px),
(max-device-width : 480px) 및 (orientation : portrait) {
/ * 1 열 * /
}

마지막으로, Safari 나 Chrome에서 팔로우 해 주신 분들을위한 특별한 혜택을드립니다. 미디어 블록 외부에 다음 코드 줄을 추가 한 다음 브라우저 크기를 조정합니다.

* {-webkit-transition : 너비 .5s; }

좋은. 좋습니다. 게임을 중단하면 여기에서 배운 내용을 웹 사이트에 적용하세요. 결국, Colly만이 모든 즐거움을 누려서는 안됩니다!

Aaron Gustafson은 설립자이자 수석 컨설턴트입니다. 쉬운! 디자인 , 웹 개발 컨설팅. 그는 또한 그룹 관리자입니다 웹 표준 프로젝트 (WaSP) , W3C의 초청 전문가 Open Web Education Alliance , 발표자 및 저자입니다.

마음에 드 셨나요? 읽어보세요!