CSS
미디어 쿼리
미디어 쿼리
이번에는 미디어 쿼리에 대해서 알아보겠습니다.
미디어 쿼리는 화면의 해상도에 따라서 CSS속성을 다르게 적용할 때 사용합니다.
핑크코딩의 메인페이지를 예로 들겠습니다.
모바일 웹
PC 웹
핑크코딩 사이트는 모바일 용 PC 용 따로 구분하여 사이트를 만들지 않고 하나의 페이지에서 미디어 쿼리를 사용하여 위와 같이 디자인을 조금 변경하여 사용하고 있습니다.
미디어 쿼리 사용 방법
@media screen and (min-width:해상도값px} and (max-width:해상도값px){
적용할 CSS
}
예를 들어 해상도의 길이가 0픽셀부터 500픽셀까지 인 창에서 CSS를 적용한다면
@media screen and (min-width:0px} and (max-width:500px){
적용할 CSS
}
그럼 다음의 예제를 봅시다.
메뉴가 기본적으로 가로로 나란히 배치되고 500픽셀 이하에서는 세로로 배치되도록 하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>media query</title>
<link rel="stylesheet" href="./cssReset.css">
<style>
li{float:left;margin-left:10px}
@media screen and (min-width:0px) and (max-width:500px){
li{clear:both;margin-left:0;text-align:center;}
}
</style>
</head>
<body>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Angular</li>
<li>React</li>
<li>nodeJs</li>
<li>MySQL</li>
<li>PHP</li>
<li>Deep Learning</li>
</ul>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
위 코드의 결과 - 500px 이하
위 코드의 결과 - 500px 초과
주의 할 점은 CSS는 겹치는 속성은 먼저 선언된 값보다 나중에 선언된 값이 먼저 적용이 됩니다.
즉 다음과 같이 코드의 위치가 다르면 의도와 전혀 다르게 작동합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>media query</title>
<link rel="stylesheet" href="./cssReset.css">
<style>
@media screen and (min-width:0px) and (max-width:500px){
p{color:skyblue}
}
p{color:hotpink}
</style>
</head>
<body>
<p>pinkcoding</p>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
위 코드를 보면 기본적으로 p태그의 색은 hotpink이고 미디어쿼리에 의해 0부터 500까지의 값은 skyblue입니다.
하지만 hotpink로 지정한 영역이 미디어 쿼리 이후에 선언되어 위부터 순차적으로 읽어지면서 0~ 500일 때 skyblue가 적용되더라도 나중에 hotpink로 변경됩니다.
그러므로 이점을 유의하여 작성해야합니다.
즉 기본적으로 해상도에 따라 변하지 않는 값들은 먼저 선언하고 그 이후 미디어 쿼리를 사용해 분리하시면 좋습니다.
501픽셀 이상부터 적용하는 미디어쿼리를 작성한다면
@media screen and (min-width:501px){
}
위와 같이 작성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>media query</title>
<link rel="stylesheet" href="./cssReset.css">
<style>
@media screen and (min-width:0px) and (max-width:500px){
p{color:skyblue}
}
@media screen and (min-width:501px){
p{color:hotpink}
}
</style>
</head>
<body>
<p>pinkcoding</p>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
