728x90
미디어쿼리(media query)에 대해 알아봅시다 !
다양한 기기에서 웹브라우징을 지원하게 되면서 화면의 해상도에 따라 컨텐츠를 유연하게 배치하는 것이 중요해지고 있습니다. 이러한 반응형 웹사이트를 만들기 위한 미디어쿼리에 대해 알아봅시다.
[ <link ~ media = ""> ]
<link rel="stylesheet" type="text/css" media="all and (min-width: 1000px)" href="style_pc.css">1000px 보다 넓은 해상도일 때에 style_pc.css를 연결한다는 뜻
[ @media ]
@media all and (min-width: 1000px) {
모든 기기에서 해상도가 최소 1000px 인 경우 적용할 속성들 ...
}
로딩 시 성능 저하가 일어나지 않도록 CSS 파일을 하나로 만들고 CSS 내부에서 조건에 따라 분기시키는 것이 일반적인 형태의 반응형 웹 CSS 입니다. all은 Media Type을 나타내며 and 전, 후에 띄어 씁니다.
| Media Type | 설명 |
|---|---|
| all | 기본값; 모든 미디어 장치에 사용 |
| 프린터에 사용 | |
| screen | PC, 태블릿, 스마트폰에 사용 |
| speech | 스크린리더기가 페이지를 읽는데 사용 |
[ @media_예제를 풀어보자 ! ]
모바일과 태블릿, PC 기기에 따라 레이아웃이 달라지는 media query를 만들어봅시다.
<!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>
[ @media_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%;
}
}
[ media query를 흉내내는 script ]
function initLayout() {
var widthWin = $(window).width();
if (widthWin < 1000) $('body').addClass('mob').removeClass('pc');
else $('body').removeClass('mob').addClass('pc');
}
창의 가로 크기가
1) 1000px 미만 : body에 mob 클래스 붙이고 pc 클래스 제거
2) 1000px 이상 : body에 pc 클래스 붙이고 mob 클래스 제거
$(window).resize(function() {
initLayout();
});
창의 크기가 바뀔 때마다 실행
...
body.mob {
max-width: 720px;
}
...
css에서 body.mob에 속성을 추가하면 모바일 버전의 속성이 등록됨
'CSS' 카테고리의 다른 글
| CSS | 이미지 스프라이트(image sprite) / ir 효과와 background 표현까지 (4) | 2022.08.20 |
|---|---|
| CSS | 움직이는 강아지 만들기 (8) | 2022.08.18 |
| CSS | SCSS (4) | 2022.08.18 |
| CSS | 기본 문법 (4) | 2022.08.15 |
| CSS | 벡터(Vector)와 비트맵(Bitmap) (10) | 2022.08.10 |
댓글