콘텐츠 폭이 화면 폭보다 넓음
이 보고서에는 수평으로 스크롤해야 페이지의 글자와 이미지를 볼 수 있는 페이지가 표시됩니다. 이는 페이지가 CSS 선언에서 절대값을 사용하거나 특정 브라우저 너비(예: 980픽셀)에서 최적의 상태로 표시되도록 설계된 이미지를 사용할 때 발생합니다. 이 오류를 수정하려면 페이지에서 CSS 요소에 관련된 너비 및 위치 값을 사용할 뿐만 아니라 이미지도 배율을 조정할 수 있어야 합니다. 표시 영역에 맞게 콘텐츠 크기 조정에 관해 자세히 알아보세요.
해결방법
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…메타 뷰포트 값 사용 width=device-width 페이지에 장치 독립 픽셀의 화면 너비와 일치하도록 지시한다. 장치(또는 밀도) 독립 픽셀은 단일 픽셀을 나타내며, 고밀도 화면에서 많은 물리적 픽셀로 구성될 수 있다. 이를 통해 작은 휴대 전화나 대형 데스크탑 모니터에 렌더링되든 간에 페이지 콘텐츠가 다른 화면 크기에 맞게 리플로우를 할 수 있다.
일부 브라우저에서는 가로 모드로 회전할 때 페이지의 너비를 일정하게 유지하고 화면을 채우기 위해 리플로우가 아닌 줌을 한다. 값 추가 initial-scale=1 브라우저에 장치 방향에 관계없이 CSS 픽셀과 장치 독립 픽셀 사이에 1:1 관계를 설정하도록 지시하고 페이지가 전체 가로 폭을 활용할 수 있도록 한다.
액세스 가능한 뷰포트 확인
설정 외에 initial-scale뷰포트에서 다음 속성을 설정할 수도 있다.
minimum-scalemaximum-scaleuser-scalable
설정된 경우, 사용자가 뷰포트를 확대/축소할 수 없도록 설정하여 접근성 문제를 잠재적으로 유발할 수 있다. 그러므로 우리는 이 속성들을 사용하는 것을 추천하지 않을 것이다.
이미지
이미지의 치수는 고정되어 있으며 뷰포트보다 크면 스크롤 막대가 발생한다. 이 문제를 해결하는 일반적인 방법은 모든 이미지를 max-width 의 100%. 이렇게 하면 이미지보다 뷰포트 크기가 작은 경우 이미지가 있는 공간에 맞게 축소된다. 하지만 그 이유는 max-width,보다 width 이다 100%이미지가 자연 크기보다 크게 늘어나지 않을 것이다. 스크롤 막대를 유발하는 이미지에 문제가 발생하지 않도록 스타일시트에 다음을 추가하는 것이 일반적으로 안전하다.
img {
max-width: 100%;
display: block;
}
배치
CSS 픽셀의 화면 치수와 너비는 기기(예: 전화기와 태블릿 사이, 심지어 다른 전화기 사이)에 따라 매우 다르므로 콘텐츠는 잘 렌더링하기 위해 특정 뷰포트 너비에 의존해서는 안 된다.
과거에는 이 설정 요소가 백분율로 레이아웃을 만드는 데 사용되었다. 아래 예에서는 픽셀을 사용한 크기의 부동 요소가 있는 2열 레이아웃을 볼 수 있다. 일단 뷰포트가 열의 전체 너비보다 작아지면, 우리는 내용을 보기 위해 수평으로 스크롤해야 한다.
Flexbox
이 레이아웃 방법은 크기가 다른 항목 세트를 가지고 있을 때 이상적인데, 작은 항목은 공간을 덜 차지하며 큰 항목은 공간을 더 많이 차지하여 줄이나 행에 편안하게 맞기를 원할 것이다.
.items {
display: flex;
justify-content: space-between;
}응답성이 뛰어난 설계에서는 Flexbox를 사용하여 항목을 단일 행으로 표시하거나 사용 가능한 공간이 줄어들면 여러 행으로 래핑할 수 있다.
CSS 그리드 레이아웃
CSS 그리드 레이아웃은 유연한 그리드를 직접 만들 수 있다. 만약 우리가 백분율로 우리의 기둥을 만들기 보다는, 앞에서 띄운 예를 고려한다면, 우리는 그리드 레이아웃과 fr 컨테이너에서 사용 가능한 공간의 일부를 나타내는 단위.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
다중 열 레이아웃
일부 레이아웃 유형의 경우 다중 열 레이아웃(멀티콜)을 사용할 수 있으며, 이 경우 열 레이아웃을 사용하여 응답할 수 있는 열 수를 column-width 재산 아래 데모에서는 다른 데모를 위한 공간이 있을 경우 열이 추가된 것을 볼 수 있다.
응답성을 위해 CSS 미디어 쿼리 사용
때로는 위에 표시된 기법이 허용하는 것보다 특정 화면 크기를 지원하기 위해 레이아웃을 더 광범위하게 변경해야 할 수 있다. 여기서 미디어 쿼리가 유용해진다.
미디어 쿼리는 CSS 스타일에 적용할 수 있는 간단한 필터다. 그들은 콘텐츠를 렌더링하는 장치의 유형 또는 그 장치의 특징(예: 너비, 높이, 방향, 맴도는 능력, 그리고 장치가 터치스크린으로 사용되고 있는지 여부)에 따라 스타일을 쉽게 변경할 수 있도록 한다.
인쇄에 다른 스타일을 제공하려면 다음과 같이 인쇄 스타일이 있는 스타일시트를 포함할 수 있도록 출력 유형을 지정해야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…또는 미디어 쿼리를 사용하여 기본 스타일시트에 인쇄 스타일을 포함시킬 수 있다.
@media print {
/* print styles go here */
}또한 다음을 사용하여 기본 CSS 파일에 개별 스타일시트를 포함할 수도 있다. @import 구문, @import url(print.css) print;그러나 성능상의 이유로 이 사용은 권장되지 않는다. 자세한 내용은 CSS 가져오기 방지를 참조하십시오.
응답성이 높은 웹 디자인을 위해 우리는 일반적으로 작은 화면을 위한 다른 레이아웃을 제공하기 위해 또는 방문자가 터치스크린을 사용하고 있다는 것을 감지하기 위해 장치의 특징을 쿼리하고 있다.
뷰포트 크기를 기준으로 한 미디어 쿼리
미디어 질의를 통해 우리는 작은 화면, 큰 화면, 그리고 그 중간 어느 곳에나 특정 스타일이 적용되는 반응형 경험을 만들 수 있다. 우리가 여기서 감지하는 기능은 그러므로 화면 크기인데, 우리는 다음과 같은 것들을 테스트할 수 있다.
width (min-width, max-width)height (min-height, max-height)orientationaspect-ratio
장치 기능에 기반한 미디어 쿼리
사용 가능한 기기의 범위를 고려할 때, 우리는 모든 큰 기기가 일반 데스크탑 또는 랩톱 컴퓨터라고 가정할 수 없으며, 사람들이 작은 기기에 터치스크린만 사용하고 있다고 가정할 수 없다. 미디어 쿼리 사양에 새로 추가된 몇 가지 기능으로 장치와 상호 작용하는 데 사용되는 포인터 유형 및 사용자가 요소 위를 맴돌 수 있는지 여부를 테스트할 수 있다.
hoverpointerany-hoverany-pointer
'Marketing > Google Search Console' 카테고리의 다른 글
| 구글 서치콘솔 소유자 인증 메타 태그 재확인 방법 (0) | 2022.08.09 |
|---|---|
| [모바일 사용 편의성] 클릭할 수 있는 요소가 서로 너무 가까움 (0) | 2021.06.18 |
| 제출된 URL이 Soft 404를 반환합니다.(Soft 404 errors) (0) | 2021.06.18 |
