다양한 장치에서 호환되는 웹사이트를 디자인하는 것은 가능한 한 많은 사용자가 웹사이트에 액세스할 수 있도록 하는 중요한 단계입니다.
그것이 미디어 쿼리가 들어오는 곳입니다. CSS 미디어 쿼리를 사용하면 브라우저가 사용자가 정의한 규칙과 일치할 때만 CSS 규칙을 적용할 수 있습니다. 따라서 사용자가 스마트폰에서 웹 페이지를 보고 있는 경우에만 적용되는 규칙을 정의할 수 있습니다.
이 튜토리얼에서는 반응형 웹 디자인의 기본 사항, 미디어 쿼리 작동 방식, 고유한 CSS 미디어 쿼리를 디자인하는 방법을 예제와 함께 설명합니다. 이 튜토리얼을 읽으면 CSS로 미디어 쿼리를 디자인하는 전문가가 될 것입니다.
반응형 웹 디자인 및 미디어 쿼리
반응형 웹 디자인은 사이트가 다양한 기기와 화면 크기에서 올바르게 렌더링될 수 있도록 개발자가 사이트의 스타일 시트를 최적화하는 일련의 관행을 말합니다.
반응형 웹 디자인이 중요한 이유는 뷰어가 웹 페이지를 보기 위해 사용하는 출력 장치와 브라우저 창 및 화면 크기가 웹 페이지 로드 방식에 영향을 미치기 때문입니다. 웹사이트가 다양한 장치와 화면 크기를 염두에 두고 설계되지 않은 경우 일부 사용자는 웹사이트에 표시되는 모든 콘텐츠를 보는 데 어려움을 겪을 수 있습니다.
반응형 웹 디자인은 flexbox 사용에서 상대적 스타일에 이르기까지 다양한 방식을 포괄하지만 미디어 쿼리는 웹 응답성을 염두에 두고 디자인된 모든 웹사이트의 중요한 부분입니다.
미디어 쿼리를 사용하면 사용된 장치 유형, 장치 방향 및 표시 영역 크기에 따라 웹 페이지에 스타일이 표시되는 방식을 조정할 수 있습니다.
미디어 쿼리를 사용하면 사용자가 사이트를 보는 데 사용하는 다양한 화면과 장치에 따라 웹사이트에서 요소가 다르게 표시되도록 할 수 있습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
미디어 쿼리 구문
CSS에서 미디어 쿼리를 선언하려면 @media를 사용해야 합니다. 규칙. 이 규칙을 사용하면 특정 조건이 true로 평가되는 경우에만 CSS 속성 블록을 실행할 수 있습니다.
다음은 CSS 미디어 쿼리의 기본 구문입니다.
@media media-type and (media-rule) {
// CSS styles
}
이 미디어 쿼리의 주요 구성 요소는 다음과 같습니다.
- @미디어 브라우저에 미디어 쿼리를 생성하도록 지시합니다.
- 미디어 유형 코드가 사용될 미디어 유형입니다(예:화면 또는 인쇄).
- 그리고 미디어 유형과 미디어 규칙을 모두 지정할 때 사용해야 하는 논리 연산자입니다.
- 미디어 규칙 미디어 쿼리의 CSS가 실행되려면 true로 평가되어야 하는 명령문입니다.
- CSS 스타일 media-rule이 true로 평가되는 경우 웹 요소에 적용되는 규칙입니다.
미디어 쿼리와 함께 사용할 수 있는 미디어 유형은 네 가지입니다. 이것들은 모두 인쇄, 화면 및 음성입니다. 기본적으로 all 값은 가 사용되며 각 유형을 쉼표로 구분하여 여러 미디어 유형을 지정할 수 있습니다.
CSS 미디어 규칙
미디어 쿼리에 적용할 수 있는 몇 가지 규칙 유형이 있습니다. 각각을 개별적으로 분해해 보겠습니다.
너비 및 높이
CSS 미디어 규칙과 함께 사용되는 주요 규칙 유형은 장치 너비와 높이입니다. 이러한 규칙을 사용하면 뷰포트 컨테이너의 크기에 따라 웹 요소에 스타일을 적용할 수 있습니다. viewport container라는 용어 사용자가 볼 수 있는 웹 페이지의 영역을 나타냅니다.
너비 및 높이 규칙은 뷰포트가 특정 크기와 정확히 같은 경우 스타일을 적용하는 데 사용됩니다. 따라서 뷰포트의 높이가 500px인 경우 웹 페이지에 있는 모든
태그의 텍스트 색상을 파란색으로 변경하려면 다음 규칙을 사용하면 됩니다.
@media screen and (width: 500px) {
p {
color: blue;
}
} 이 규칙은 모든
태그의 텍스트 색상을 blue으로 설정합니다. 뷰포트의 너비가 정확히 500px인 경우.
그러나 대부분의 경우 범위를 사용하여 미디어 쿼리를 적용하고 싶을 것입니다. 예를 들어 표시 영역 크기가 500px 이상인 경우 웹 페이지의 글꼴 크기를 변경할 수 있습니다. 이것이 min-width 및 min-height 스타일이 필요한 곳입니다.
뷰포트 너비가 500px보다 크면 모든
요소의 텍스트 색상을 파란색으로 변경하려면 다음 규칙을 사용할 수 있습니다.
@media screen and (min-width: 500px) {
p {
color: blue;
}
} 이 규칙은 모든
요소의 텍스트 색상을 파란색으로 설정하지만 뷰포트 너비가 500px 이상인 경우에만 설정됩니다. 이 미디어 쿼리가 작동하는 방식은 min-width:500px 조건이 평가되어 뷰포트 너비가 500px 이상인지 확인합니다. 이 조건이 true로 평가되면 p의 규칙이 스타일이 웹 페이지에 적용됩니다.
방향
또한 미디어 쿼리를 사용하여 장치의 방향에 따라 웹 페이지에 스타일을 적용할 수 있습니다.
사용자가 가로 모드에서 웹 페이지를 보고 있는 경우 모든 h2 요소의 텍스트 크기를 20px로 설정하려고 한다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.
@media (orientation: landscape) {
h2 {
font-size: 20px;
}
} 이 규칙은 사용자가 웹 페이지를 가로 모드로 보고 있는지 확인하고 해당 조건이 true로 평가되면 모든
요소의 글꼴 크기를 20px로 설정합니다.
기본적으로 데스크탑은 가로 방향을 사용합니다.
CSS 미디어 쿼리 예
CSS에서 자신의 미디어 쿼리를 작성하는 방법을 설명하기 위해 두 가지 예제 미디어 쿼리를 살펴보겠습니다.
기본 미디어 쿼리 예:요소 숨기기
웹사이트를 디자인 중이고 This site is in beta라는 상자를 표시하고 싶다고 가정해 보겠습니다. . 모든 모바일 장치에서. 이 상자는 아직 모바일 경험을 테스트하고 있기 때문에 모바일 장치에만 표시되어야 합니다.
다음 코드를 사용하여 이 상자를 만들 수 있습니다.
<html>
<p class="betaBox">This site is in beta.</p>
<html>
<style>
.betaBox {
background-color: orange;
padding: 10px;
}
<style>
@media screen and (max-width: 600px) {
.betaBox {
display: none;
}
} 코드 반환:
코드를 분해해 보겠습니다. HTML 파일에서 This site is in beta라는 텍스트를 포함하는
태그를 정의했습니다. .
태그에 할당된 클래스는 betaBox입니다. .
CSS 파일에서 두 가지 스타일을 지정했습니다. .betaBox 스타일은 클래스 이름이 betaBox인 요소의 배경색을 설정합니다. 주황색으로 바뀌고 요소의 내용과 테두리 사이에 10px 패딩 공간을 만듭니다.
다음 규칙은 미디어 쿼리를 사용합니다. 미디어 쿼리에서 max-width:600px는 뷰포트가 600px보다 좁은 경우에만 스타일 규칙을 적용해야 한다고 브라우저에 알려줍니다. 따라서 사용자가 모바일 장치에서 사이트를 보는 경우 이 스타일이 호출됩니다.
미디어 쿼리가 실행되면 display:none 규칙이 클래스 이름이 .betaBox인 모든 요소에 적용됩니다. .
여러 미디어 쿼리 예:글꼴 크기
이전 예에서는 하나의 미디어 쿼리만 지정했습니다. 그러나 CSS 파일에 여러 미디어 쿼리를 지정할 수 있습니다. 즉, 여러 조건 중 하나가 충족되는지 여부에 따라 웹 페이지의 요소에 특정 스타일을 적용할 수 있습니다.
웹사이트를 디자인하고 있고 화면 크기에 따라
헤더의 글꼴 크기가 변경되기를 원한다고 가정합니다. 다음은 사이트에 적용하려는 규칙입니다.
- 화면 너비가 480픽셀 이하인 경우 헤더의 글꼴 크기는 16픽셀이어야 합니다.
- 화면 너비가 481px 이상 600px 이하인 경우 헤더 글꼴 크기는 20px이어야 합니다.
- 화면 너비가 601픽셀 이상인 경우 헤더 글꼴 크기는 24픽셀이어야 합니다.
다음 세 가지 미디어 쿼리를 사용하여 사용자 화면의 크기에 따라 웹 페이지의 글꼴 크기를 변경할 수 있습니다.
<html>
<h1>This is an example header.</h1>
<html>
<style>
@media screen and (min-width: 480px) {
h1 {
font-size: 16px;
}
}
@media screen and (min-width: 481px) and (max-width: 600px) {
h1 {
font-size: 20px;
}
}
@media screen and (min-width: 601px) {
h1 {
font-size: 24px;
}
}
<style>
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
코드가 어떻게 작동하는지 분석해 보겠습니다. HTML 파일에서 This is an example header 텍스트를 표시하는
태그를 사용하여 예제 헤더를 정의했습니다. .
그런 다음 CSS 파일에서 세 가지 미디어 쿼리를 정의했습니다.
첫 번째 미디어 쿼리는 브라우저 뷰포트의 크기가 480px 이하인지 확인하고(max-width:480px 사용) 이 문이 true로 평가되면 모든
요소의 글꼴 크기를 16px로 설정합니다.
두 번째 미디어 쿼리는 뷰포트의 크기가 481px 이상(최소 너비:481px 사용) 및 600px 이하(최대 너비:600px 사용)인지 확인합니다. 이것이 true로 평가되면 모든
요소의 글꼴 크기가 20px로 설정됩니다.
세 번째 미디어 쿼리는 뷰포트의 크기가 601px보다 큰지 확인합니다(최소 너비:601px 사용). 이 규칙이 true로 평가되면 모든
요소의 글꼴 크기가 24px로 변경됩니다. 미디어 쿼리 중단점
중단점은 웹사이트가 미디어 쿼리를 적용할 지점을 설정하는 데 사용됩니다.
미디어 쿼리를 디자인할 때 다음과 같은 질문을 스스로에게 할 수 있습니다. 미디어 쿼리를 설정하려면 어떤 크기를 사용해야 하나요? 반응형 웹 디자인을 막 시작할 때 웹사이트가 렌더링되어야 하는 장치의 크기를 파악하기 어려울 수 있기 때문에 이것은 합리적인 질문입니다.
인터넷에는 특정 화면 크기를 대상으로 하는 목록이 있으며 이는 미디어 쿼리에 대한 중단점을 설정하는 데 유용할 수 있습니다. 그러나 모두 고유한 화면 크기와 사양이 있는 광범위한 장치로 인해 일반적으로 이러한 목록이 모든 주요 요점을 다루지는 않습니다.
미디어 쿼리가 실행되어야 하는 시기를 선택하는 가장 좋은 방법은 웹사이트에서 요소가 찌그러지거나 잘리는 위치를 살펴보는 것입니다. 따라서 모바일 장치에서 완전히 표시되지 않는 요소가 보이면 중단점을 추가해야 할 수도 있습니다.
그런 다음 이러한 지점을 식별하면 사용자 지정 미디어 규칙을 작성할 수 있습니다. 예를 들어 너비가 500px 미만인 장치에서는
그러나 시작하기 위해 다음은 웹사이트를 방문하는 데 사용할 수 있는 주요 기기를 타겟팅하는 데 도움이 될 수 있는 중단점 목록입니다.
- 대부분의 휴대전화:@media 화면 및 (최대 너비:600px) {}
- 세로 태블릿 및 대형 휴대전화:@media 화면 및 (최소 너비:600px) {}
- 가로 방향 태블릿:@media 화면 및 (최소 너비:768px) {}
- 노트북 및 데스크톱 컴퓨터:@media 화면(최소 너비:992px) {}
- 대형 노트북 및 데스크톱 컴퓨터:@media 화면(최소 너비:1200px) {}
이러한 규칙은 미디어 쿼리에 대한 중단점을 결정하는 데 도움이 되지만 웹사이트의 특정 요구 사항에 맞게 몇 가지를 변경해야 할 수도 있습니다.
결론
미디어 쿼리는 CSS에서 웹 페이지에 반응형 디자인을 추가하는 데 사용됩니다. 미디어 쿼리를 사용하면 조건 또는 조건 집합이 충족될 때 특정 스타일을 적용할 수 있습니다. 예를 들어 미디어 쿼리를 사용하여 웹 페이지의 너비가 750px보다 큰 경우 웹 페이지의 글꼴 크기를 변경할 수 있습니다.
이 자습서에서는 예제를 참조하여 반응형 웹 디자인의 기본 사항, 미디어 쿼리 작동 방식 및 미디어 쿼리 작성 방법에 대해 설명했습니다. 이제 전문 웹 디자이너처럼 CSS에서 미디어 쿼리 작업을 시작할 준비가 되었습니다.