미디어쿼리(media query)란 무엇일까?
미디어쿼리란, 뷰포트의 해상도에 따라 CSS를 분리시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다.
▶︎ 종류
01. <link ~ media="">
02. @media
03. media query를 흉내내는 script
01. <link ~ media="">
위의 박스의 뜻은 최소 가로폭이 1000px, 즉 1000px보다 넓은 해상도일 때에 style_pc.css를 연결한다는 뜻입니다.
태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구(F12)를 열고 Toggle device Toolbar를 누르면 기기마다의
해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다.
| 모바일 기기 | 가로 | 세로 |
|---|---|---|
| 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입니다.
/*모든 기기에서 해상도가 최소 1000px 인 경우 적용할 속성들*/
/*all은 Media Type을 나타냄. and 전, 후에 띄어씀.*/
}
▶ Media Type 종류
| Media Type | 설명 |
|---|---|
| all | 모든 미디어 장치에 사용 (기본값) |
| 프린터에 사용 | |
| screen | PC, 태블릿, 스마트폰에 사용 |
| speech | 스크린리더기가 페이지를 읽는데 사용 |
예시
@media only screen and (max-width: 768px) {
body { color: blue; }
}
원래 글자색이 빨간색인데, 화면이 768px보다 작아졌을 때는 글자색을 파란색으로 지정한다는 뜻이므로 PC에서는 글자 색상이 빨간색으로, 모바일에서는 파란색으로 나타나게 됩니다.
예시
@media only screen and (min-width: 768px) {
body { color: red; }
}
원래 글자색이 파란색인데, 화면이 768px보다 커지면 글자색을 빨간색으로 지정한다는 뜻
예시
body { background: skyblue; }
}
모바일 기기를 세워 세로가 가로보다 긴 세로방향이 되면 배경색을 하늘색으로 지정한다는 뜻
예시
body { background: lightgreen; }
}
모바일 기기를 눕혀 가로가 세로보다 긴 가로방향이 되면 배경색을 연두색으로 지정한다는 뜻
예시
body { color: red; }
}
※ 쉼표로 구분하여 조건을 추가할 수 있음.
가로가 600px에서 900px 사이일 때, 그리고 1100px 이상일 때에만 글자색을 빨간색으로 한다는 뜻
미디어쿼리를 이용해서 레이아웃을 만들어 봅시다!
HTML
<body>
<div id="wrap">
<header id="header">header</header>
<main id="main">
<div class="lnb">lnb</div>
<content id="content">content</content>
<aside id="aside">aside</aside>
</main>
<footer id="footer">footer</footer>
</div>
</body>
CSS
<style>
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
* {
margin: 0;
padding: 0;
font-size: 64px;
font-family: 'GmarketSans';
text-align: center;
}
#wrap {
width: 100%;
}
#header {
height: 200px;
background-color: #FFCFB4;
line-height: 200px;
}
#main {
display: flex;
}
.lnb {
width: 25%;
height: 600px;
background-color: #EEC28F;
line-height: 600px;
}
#content {
width: 50%;
height: 600px;
background-color: #FFB054;
line-height: 600px;
}
#aside {
width: 25%;
height: 600px;
background-color: #EDA046;
line-height: 600px;
}
#footer {
height: 200px;
background-color: #FC9054;
line-height: 200px;
}
/* 미디어쿼리 */
@media (max-width:1280px){}
@media (max-width:1024px){
#main {
flex-wrap: wrap;
}
.lnb {
width: 30%;
height: 400px;
line-height: 400px;
}
#content {
width: 70%;
height: 400px;
line-height: 400px;
}
#aside {
width: 100%;
height: 200px;
line-height: 200px;
}
}
@media (max-width:768px){
.lnb {
width: 100%;
height: 200px;
line-height: 200px;
}
#content {
width: 100%;
height: 200px;
line-height: 200px;
}
}
</style>
03. media query를 흉내내는 script
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 클래스는 제거한다는 뜻입니다.
initLayout();
});
미리 만들어둔 스크립트를 창 크기가 바뀔 때마다 실행합니다.
body.mob { max-width: 720px; }
...
css에서 body.mob에 속성을 추가하면 모바일일 때의 속성이 등록되는 것입니다.
'CSS' 카테고리의 다른 글
| [CSS] PUG와 SCSS를 활용하여 강아지 애니메이션을 만들어 봅시다! (4) | 2022.08.18 |
|---|---|
| [CSS] "SASS ⊃ Sass, SCSS" 에 대해 알아봅시다! (2) | 2022.08.18 |
| [CSS] 기본 문법 정리 (4) | 2022.08.16 |
| [CSS] 비트맵(Bitmap)방식과 벡터(Vector)방식에 대해 알아보자! (9) | 2022.08.09 |
| [CSS] 레이아웃(layout)에 대해 알아보자! (6) | 2022.07.25 |
댓글