당신이 알아야 할 9가지 고급 미디어 쿼리 CSS 트릭
미디어 쿼리는 한동안 반응성이 뛰어나고 기기에 적합한 디자인을 가능하게 했습니다. 이러한 고급 쿼리는 작업을 한 단계 더 발전시킵니다.
사용 가능하고 접근 가능한 경험은 성공적인 웹사이트에 필수적입니다. 독자가 긍정적인 경험을 하면 제품 구매를 포함한 행동 촉구를 수행할 가능성이 더 높습니다. 또한 귀하의 사이트를 다른 사람에게 반환하거나 추천할 가능성도 더 높습니다. 경험이 핵심입니다.
미디어 쿼리는 웹사이트를 사용자 정의할 수 있는 다양한 CSS 기능을 제공합니다. 이를 통해 각 사용자의 장치 기능에 따라 경험을 맞춤화할 수 있습니다. 독자가 휴대폰을 사용하든 대형 데스크탑 모니터를 사용하든 관계없이 독자에게 최고의 경험을 제공하는 방법을 알아보세요.
1. 포인터 기능
@media 규칙에는 기본 포인팅 장치를 기반으로 디자인을 맞춤설정할 수 있는 포인터 기능이 있습니다. 가용성과 품질을 테스트할 수 있습니다.
이 포인터 미디어 쿼리 기능은 없음, 대략 또는 좋음의 세 가지 값 중 하나를 사용합니다. 포인팅 장치가 없는 경우 none 값이 적용됩니다. 기본 포인팅 장치의 정확도가 낮은 경우 대략 값이 적용됩니다. 그리고 fine 값은 기본 포인팅 장치의 정확도가 높은 경우에 적용됩니다.
포인터 기능 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input[type="radio"] {
appearance: none;
border: solid;
border-color: black;
margin: 0;
}
input[type="radio"]:checked {
background: red;
}
@media (pointer: fine) {
input[type="radio"] {
width: 15px;
height: 15px;
border-radius: 20px;
border-width: 1px;
}
}
@media (pointer: coarse) {
input[type="radio"] {
width: 25px;
height: 25px;
border-radius: 20px;
border-width: 2px;
}
}
</style>
<title>Pointer</title>
</head>
<body>
<label for="options">Options to Choose From: </label>
<input type="radio" id="options" > Option One
<input type="radio" id="options" > Option Two
</body>
</html>
위의 코드는 컴퓨터의 기본 포인팅 장치의 정확도에 따라 달라지는 두 가지 입력 라디오 옵션을 생성합니다.
정확한(또는 고품질) 기본 포인팅 장치가 있는 컴퓨터에는 다음 웹 페이지가 표시됩니다.
정확도가 제한되거나 품질이 낮은 기본 장치가 있는 컴퓨터에는 다음 웹 페이지가 표시됩니다.
정확도가 제한된 기본 포인팅 장치가 있는 장치에는 더 큰 라디오 버튼이 있습니다. 이는 이러한 사용자에게 더 나은 사용자 경험을 제공합니다. 포인터 기능을 사용하면 모든 사용자가 장치에 관계없이 즐거운 경험을 누릴 수 있습니다.
2. 모든 포인터 기능
포인터 기능과 마찬가지로 모든 포인터 미디어 쿼리 기능은 포인팅 장치를 대상으로 합니다. 그러나 모든 포인터 기능은 컴퓨터의 모든 포인팅 장치를 평가합니다. 모든 포인터 기능은 none, coarse 및 fine 값도 사용합니다.
모든 포인터 기능 사용
@media (any-pointer: fine) {
input[type="radio"] {
width: 15px;
height: 15px;
border-radius: 20px;
border-width: 1px;
}
}
@media (any-pointer: coarse) {
input[type="radio"] {
width: 25px;
height: 25px;
border-radius: 20px;
border-width: 2px;
}
}
위의 코드를 포인터 기능 예제에 있는 코드의 미디어 쿼리 섹션으로 간단히 대체할 수 있습니다. 위의 코드는 컴퓨터에 있는 포인팅 장치의 품질에 따라 적절한 디스플레이를 렌더링합니다.
3. 호버 기능
호버 미디어 쿼리 기능은 장치의 기본 입력 메커니즘이 UI의 요소 위로 마우스를 가져갈 수 있는지 여부를 평가합니다.
호버 기능 사용
/* CSS */
a{
text-decoration: none;
color: black;
}
@media (hover: hover) {
a:hover {
color: blue;
}
}
<!-- HTML -->
<a href="#"> A link element</a>
위의 코드는 요소를 표시합니다. 장치의 기본 입력 메커니즘(호버링 지원)이 위에 마우스를 올리면 색상(검은색에서 파란색으로)이 변경됩니다.
4. 아무 호버 기능
마우스를 올리면 미디어 쿼리는 기본 입력 메커니즘을 포함한 모든 입력 메커니즘을 대상으로 합니다.
아무 호버 기능 사용하기
@media (any-hover: hover) {
a:hover {
color: blue;
}
}
위의 미디어 쿼리는 요소 위로 마우스를 가져갈 수 있는 모든 입력 메커니즘에 대해 마우스 오버 효과를 생성합니다.
5. 해상도 기능
해상도 미디어 쿼리 기능은 특정 장치에서 표시되는 픽셀 수를 계산합니다. 인치당 더 많은 픽셀을 표시하는 장치는 이미지를 더 자세하게 표시하므로 해상도가 더 좋습니다. 이 기능은 개발자가 어떤 장치 사용자가 UI의 요소를 더 명확하게 볼 수 있는지 결정하는 데 도움이 될 수 있습니다.
해상도 기능은 범위를 사용합니다. 이는 해상도 키워드를 사용할 뿐만 아니라 최소 해상도 및 최대 해상도를 사용할 수 있음을 의미합니다. 미디어 쿼리 해결 기능은 해결 데이터 유형에 속합니다. 이는 해상도 기능이 인치당 도트(dpi), 센티미터당 도트(dpcm) 또는 픽셀당 도트(dppx)의 세 가지 단위 중 하나로 측정 가능함을 의미합니다.
해상도 기능 사용하기
/* CSS */
@media (min-resolution: 72dpi) {
p {
color: white;
background-color: blue;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</p>
장치가 가질 수 있는 가장 낮은 해상도와 여전히 고품질 이미지를 표시할 수 있는 것은 72dpi입니다. 따라서 장치의 해상도가 72dpi 이상인 경우 브라우저에 다음 출력이 표시됩니다.
6. 오리엔테이션 기능
기기 표시 영역은 세로 또는 가로의 두 가지 방향 중 하나만 가질 수 있습니다. 뷰포트 방향은 장치 방향과 다릅니다. 장치가 소프트 키보드를 사용하는 경우 장치 자체가 여전히 세로 위치에 있는 동안 뷰포트가 세로에서 가로로 변경될 수 있습니다.
방향 기능 사용
/* CSS */
body{
display: flex;
}
section{
border: 2px solid blue;
padding: 3px;
margin: 3px;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
<!-- HTML -->
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
위의 코드는 기기의 방향에 따라 웹페이지 기반의 레이아웃을 변경합니다.
가로 모드의 뷰포트가 있는 장치에는 다음 웹페이지가 표시됩니다.
세로 모드의 뷰포트가 있는 장치에는 다음 웹페이지가 표시됩니다.
7. 높이 기능
높이 미디어 쿼리 기능을 사용하면 사용자 장치의 뷰포트 높이를 기반으로 CSS 스타일을 지정할 수 있습니다. 이 기능은 범위를 지원하므로 최소 높이 및 최대 높이 키워드를 사용할 수도 있습니다.
높이 기능 사용
/* CSS */
@media (min-height: 360px) {
p{
border: 2px dotted orangered;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
위의 코드는 기기의 높이에 따라 사용자에게 표시되는 내용을 맞춤설정합니다. 기기 높이가 360px 이상인 사용자에게는 다음 웹페이지와 유사한 내용이 표시됩니다.
높이가 360px 미만인 장치에서는 웹페이지 단락 주위에 테두리가 표시되지 않습니다.
8. 폭의 특징
너비 미디어 쿼리 기능을 사용하면 사용자 장치의 뷰포트 너비를 기반으로 특정 CSS 스타일을 만들 수 있습니다. 이 기능은 범위도 지원하므로 min-width 및 max-width 키워드를 사용할 수 있습니다.
너비 기능 사용
/* CSS */
@media (min-width: 600px) {
p{
border: 2px solid purple;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
위의 코드는 기기의 너비에 따라 사용자에게 표시되는 내용을 맞춤설정합니다. 600px 이상의 장치 너비를 가진 사용자에게는 다음 웹 페이지와 같은 내용이 표시됩니다.
너비 및 높이 기반 미디어 쿼리를 사용하는 것은 웹 사이트를 반응형으로 만드는 효과적인 전략이 될 수 있습니다.
9. 색상의 특징
색상 미디어 쿼리 기능은 장치의 색상 구성 요소(빨간색, 녹색, 파란색)를 평가합니다. 값은 디스플레이가 각 구성 요소에 사용하는 비트 수를 나타내며, 이는 표시할 수 있는 색상 수를 정의합니다. 최신 장치는 일반적으로 색상 구성 요소당 8비트를 사용하는 24비트 디스플레이를 사용합니다. 또한 무색 장치는 0인 정수 값을 사용합니다.
색상 기능은 최소 색상 및 최대 색상 범위도 사용합니다.
색상 기능 사용
/* CSS */
@media (min-color: 7) {
p{
border: 2px solid green;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
색상 구성 요소가 7 이상인 장치는 브라우저에 다음 출력을 표시합니다.
이제 독특한 사용자 경험을 만들 수 있습니다
이러한 고급 미디어 쿼리를 사용하여 웹사이트나 애플리케이션을 방문하는 각 사용자의 경험을 향상할 수 있어야 합니다. 모바일 사용자와 데스크톱 사용자에게 사이트에서 똑같이 긍정적인 경험을 제공하는 것이 중요합니다.
미디어 쿼리는 개발자 기술을 강화할 수 있는 유일한 CSS 도구가 아닙니다.