미디어 쿼리는 반응형 웹을 만들기 위한 필수 기술 입니다.

그럼 미디어 쿼리에 대하여 알아 보도록 하겠습니다.

 

미디어 쿼리 기본 구조

@media only all and (조건문) {실행문}

  • @media 미디어 쿼리를 선언하는 부분입니다
  • only(생략가능) 다음과 같은(뒤에오는) 조건일 때만 적용하겠다라는 의미의 설정 값 입니다. 기본 설정 값이며 다른 설정 값으로는 not가 있습니다. not 는 뒤에 오는 조건이 아닌 경우를 의미하는 설정 값 입니다.
  • all(생략가능) 은 모든 미디어 타입에 적용된다는 의미 입니다. 다른 설정 값으로는 screen, print 등이 있습니다.
  • and(생략가능) 조건이 모두 만족 할 경우를 의미하면 반대 의미로 or 이 있습니다
  • (조건문) 실행문이 적용 될 조건을 설정 합니다.
    조건문에는 orientation:portrait(세로모드 일 때) / orientation:landscape(가로모드 일 때) / min-width:300px(너비가 300px 이상일 때) / max-width:500px(너비가 500px 보다 이하 일 때) 등으로 지정 할 수 있습니다.
  • {실행문} 조건에 만족 할 경우, 적용 될 CSS 코드를 작성 합니다.

 

예제

<!DOCTYPE html>
<html>
<head>
  <title>미디어 쿼리</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    @media only screen and (min-width:800px) {
      div {font-size : 30px;}
    }

    @media only screen and (mix-width:500px) and (max-width:799px){
      div {font-size : 22px;}
    }
    @media only screen and (max-width:499px) {
      div {font-size : 14px;}
    }
  </style>

</head>
<body>
  <div>테스트 입니다.</div>

</body> 
</html>

 

 

예제 결과

브라우저의 너비에 따라 적용되는 CSS코드 값을 확인 할 수 있습니다.

 

미디어쿼리 예제 결과1

미디어쿼리 예제 결과2

 

미디어쿼리 예제 결과3

 

 

 

미디어 쿼리는 반응형 웹을 만들기 위한 아주 중요한 역할을 합니다.

이제 미디어 쿼리와 이전에 포스팅 한 뷰포트에 대하여 알았다면 반응형 웹을 만들 수 있을 것 입니다.

 

Posted by 행복한 유유로그

댓글을 달아 주세요



티스토리 툴바