미디어쿼리(Media query)
미디어쿼리란 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS의 속성 중 하나입니다. 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다.
01. <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.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 |
| . . . |
. . . |
. . . |
02. @media
처음 로딩할 때 성능이 저하되지 않도록 CSS 파일을 하나로 만들어서 CSS 내부에서 조건에 따라 분기시키는 것이 일반적인 형태의 반응형웹 CSS입니다.
@media all and (min-width: 1000px) {
모든 기기에서 해상도가 최소 1000px 인 경우 적용할 속성들...
}
//all은 Media Type을 나타냅니다. and 전, 후에 띄어 씁니다.
| Media Type | 설명 |
|---|---|
| all | 모든 미디어 장치에 사용(기본값) |
| 프린터에 사용 | |
| screen | PC, 태블릿, 스마트폰에 사용 |
| speech | 스크린리더기가 페이지를 읽는데 사용 |
[예시 01]
body { color: red;}
@media only screen and (max-width: 768px) {
body {color: blue;}
}
위 예시는 원래 글자색이 빨간색인데, 화면이 768px보다 작아졌을 때는 파란색으로 지정한다는 뜻이므로 PC에서는 글자 색상이 빨간색으로, 모바일에서는 파란색으로 나타나게 됩니다.
[예시 02]
body { color: blue;}
@media only screen and (min-width: 768px) {
body {color: red;}
}
위 예시는 원래 글자색이 파란색인데, 화면이 768px보다 커지면 글자색을 빨간색으로 지정한다는 뜻이므로 모바일 우선으로 하면서도 같은 결과를 가져옵니다.
[예시 03]
@media only screen and (orientation: portrait) {
body {background: skyblue;}
}
미디어쿼리를 이용하여 브라우저의 방향에 따라 다른 레이아웃을 제공할 수 있습니다. 위 예시는 모바일 기기를 세워 세로가 가로보다 긴 모양이 되면 배경색을 하늘색으로 지정한다는 뜻입니다.
[예시 04]
@media only screen and (orientation: landscape) {
body {background: lightgreen;}
}
위 예시는 모바일 기기를 눕혀 가로가 세로보다 긴 방향이 되면 배경색을 연두색으로 지정한다는 뜻입니다.
[예시 05]
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
body {color: red;}
}
쉼표로 구분하여 조건을 추가할 수 있습니다. 위 예시는 가로가 600px에서 900px 사이일 때, 그리고 1100px 이상일 떄에만 글자색을 빨간색으로 한다는 뜻입니다.
03. Media query 실습
반응형 웹이라고 해서 LukeW의 5가지 패턴대로만 디자인해야 하는 것은 아니지만, 해상도 구분은 지금까지 그대로 참고해도 될 것 같으니, 모바일과 태블릿 그리고 PC의 경계를 768px, 1024px, 1280px로 하여 레이아웃이 달라지는 media query를 실습해 보겠습니다.
01. 레이아웃 템플릿
02. 레이아웃 HTML
레이아웃 HTML입니다. CSS에서 float 방법을 사용할 예정이기 때문에, 미리 clear 클래스를 붙였습니다.
코드 확인하기
<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 Exibition 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>
03. 레이아웃 CSS
레이아웃 CSS입니다. 모바일 우선으로 코딩합니다. 모바일 레이아웃은 모두 100%이니 요소들에 어떤 요소에도 float 또는 position이 없고 width를 지정할 필요가 없습니다. box-sizint: border-box;를 기본 속성으로 부여한 것은 가로 폭과 계산 없이 편하게 여백을 주려는 의도 때문입니다.
코드 확인하기
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%;
}
}
04. 최종결과
04. media query를 흉내내는 script
function initLayout() {
var widthWin = $(window).width():
if (widthWin < 1000) $('body').addClass('mob').removeClass('PC');
else $('body').removeClass('mob').addClass('PC');
}
창의 가로 크기를 재고 1000px 보다 좁으면 body에 mob 클래스를 붙이고 pc 클래스는 제거하고, 1000px 이상이면 body에 pc 클래스를 붙이고, mob 클래스는 제거한다는 뜻입니다.
$(window).resize(function) {
initLayout();
}
미리 만들어둔 스크립트를 창 크기가 바뀔 때마다 실행합니다.
body.mob {max-width: 720px;}
css에서 body.mob에 속성을 추가하면 모바일일 때의 속성이 등록되는 것입니다.
'CSS' 카테고리의 다른 글
| [CSS]강아지 애니메이션 (3) | 2022.08.18 |
|---|---|
| [CSS]SCSS (2) | 2022.08.18 |
| [CSS]기본문법 (3) | 2022.08.13 |
| [CSS]벡터방식과 비트맵방식 (10) | 2022.08.09 |
| [CSS]레이아웃 만들기 (6) | 2022.07.25 |
댓글