Dev.note(web) 21.07.09

김태훈·2021년 7월 9일

목록 보기

10/49

미디어쿼리 1일차

미디어쿼리란?

오늘날, 예전과는 달리 여러가지 기기로 웹 사이트에 접속하기 때문에 사이트를 해당 기기의 해상도에 맞게 반응형으로 만들게 된다. 접속하는 기기에 따라 특정한 css 스타일을 사용하도록 만들어주는 모듈이 미디어쿼리다. css-tricks 에서 미디어쿼리와 관련된 코드를 공부할 수 있다.

시작하기 전에

<meta name="viewport" content="width=device-width, initial-scale=1.0">

head 태그 안에 위의 코드를 넣는 것으로 미디어쿼리를 적용한다.

미디어쿼리 예제 1

(html)
<h1 class="pc">PC Hello World</h1>
<h1 class="mobile">Mobile Hello World</h1>
(css)
.pc{
	color: red;
	font-size: 50px;
	background-color: pink;
}
.mobile {
	display: none;
}
@media (min-width: 320px) and (max-width: 767px) {
	.pc {
		display: none;
	}
	.mobile{
		display: block;
	}
}

브라우저 폭의 길이에 따라 클래스를 지정하고 본문 내용, 폰트 크기, 색상과 배경색을 바꾸는 방식이다. 이 방법은 html의 코드가 길어지는(본 코드에서는 한 줄 이지만 실제로는 코드가 거의 두배가 될 것이다. 적용대상인 기기 종류가 더 늘어나면 그만큼 더 배가되고.) 단점이 있다. 대신 본문의 내용이 아예 다를 경우엔 채용할 이점이 있을 듯 하다.

(html)
<h1 class="pc">PC Hello World</h1>
(css)
.pc{
	color: red;
	font-size: 50px;
	background-color: pink;
}
@media (min-width: 768px) and (max-width: 1023px) {
	.pc {
		color: blue;
		font-size: 20px;
		background-color: yellow;
	}
}
@media (min-width: 300px) and (max-width: 767px) {
	.pc {
		color: green;
		font-size: 10px;
		background-color: gray;
	}
}

이 방법은 html 본문이 짧은 대신, css의 미디어쿼리 부분이 길어진다. 첫 방법과 상반된 장단점이나, html 보단 css 코드를 늘리는게 내용을 바꾸기는 불가능하거나 어려울 것 같다.
해당 코드의 픽셀 수치는 일반적으로 쓰이는 기기의 크기에 따라 일반적으로 쓰이는 것이다.

320px ~ 768px 미만	: 스마트폰
768px ~ 1024px 미만	: 태블릿
1024px 이상 ~.		: PC

미디어쿼리 예제 2

(html)
<h1>미디어쿼리 응용</h1>
(css)
h1{
	font-size: 20px;
	background-color: yellow;
}
@media (min-width: 768px){
	h1 {
		font-size: 40px;
		background-color: pink;
	}
}
@media (min-width: 1024px){
	h1 {
		font-size: 80px;
		background-color: gray;
	}
}

이 방법은 미디어쿼리 부분을 더욱 축약한 것으로, 최소값만으로 구간을 나눌 수 있다.

h1{
	font-size: 80px;
	background-color: gray;
}
@media (max-width: 1024px){
	h1 {
		font-size: 40px;
		background-color: pink;
	}
}
@media (max-width: 768px){
	h1 {
		font-size: 20px;
		background-color: yellow;
	}
}

마찬가지로 최대값만으로도 구간을 나눌 수 있다. 물론 css는 모든 코드가 적용 가능할 경우 마지막 것만 적용 되기 때문에 오름차순에서 내림차순으로 순서를 바꿔줘야한다.