반응 형 웹 사이트를 만들기 위해 미디어 쿼리와 최신 CSS 레이아웃 (예 : flexbox 및 grid)을 사용하는 것 외에도 반응 형 사이트를 만들기 위해 잘 할 수 있는 간과 된 작업이 있습니다. 

이 기사에서는 반응 형 이미지에서 미디어 쿼리 사용 여부에 관계없이 자연스럽게 작동하는 비교적 새로운 CSS 기능에 이르기까지 준비된 여러 도구 (HTML 및 CSS 중심으로 회전)를 살펴 봅니다.

https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs

실제로 미디어 쿼리는 전체 접근 방식이 아닌 이러한 기능과 함께 사용될 때 더 많은 보완책이 됩니다. 어떻게 작동하는지 봅시다.

진정한 반응형 이미지 

너비를 100%로 축소하고 하루라고 할 수 있었던 때를 기억하십니까? 

물론 여전히 작동하고 이미지가 지저분하게 만들지 만 그와 함께 제공되는 여러 가지 단점이 있으며 그중 가장 주목할만한 것은 다음과 같습니다.

• 이미지가 초점을 잃을 정도로 찌그러질 수 있습니다.
• 더 작은 장치는 여전히 전체 크기 이미지를 다운로드합니다.

웹에서 이미지를 사용할 때 이미지의 해상도와 크기가 최적화되었는지 확인해야 합니다. 그 이유는 올바른 기기에 맞는 올바른 이미지 해상도를 갖도록 하기 위해서 입니다. 따라서 사이트의 성능을 저하 시킬 수 있는 작은 화면에 정말 크고 무거운 이미지를 다운로드하지 않습니다.

간단히 말해서, 더 큰 고해상도 이미지는 더 큰 화면으로 전송되고 더 작은 저해상도 변형은 더 작은 화면으로 전송되어 성능과 사용자 환경이 모두 향상됩니다.

HTML은 추가 한 미디어 쿼리를 기반으로 렌더링 될 정확한 이미지 리소스를 지정할 수 있는 <picture> 요소를 제공합니다. 앞서 설명한 것처럼 하나의 이미지 (일반적으로 큰 고해상도 버전)를 모든 화면 크기로 전송하고 이를 뷰포트 너비로 조정하는 대신 특정 상황에서 제공 할 이미지 세트를 지정합니다.

<picture> <source media="(max-width:1000px)" srcset="picture-lg.png"> <source media="(max-width:600px)" srcset="picture-mid.png"> <source media="(max-width:400px)" srcset="picture-sm.png"> <img src="picture.png" alt="picture""> </picture> 

이 예에서 picture.png는 전체 크기 이미지입니다. 여기에서 다음으로 큰 이미지 버전 인 picture-lg.png를 정의하고 크기가 가장 작은 버전 인 picture-sm.png까지 내림차순으로 줄어 듭니다. 이 접근 방식에서는 여전히 미디어 쿼리를 사용하고 있지만 CSS에서 중단 점을 정의하는 대신 반응 형 동작을 유도하는 것은 <picture> 요소 자체입니다.

미디어 쿼리는 그림의 크기에 맞게 적절하게 추가됩니다.

• 1000px 이상의 뷰포트는 picture.png를 얻습니다.
• 601px에서 999px 사이의 뷰포트는 picture-lg.png를 가져옵니다.
• 401px에서 600px 사이의 뷰포트는 picture-sm.png를 가져옵니다.
• 400px보다 작은 것은 picture-sm.png를 얻습니다.

흥미롭게도 URL 뒤에 이미지 밀도 (1x, 2x, 3x 등)별로 각 이미지에 라벨을 지정할 수도 있습니다. 이것은 우리가 서로 비례하여 다른 이미지를 만든 경우에 작동합니다. 이를 통해 브라우저는 뷰포트 크기와 함께 화면의 픽셀 밀도를 기반으로 다운로드 할 버전을 결정할 수 있습니다. 그러나 우리가 정의하는 이미지 수에 유의하십시오.

<picture> <source media="(max-width:1000px)" srcset="picture-lg_1x.png 1x, picture-lg_2x.png 2x, picture-lg_3x.png 3x"> <source media="(max-width:600px)" srcset="picture-mid_1x.png 1x, picture-mid_2x.png 2x, picture-mid_3x.png 3x"> <source media="(max-width:400px)" srcset="picture-small_1x.png 1x, picture-small_2x.png 2x, picture-small_1x.png 3x"> <img src="picture.png" alt="picture""> </picture> 

<picture> 요소 내에 중첩 된 두 태그 인 <source> 및 <img>를 구체적으로 살펴 보겠습니다.

이미지 밀도를 사용하여 srcset 속성을 사용하는 <img> 요소만으로 반응 형 이미지를 처리 ​​할 수도 있습니다.

<img srcset=" flower4x.png 4x, flower3x.png 3x, flower2x.png 2x, flower1x.png 1x " src="flower-fallback.jpg" > 

우리가 할 수 있는 또 다른 일은 장치 뷰포트 뿐만 아니라 장치 자체의 화면 해상도 (일반적으로 dpi로 측정)를 기반으로 CSS에 미디어 쿼리를 작성하는 것입니다. 이것이 의미하는 바는 다음과 같습니다.

@media only screen and (max-width: 600px) { /* Style stuff */ } 

이제 다음이 있습니다.

@media only screen and (min-resolution: 192dpi) { /* Style stuff */ } 

이 접근 방식을 사용하면 장치 자체의 화면 해상도에 따라 렌더링 할 이미지를 지정할 수 있으므로 고해상도 이미지를 처리 ​​할 때 유용 할 수 있습니다. 기본적으로 이는 고해상도를 지원하는 화면과 저해상도에서 더 작은 버전을 지원하는 화면에 고품질 사진을 표시 할 수 있음을 의미합니다. 휴대 기기의 화면은 작지만 일반적으로 고해상도라는 점은 주목할 가치가 있습니다. 즉, 렌더링 할 이미지를 결정할 때 해상도에만 의존하는 것이 최선의 방법이 아닐 수 있습니다. 그 결과 매우 작은 화면에 큰 고해상도 이미지를 제공 할 수 있으며, 이는 우리가 그렇게 작은 화면 크기로 표시하려는 버전이 아닐 수 있습니다.

body { background-image : picture-md.png; /* the default image */ } 
 @media only screen and (min-resolution: 192dpi) { body { background-image : picture-lg.png; /* higher resolution */ } } 

<그림>이 우리에게 주는 것은 기본적으로 이미지를 직접 그리는 능력입니다. 그리고 이 아이디어에 따라 object-fit 속성과 같은 CSS 기능을 활용할 수 있습니다. object-position과 함께 사용하면 이미지의 가로 세로 비율을 유지하면서 더 나은 초점을 위해 이미지를 자를 수 있습니다.

따라서 이미지의 초점을 변경하려면 :

@media only screen and (min-resolution: 192dpi) { body { background-image : picture-lg.png; object-fit: cover; object-position: 100% 150%; /* moves focus toward the middle-right */ } } 

CSS에서 최소 및 최대 값 설정 

min() 함수는 요소가 축소 될 수 있는 절대 최소 크기를 지정합니다. 이 기능은 유동적 유형이 읽을 수 있는 글꼴 크기 아래로 떨어지지 않도록 하는 것과 같이 다양한 화면 크기에 맞게 텍스트 크기를 적절하게 확장하는 데 매우 유용합니다.

html { font-size: min(1rem, 22px); /* Stays between 16px and 22px */ } 

min ()은 두 개의 값을 허용하며 상대, 백분율 또는 고정 단위 일 수 있습니다. 이 예에서는 .box 클래스가 있는 요소가 뷰포트 너비를 기준으로 가장 작은 45 % 너비 또는 600px 아래로 내려 가지 않도록 브라우저에 지시합니다.

.box { width : min(45%, 600px) } 

45 %가 600px보다 작은 값으로 계산되면 브라우저는 45 %를 너비로 사용합니다. 반대로 45 %가 600px보다 큰 값으로 계산되면 600px가 요소의 너비로 사용됩니다.

max() 함수도 마찬가지입니다. 또한 두 개의 값을 허용하지만 요소에 대해 가장 작은 크기를 지정하는 대신 얻을 수 있는 가장 큰 값을 정의합니다.

.box { width : max(60%, 600px) } 

60 %가 600px보다 큰 값으로 계산되면 브라우저는 60 %를 너비로 사용합니다. 반대로 60 %가 600px보다 작은 값으로 계산되면 600px가 요소의 너비로 사용됩니다.

Clamping values 

우리 중 많은 사람들이 한동안 clamp()를 요구해 왔으며 실제로 모든 최신 브라우저 (죄송합니다, Internet Explorer)에서 광범위한 지원을 받고 있습니다. clamp()는 min() 및 max() 함수의 조합으로 다음 세 가지 매개 변수를 받습니다.

1. 최소값,
2. 선호하는 값
3. 최대 값

예를 들면 :

.box { font-size : clamp(1rem, 40px, 4rem) } 

브라우저는 1rem의 계산 된 값이 40px보다 클 때까지 글꼴을 1rem으로 설정합니다. 그리고 계산 된 값이 40px 이상이면? 네, 브라우저는 4rem에 도달 한 후 크기 증가를 중지합니다. 미디어 쿼리에 도달하지 않고도 요소를 유동적으로 만드는 데 clamp ()를 사용하는 방법을 알 수 있습니다.

반응 형 장치 작업 

큰 제목 또는 부제목이 있는 페이지를 만들고 데스크톱 화면에서 얼마나 멋지게 보 였는지 감탄 해 본 적이 있습니까? 휴대 기기에서 확인하고 그것이 너무 크다는 것을 알게 된 적이 있습니까? 나는 확실히 이런 상황에 처해 왔으며 이 섹션에서는 그러한 문제를 처리하는 방법을 설명 할 것입니다.

CSS에서 다양한 측정 단위를 사용하여 요소의 크기 또는 길이를 결정할 수 있으며 가장 많이 사용되는 측정 단위는 px, em, rem, %, vw 및 vh입니다. 하지만 자주 사용되지 않는 유닛이 몇 개 더 있습니다. 흥미로운 점은 px는 절대 단위로 간주되고 나머지는 상대적 단위로 간주된다는 것입니다.

절대 단위 

픽셀 (px)은 고정되어 있고 다른 요소의 측정에 따라 변경되지 않기 때문에 절대 단위로 간주됩니다. 다른 상대 단위가 사용하는 기본 단위 또는 루트 단위로 간주 할 수 있습니다. 반응 형 동작에 픽셀을 사용하려고 하면 문제가 해결되기 때문에 문제가 발생할 수 있지만 크기를 전혀 조정하지 않아야 하는 요소가 있는 경우 유용합니다.

상대 단위 

%, em 및 rem과 같은 상대 단위는 주로 다양한 화면 크기로 확장 할 수 있기 때문에 반응 형 디자인에 더 적합합니다.

• vw: Relative to the viewport’s width
• vh: Relative to the viewport’s height
• rem: Relative to the root (<html>) element (default font-size is usually 16px )
• em: Relative to the parent element
• %: Relative to the parent element

다시 말하지만, 대부분의 브라우저의 기본 글꼴 크기는 16px이며 rem 단위가 계산 된 값을 생성하는 데 사용하는 것입니다. 

따라서 사용자가 브라우저에서 글꼴 크기를 조정하면 페이지의 모든 항목이 루트 크기에 따라 적절하게 조정됩니다. 

예를 들어, 16px로 설정된 루트를 처리 할 때 지정하는 숫자는 해당 숫자에 기본 크기를 곱합니다. 예를 들면 :

.8rem = 12.8px (.8 * 16) 1rem = 16px (1 * 16) 2rem = 32px (2 * 16) 

귀하 또는 사용자가 기본 크기를 변경하면 어떻게 됩니까? 이미 말했듯이 이것은 상대적 단위이며 최종 크기 값은 새로운 기본 크기를 기반으로 합니다. 이는 글꼴 크기 만 변경하면 전체 페이지가 그에 따라 확대 또는 축소되는 미디어 쿼리 내에서 유용합니다.

예를 들어 CSS 내에서 글꼴 크기를 10px로 변경하면 계산 된 크기는 다음과 같이 됩니다.

html { font-size : 10px; } 

1rem = 10px (1 * 10) 2rem = 20px (2 * 10) .5rem = 5px (.5 * 10) 

참고 : 이는 백분율 %에도 적용됩니다. 예를 들면 :

100% = 16px; 200% = 32px; 50% = 8px; 

그리고 rem과 em 단위의 차이점은 무엇입니까? 단위가 기본 요소로 사용하는 것입니다. rem은 루트 (<html>) 요소의 글꼴 크기를 사용하여 값을 계산하는 반면, em 값을 선언하는 요소는 이를 포함하는 상위 요소의 글꼴 크기를 참조합니다. 지정된 부모 요소의 크기가 루트 요소와 다른 경우 (예 : 부모 요소는 18px이지만 루트 요소는 16px) em 및 rem은 다른 계산 된 값으로 확인됩니다. 

이를 통해 요소가 다양한 반응 컨텍스트에서 반응하는 방식을보다 세밀하게 제어 할 수 있습니다.

vh는 뷰포트 높이 또는 볼 수 있는 화면 높이의 약어입니다. 100vh는 뷰포트 높이의 100 %를 나타냅니다 (기기에 따라 다름). 

같은 맥락에서 vw는 뷰포트 너비를 나타내며 장치의 볼 수 있는 화면 너비를 의미하며 100vw는 말 그대로 뷰포트 너비의 100 %를 나타냅니다.

미디어 쿼리를 넘어서 

우리는 응답 성을 구축 할 수 있는 추가 (그리고 가능한 더 효과적인) 방법을 제공하는 매우 강력하고 비교적 새로운 HTML 및 CSS 기능을 살펴 보았습니다. 이러한 새로운 기술이 우리가 계속해온 일을 대체하는 것은 아닙니다. 개발자 도구 벨트에서 요소가 서로 다른 컨텍스트에서 작동하는 방식을 더 잘 제어 할 수 있는 도구 일 뿐입니다. 글꼴 크기, 해상도, 너비, 초점 또는 여러 가지 작업에 관계없이 사용자 경험을 그 어느 때보 다 더 세밀하게 제어 할 수 있습니다.

따라서 다음에 특정 장치에서 디자인의 정확한 모양과 느낌을 더 잘 제어하기를 원하는 프로젝트에서 작업 할 때 네이티브 HTML 및 CSS가 도움이 될 수 있는 작업을 확인하세요.