인터넷상의 휴대전화 사용자 수가 증가함에 따라 웹 디자이너에게 적합한 방식으로 콘텐츠를 배치하는 것이 점점 더 중요해지고 있습니다 잘 맞습니다. 반응형 웹 디자인, 원래 정의: 에단 마코트(A List Apart) 사용자의 의도에 맞게 반응하는 니즈와 기기를 사이트의 레이아웃을 사용 중인 기기에 맞게 변경하여 기능을 보완할 수 있습니다. 대상 예를 들어 반응형 사이트는 휴대전화에서 단일 열 보기로 콘텐츠를 표시할 수 있습니다. 태블릿에서는 2열, 데스크톱 컴퓨터에서는 3~4열입니다.
<ph type="x-smartling-placeholder">인터넷 지원 기기에는 가능한 화면 크기가 너무 많기 때문에 사이트가 기존 또는 향후 화면 크기에 맞게 조정되는 데 중요합니다. 모던 반응형 디자인은 터치 스크린과 같은 상호작용 모드도 고려합니다. 모든 사용자를 위해 환경을 최적화하는 것이 목표입니다.
표시 영역 설정
다양한 기기에 최적화된 페이지는 문서 헤드입니다. 이 태그는 브라우저에 페이지의 사용할 수 있습니다.
모바일 브라우저는 최상의 경험을 제공하기 위해
데스크톱 화면 너비 (일반적으로 약 980px이지만 기기에 따라 다름)
글꼴 크기를 늘리고 색을 칠해 콘텐츠를 더 보기 좋게
화면에 맞게 콘텐츠 크기를 조정합니다. 이로 인해 글꼴이 일관되지 않고
사용자가 콘텐츠를 보고 상호작용하려면 확대해야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
메타 표시 영역 값 width=device-width을 사용하면 페이지가
화면 너비(기기 독립형 픽셀(DIP), 표준 시각적 픽셀 단위)
(고밀도 화면의 많은 물리적 픽셀로 구성될 수 있음). 이
페이지가 다양한 화면 크기에 맞게 콘텐츠를 리플로우할 수 있게 합니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">일부 브라우저의 경우
가로 모드로 회전할 때 페이지 너비가 일정하며, 확대/축소하여
리플로우하는 대신 initial-scale=1 값을 추가하면 브라우저에
기기 독립적 픽셀과 CSS 픽셀 간에 1:1 관계 설정
사용자가 기기의 방향에 상관없이 화면 방향에 관계없이
가로 모드 너비를 선택합니다.
width 또는 initial-scale가 포함된 <meta name="viewport"> 태그가 없음
Lighthouse 감사는 HTML 환경에서 문제가 있는지
표시 영역 메타 태그를 올바르게 사용하는 문서
표시 영역에 맞게 콘텐츠 크기 조정
사용자는 데스크톱과 휴대기기 모두에서 웹사이트를 스크롤하는 데 익숙합니다. 가로로는 안 되고 세로로는 안 됩니다. 사용자가 가로 또는 세로로 스크롤하도록 사용자 환경이 저하될 수 있습니다.
메타 표시 영역 태그를 사용하여 모바일 사이트를 개발할 때는 일반적으로 페이지에 콘텐츠가 잘못 생성되어 지정된 표시 영역입니다. 예를 들어 표시 영역보다 넓게 표시되는 이미지는 가로 스크롤링 이를 방지하려면 콘텐츠 크기에 맞춰 콘텐츠를 표시 영역입니다.
콘텐츠 크기가 표시 영역에 맞지 않음 Lighthouse 감사는 오버플로를 감지하는 프로세스를 자동화하는 데 도움이 될 수 있습니다. 있습니다.
이미지
고정된 크기의 이미지를 사용하면 이미지가
표시 영역입니다. 모든 이미지에 100%의 max-width를 제공하는 것이 좋습니다. 이렇게 하면 축소됩니다.
이미지를 사용 가능한 공간에 맞추면서도 이미지가 다른 곳으로 늘어나는 것을 방지합니다.
초기 크기를 지정합니다
대부분의 경우 스타일 시트에 다음을 추가하여 이 작업을 수행할 수 있습니다.
img {
max-width: 100%;
display: block;
}
img 요소에 이미지 크기 추가
max-width: 100%를 설정하더라도 여전히 width 및
height 속성을 <img> 태그에 추가하여 브라우저에서
이미지를 로드해야 합니다 이렇게 하면 레이아웃 변경을 방지할 수 있습니다.
레이아웃
CSS 픽셀의 화면 크기와 너비는 기기마다 크게 달라지기 때문입니다. (예: 휴대전화와 태블릿 간, 서로 다른 휴대전화 간에) 콘텐츠가 잘 렌더링되기 위해 특정 표시 영역 너비에 의존해서는 안 됩니다.
이전에는 레이아웃 요소를 백분율로 설정해야 했습니다. Pixel 사용 측정을 사용하려면 사용자가 작은 화면에서 가로로 스크롤해야 합니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">대신 백분율을 사용하면 작은 화면에서는 열 너비가 좁아집니다. 각 열은 항상 화면 너비에서 동일한 비율을 차지합니다.
Flexbox, 그리드 레이아웃, 멀티콜 레이어와 같은 최신 CSS 레이아웃 기술 이러한 유연한 그리드를 훨씬 쉽게 만들 수 있습니다.
Flexbox
다양한 크기의 항목 세트가 있고 이를 사용하려면 Flexbox를 한 줄 또는 여러 줄에 편안하게 맞으며, 작은 항목은 덜 차지함 커질수록 공간을 더 많이 차지하죠.
.items {
display: flex;
justify-content: space-between;
}
Flexbox를 사용하여 항목을 단일 행으로 표시하거나 여러 행에 래핑하여 표시할 수 있습니다. 줄어드는 간격이기 때문에 매우 유용합니다.
CSS 그리드 레이아웃
CSS 그리드 레이아웃은 유연한 그리드를 만듭니다. 이전 플로팅 광고 형식을 개선하여
이 예에서는 그리드 레이아웃과 이미지의 일부를 나타내는 fr 단위를 사용합니다.
컨테이너에서 사용 가능한 공간을 의미합니다
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
그리드 레이아웃을 사용하여 최대한 많은 항목이 포함된 일반 그리드 레이아웃을 만들 수도 있습니다.
살펴봤습니다 화면 크기에 따라 사용 가능한 트랙 수가 줄어듭니다.
감소합니다. 다음 데모는 사용 가능한 만큼 많은 카드가 포함된 그리드를 보여줍니다.
각 행에 표시되며 최소 크기는 200px입니다.
다중 열 레이아웃
일부 레이아웃 유형의 경우 다중 열 레이아웃 (Multicol)을 사용할 수 있으며,
이 함수는 column-width 속성을 사용하여 열의 반응형 번호를 만듭니다.
다음 데모에서는
다른 200px 열을 위한 공간
응답성을 위해 CSS 미디어 쿼리 사용
때로는 레이아웃을 더 광범위하게 변경해야 할 수도 있습니다. 특정 화면 크기를 지원해야 할 수도 있습니다. 이때 미디어 쿼리가 유용합니다.
미디어 쿼리는 CSS 스타일에 적용할 수 있는 간단한 필터로, 콘텐츠를 렌더링하는 장치 유형에 따라 스타일을 설정합니다. 또한 너비, 높이, 방향, 크기 등 기기의 특징에 따라 스타일을 변경할 수 기기가 터치스크린으로 사용되고 있는지 여부
다른 인쇄 스타일을 제공하려면 출력 유형과 인쇄 스타일을 위한 스타일 시트를 포함합니다.
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
미디어 쿼리를 사용하여 기본 스타일 시트에 인쇄 스타일을 포함할 수도 있습니다.
@media print {
/* print styles go here */
}
반응형 웹 디자인의 경우 가장 일반적인 쿼리는 기기 기능에 관한 것이기 때문에 터치스크린 또는 더 작은 화면에 맞게 레이아웃을 맞춤설정할 수 있습니다.
표시 영역 크기에 따른 미디어 쿼리
미디어 쿼리를 사용하면 스타일을 지정할 수 있습니다. 화면 크기에 대한 쿼리로 다음과 같습니다.
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
이러한 모든 기능은 뛰어난 브라우저 지원을 제공합니다. 자세한 내용은 자세한 내용은 너비, 높이, 방향 가로세로 비율 확인해 보세요.
기기 기능에 기반한 미디어 쿼리
사용 가능한 기기의 범위를 고려할 때 개발자는 모든 대형 장치가 일반적인 데스크톱 또는 노트북 컴퓨터이거나 터치스크린을 사용합니다. 미디어 쿼리에 새로 추가된 사항 사양을 사용하면 기기와 상호작용하고 사용자가 포인터로 기기를 가져갈 수 있는지 요소
hoverpointerany-hoverany-pointer
다른 기기에서 이 데모를 보고 태블릿이 아닌 일반 데스크톱 컴퓨터, 스마트폰 또는 태블릿 등입니다.
이러한 최신 기능은 모든 최신 브라우저에서 원활하게 지원됩니다. 자세히 알아보기: 마우스 오버용 MDN 페이지 마우스 오버, 포인터 포인터를 사용합니다.
any-hover 및 any-pointer 사용
any-hover 및 any-pointer 기능은 사용자가 포인터를 보유할 수 있는지 테스트합니다.
또는 포인터를 전혀 사용하지 않습니다.
기기와 상호작용하는 기본적인 방법이 아닙니다.
예를 들어 터치스크린 사용자가 마우스로 전환하지 않도록 할 수 있습니다.
그러나 any-hover 및 any-pointer는
사용자가 소유한 기기의 종류를 파악할 수 있습니다. 예를 들어
터치 스크린과 트랙패드는 거칠거나 가는 포인터와
마우스 오버 기능도 있습니다.
중단점 선택 방법
기기 클래스나 제품, 브랜드 이름 또는 실행할 수 있습니다 이로 인해 코드를 관리하기가 어렵습니다. 대신 콘텐츠에 따라 레이아웃이 컨테이너에 맞게 변경되는 방식이 결정됩니다.
작게 시작해서 늘려가면서 주요 중단점 선택
먼저 작은 화면에 맞게 콘텐츠를 디자인한 다음 화면을 확장합니다. 중단점이 필요해질 때까지 전송하지 않는 것입니다 이렇게 하면 콘텐츠에 따라 최적화할 수 있습니다.
다음 예는 Google 뉴스 앱의 날씨 예보 위젯에 대해 확인할 수 있습니다 첫 번째 단계는 작은 화면:
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">그런 다음 요소 사이에 공백이 너무 많아질 때까지 브라우저의 크기를 조정합니다.
위젯이 보기 좋게 표시됩니다. 이 결정은 주관적이지만 600px 이상입니다.
확실히 너무 넓습니다.
<ph type="x-smartling-placeholder">600px에 중단점을 삽입하려면
구성요소의 CSS: 브라우저가 600px 이하일 때 사용하는 CSS입니다.
600px보다 넓을 때 하나를 선택합니다.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
마지막으로 CSS를 리팩터링합니다. 600px의 max-width의 미디어 쿼리 내에서
작은 화면 전용 CSS를 추가합니다. 미디어 쿼리 내에서
601px개 중 min-width개는 대형 화면의 CSS를 추가합니다.
필요한 경우 하위 중단점 선택
레이아웃이 크게 변경될 때 주요 중단점을 선택하는 것 외에도 사소한 변경사항에 맞게 조정하는 것도 도움이 됩니다. 예를 들어 요소의 여백이나 패딩을 조정하는 것이 글꼴 크기를 키워 더 자연스럽게 표시되도록 할 수 있습니다.
이 예는 이전 예와 동일한 패턴을 따르며
작은 화면 레이아웃 최적화 먼저, 표시 영역이 닫힐 때
너비가 360px보다 큽니다. 그 후에 공간이 충분하면
최고 기온과 최저 기온을 분리하여 동일한 선에 배치하도록 하고
날씨 아이콘이 더 커졌습니다.
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
대형 화면의 경우 예측 패널의 최대 너비를 제한하는 것이 좋습니다. 전체 화면 너비를 사용하지 않습니다.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
읽기에 적합하도록 텍스트 최적화
기존의 가독성 이론에 따르면 이상적인 열에는 70~80개의 최대 자(영문 기준)여야 합니다(영문 기준 약 8~10단어). 확장 소재에 텍스트 블록의 너비가 약 10단어를 넘어갈 때마다 중단점이 됩니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">이 예에서 1em의 Roboto 글꼴은
작은 화면이지만 큰 화면에는 중단점이 필요합니다. 이 경우
브라우저 너비가 575px보다 크면 이상적인 콘텐츠 너비는 550px입니다.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
콘텐츠를 숨기지 마세요 (:#avoid-hidden-content)
화면 크기에 따라 숨기거나 표시할 콘텐츠를 선택할 때는 주의해야 합니다. 화면에 맞지 않는다는 이유만으로 콘텐츠를 숨기지 마세요. 화면 크기 사용자가 무엇을 원할지 예측하지 않습니다. 예: 꽃가루 제거 일기예보의 계산은 봄철 알레르기에 심각한 문제가 될 수 있습니다. 외출해도 되는지 판단하기 위해 해당 정보가 필요한 환자를 대상으로 합니다.
Chrome DevTools에서 미디어 쿼리 중단점 보기
미디어 쿼리 중단점을 설정한 후 사이트의 있습니다. 브라우저 창의 크기를 조정하여 중단점을 트리거할 수 있습니다. Chrome DevTools에는 페이지가 서로 다른 장애점을 제어할 수 있습니다
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">중단점이 다른 페이지를 보는 방법은 다음과 같습니다.
- DevTools를 엽니다.
- 기기 모드를 사용 설정합니다. 반응형 모드에서 열립니다. 기본적으로 제공됩니다
- 미디어 쿼리를 보려면 기기 모드 메뉴를 열고 미디어 쿼리 표시. 이렇게 하면 중단점이 페이지 위에 색상이 지정된 막대로 표시됩니다.
- 막대 중 하나를 클릭하면 미디어 쿼리가 활성화되어 있는 동안 페이지를 볼 수 있습니다. 막대를 마우스 오른쪽 버튼으로 클릭하여 미디어 쿼리의 정의로 이동합니다.