미디어쿼리
뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다.
<link ~ media="">
<link rel="stylesheet" type="text/css" media="all and (min-width: 1000px)" href="style_pc.css">최소 가로폭이 1000px, 즉 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다.
태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 또한 다음 트로이(http://troy.labs.daum.net/)에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수 있는 VIEW를 제공합니다.
| 모바일 기기 | 가로 | 세로 |
|---|---|---|
| IPhone X | 375 | 812 |
| IPhone 6, 7, 8 | 375 | 667 |
| IPhone 6, 7, 8 plus | 414 | 736 |
| IPhone 5 | 320 | 568 |
| Galaxy S5, S8 | 360 | 640 |
| Galaxy Note 8 | 360 | 640 |
| IPad Pro | 1024 | 1366 |
| … | … | … |
@media
처음 로딩할 때 성능이 저하되지 않도록 CSS 파일을 하나로 만들어서 CSS 내부에서 조건에 따라 분기시키는 것이 일반적인 형태의 반응형웹 CSS입니다.
@media all and (min-width: 1000px) {
모든 기기에서 해상도가 최소 1000px인 경우 적용할 속성들 ...
}all은 Media Type을 나타냅니다. and 전, 후에 띄어 씁니다.
| Media Type | 설명 |
|---|---|
| all | 모든 미디어 장치에 사용 (기본값) |
| 프린터에 사용 | |
| screen | PC, 태블릿, 스마트폰에 사용 |
| speech | 스크린리더기가 페이지를 읽는 데 사용 |
body {color: red;}
@media only screen and (max-width: 768px) {
body {color: blue;}
}
위 구문은 원래 글자색이 빨간색인데, 화면이 768px보다 작아졌을 때는 파란색으로 지정한다는 뜻이므로 PC에서는 글자 색상이 빨간색으로, 모바일에서는 파란색으로 나타나게 됩니다.
작은 장치에서 페이지를 더 빠르게 표시되게 하려면 모바일 우선으로 설계합니다.
body {color: blue;}
@media only screen and (min-width: 768px) {
body {color: red;}
}
위 구문은 원래 글자색이 파란색인데, 화면이 768px보다 커지면 글자색을 빨간색으로 지정한다는 뜻이므로 모바일 우선으로 하면서도 같은 결과를 가져옵니다.
{
@media only screen and (orientation: portrait) {
body { background: skyblue; }
}
}
위 구문은 모바일 기기를 세워 세로가 가로보다 긴 세로방향이 되면 배경색을 하늘색으로 지정한다는 뜻입니다.
{
@media only screen and (orientation: landscape) {
body { background: lightgreen; }
}
}
위 구문은 모바일 기기를 눕혀 가로가 세로보다 긴 가로방향이 되면 배경색을 연두색으로 지정한다는 뜻입니다.
쉼표로 구분하여 조건을 추가할 수 있습니다.
{
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
body { color: red; }
}
}
위 구문은 가로가 600px에서 900px 사이일 때, 그리고 1100px 이상일 때에만 글자색을 빨간색으로 한다 는 뜻입니다.
@media_예제
모바일, 태블릿, PC에 따라서 레이아웃이 달라지는 media query.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>오르셰미술관</title>
<link rel="stylesheet" href="ex2-75style.css">
</head>
<body>
<div class="wrap">
<header>
<h1>Musee d'Orsay</h1>
</header>
<div id="container" class="clear">
<div class="lnb">
<ul>
<li><a href="#">작가의 작품</a></li>
<li><a href="#">작가의 시대</a></li>
<li><a href="#">작가의 일생</a></li>
</ul>
</div>
<div class="content">
<h2>PICTURES</h2>
<p>
<a href="#">피리부는 소년</a><br>
<a href="#">고흐의 방</a><br>
<a href="#">황색 그리스도가 있는 화가의 자화상</a><br>
<a href="#">오페라좌의 관련악단</a><br>
<a href="#">만종</a><br>
<a href="#">제비꽃 장식을 단 베르트모리조</a><br>
<a href="#">피리부는 소년</a><br>
<a href="#">고흐의 방</a><br>
<a href="#">황색 그리스도가 있는 화가의 자화상</a><br>
<a href="#">오페라좌의 관련악단</a><br>
<a href="#">만종</a><br>
<a href="#">제비꽃 장식을 단 베르트모리조</a><br>
</p>
</div>
<div class="aside">
<ul class="ext">
<li><h2>Workshop Go</h2><a href="#">Life drawing workshop</a></li>
<li><h2>Summer Exhibition</h2>
<a href="#">A-level Summer Exibitiob Online 2010</a></li>
<li><h2>RA Collection</h2><a href="#">RA Collections</a></li>
</ul>
</div>
</div>
<footer>
<p>©2018 Les Amis du Musee d'Orsay. All rights reserved.</p>
</footer>
</div>
</body>
</html>
CSS
/* 모바일 */
h1, h2, ul, li, p, div {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style-type: none;
}
.clear:after {
content: '';
display: block;
clear: both;
}
a {
line-height: 1.5;
color: #333;
}
body {
background: #f1f1f1;
font-size: 13px;
}
header {
background: coral;
}
h1 {
font-size: 25px;
color: #cc0;
padding: 10px;
color: #fff;
}
.lnb li {
margin: 10px;
padding: 10px;
background: lightgreen;
}
.content {
padding: 20px;
}
h2 {
font-size: 20px;
}
.ext {
margin: 10px;
padding: 20px;
background: lightgreen;
}
footer {
padding: 10px;
background: #aaa;
}
/* 태블릿 */
@media all and (min-width:768px) and (max-width: 1024px) {
.lnb {
float: left;
width: 25%;
}
.content {
float: left;
width: 75%;
}
.aside {
clear: both;
}
}
/* PC */
@media all and (min-width: 1025px) {
.wrap {
max-width: 1280px;
margin: 0 auto;
}
.lnb {
float: left;
width: 20%;
}
.content {
float: left;
width: 50%;
}
.aside {
float: right;
width: 30%;
}
}
결과
미디어쿼리를 흉내내는 script
function initLayout() {
var widthWin = $(window).width();
if (widthWin < 1000) $('body').addClass('mob').removeClass('pc');
else $('body').removeClass('mob').addClass('pc');
}$(window).resize(function() {
initLayout();
})...
body.mob { max-width: 720px; }
...css에서 body.mob에 속성을 추가하면 모바일일 때의 속성이 등록되는 것입니다.
'CSS' 카테고리의 다른 글
| 이미지 스프라이트 / IR 효과 / 백그라운드 표현 (4) | 2022.08.21 |
|---|---|
| SCSS (1) | 2022.08.18 |
| 강아지 애니메이션 (1) | 2022.08.18 |
| 기본 문법 (3) | 2022.08.14 |
| 이미지 표현 방식 - 벡터, 비트맵 (11) | 2022.08.09 |
