들어가기 전에
두 가지의 실습 예제를 준비했습니다. 준비된 예제의 조건을 만족하는 미디어 쿼리를 같이 작성해봅니다.
그리고 브라우저의 개발자 도구의 가상 미디어 환경을 이용해서 작성된 미디어 쿼리를 확인하는 방법을 배웁니다.
핵심 키워드
- min-width
- max-width
학습하기
들어가기 전에
두 가지의 실습 예제를 준비했습니다. 준비된 예제의 조건을 만족하는 미디어 쿼리를 같이 작성해봅니다.
그리고 브라우저의 개발자 도구의 가상 미디어 환경을 이용해서 작성된 미디어 쿼리를 확인하는 방법을 배웁니다.
핵심 키워드
학습하기
실습 1. 디스플레이 크기에 따른 body요소의 background-color 변경
세부 조건
width 미디어 특성을 이용해서 뷰포트 가로 크기에 따라 배경 색상이 변경되는 예제를 만들어봅니다.
@media (max-width: 767px) {
body { background-color: gold; }
}
@media (min-width: 768px) and (max-width: 1024px) {
body { background-color: lightblue; }
}
@media (min-width: 1025px) {
body { background-color: lightpink; }
}
위 코드의 경우, 3개의 조건을 만족하기 위해 3개의 미디어 쿼리를 작성했습니다.
위 코드도 우리가 의도한 대로 정상적으로 잘 동작하지만,
1개의 조건을 기본 body 요소의 배경 색상으로 지정해놓게되면 다른 2개의 미디어 쿼리만 이용해도 가능합니다.
어떤 조건을 기본으로 정할지는 작성하는 사이트가 모바일 사이트인지, 데스크탑 사이트인지를 먼저 구분해야 합니다.
모바일 중심의 사이트라면(모바일 first) 모바일에 해당하는 조건의 배경 색상을 기본으로 선언하면 되고,
데스크탑 중심의 사이트라면(데스크탑 first) 데스크탑에 해당하는 조건의 배경 색상을 기본으로 선언해놓으면 됩니다.
만들어진 미디어 쿼리를 수정해서, 모바일 first인 경우 또 데스크탑 first인 경우대로 한번씩 작성을 해보겠습니다.
- mobile first
/* mobile first*/
body { background-color: gold; }
@media (min-width: 768px) and (max-width: 1024px) {
body { background-color: lightblue; }
}
@media (min-width: 1025px) {
body { background-color: lightpink; }
}
- desktop first
/* desktop first*/
body { background-color: lightpink; }
@media (min-width: 768px) and (max-width: 1024px) {
body { background-color: lightblue; }
}
@media (max-width: 767px) {
body { background-color: gold; }
}
실습 2. 웹 페이지를 인쇄하는 경우의 스타일 추가
세부 조건
미디어 타입 print를 이용하면, 인쇄될 경우에 적용되는 스타일을 추가할 수 있습니다.
먼저 앵커 요소의 url 을 텍스트 뒤에 붙여서 나타나게 하고, 링크임을 표시해주는 밑줄도 제거를 하겠습니다.
웹 페이지를 인쇄할 경우에는 앵커 요소가 가리키는 url을 문서에 같이 출력해주는게 내용을 이해하는데 훨씬 좋습니다.
실제 인쇄를 하지 않더라도 브라우저에서 제공하는 인쇄 미리보기 기능을 이용하면 화면으로 확인이 가능합니다.
@media print {
a { text-decoration: none; }
a:after { display: inline; content: '(' attr(href) ')'; }
}
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Media Queries</title>
<style>
/* 1 */
@media (max-width: 767px) {
body { background-color: gold; }
}
@media (min-width: 768px) and (max-width: 1024px) {
body { background-color: lightblue; }
}
@media (min-width: 1025px) {
body { background-color: lightpink; }
}
/* 2 mobile first*/
body { background-color: gold; }
@media (min-width: 768px) {
body { background-color: lightblue; }
}
@media (min-width: 1025px) {
body { background-color: lightpink; }
}
/* 3 desktop first*/
body { background-color: lightpink; }
@media (max-width: 1024px) {
body { background-color: lightblue; }
}
@media (max-width: 767px) {
body { background-color: gold; }
}
/* 4 print */
@media print {
a { text-decoration: none; }
a:after { display: inline; content: '(' attr(href) ')'; }
}
</style>
</head>
<body>
<p>W3C는 <a href="https://www.w3.org/TR/css3-mediaqueries/">CSS3 미디어쿼리 문서</a>를 2012년 6월에 표준 권고안으로 제정하였습니다.</p>
<p>또한, 기존의 미디어쿼리 개선 작업을 진행 중이며, 2017년 9월에 <a href="https://www.w3.org/TR/mediaqueries-4/">미디어쿼리 레벨4</a>를 발표했습니다. 이 문서는 현재 유력 표준 권고안입니다.</p>
</body>
</html>
참고자료
https://www.w3.org
https://www.w3.org
comment
설명을 정말 잘 해주시는 것 같습니다. 감사합니다 !
@media screen and (max-width: 980px) {
body { background-color: gold; }
}
이 구문을 적용했을 때, 767px 로 설정하면 배경화면이 변하지 않고, 980px(979px도 안됨)로 적용했을 때 부터 백그라운드컬러가 변경되는데, 혹시 실행환경 브라우저 설정 문제일까요? (크기 부분만 수정해서 실행할 때마다 되고 안되고 하니 이유를 잘 모르겠네요)
브라우저는 크롬 > 검사 > Responsive 에서 확인했습니다.
@media screen and (max-width: 980px) { /* 적용됨 */
body { background-color: gold; }
}
@media screen (min-width: 981px) and (max-width: 1024px) { /* 적용안됨 */
body { background-color: lightblue; }
}
@media screen and (min-width: 1025px) { /* 적용됨 */
body { background-color: lightpink; }
}