[CSS 기초] 미디어 쿼리 (media query)

 

안녕하세요 PNcoding입니다 :)

 

 

웹 사이트에 접속할 수 있는 기기는 다양한 종류가 있습니다. 예를 들면 맥북, 아이패드, 아이폰, 갤럭시 제트플립 등이 있죠. 이러한 다양한 기기는 또한 화면의 크기도 다양합니다.

따라서 이러한 다양한 화면에서 웹사이트를 잘 보이도록 스타일을 변경해 주는 게 필수 요소가 되었죠.

이렇게 스타일을 변경시켜 주는 것을 반응형이라고 하며, 이러한 반응형을 구현하기 위해 css의 미디어 쿼리를 활용을 해야만 합니다.

 

따라서 오늘은 요즘 시대의 필수 미디어 쿼리에 대하여 알아보도록 하겠습니다.

 

 

---

 

 

미디어 쿼리 (Media Query)

미디어 쿼리는 기기의 유형, 화면 해상도, 뷰포트 너비 등에 따라 웹사이트의 스타일을 변경할 때 사용합니다.

미디어 쿼리의 가장 기본적인 구조는 아래와 같습니다.

@media 미디어유형 연산자 (조건) {
  스타일
}

 

스타일 부분에는 일반적으로 선택자와 스타일이 들어가는데 미디어의 조건이 만족될 때 스타일이 적용된다고 생각하시면 됩니다.

 

예를 들어 이러한 미디어 쿼리를 작성하게 되면

'화면의 너비가 500px 이하인 스크린 기기에서만 박스요소의 배경색상을 파란색(blue)으로 설정해 주세요'

라는 의미가 됩니다.

@media screen and (max-width: 500px) {
    /* 화면의 너비가 500px 이하일 경우 적용되는 스타일 영역 */
    .box {
        background-color: blue;
    }
}

 

 

 

그렇다면 이제 미디어 쿼리에 들어가는 조건들을 확인해 보도록 하겠습니다.

 

 

미디어 유형

미디어 쿼리에 들어가는 유형의 종류는 많지만 가장 많이 사용되는 세 가지를 알려드리도록 하겠습니다.

미디어 유형
all	모든 미디어 유형 (기본값)
screen	스크린으로 볼 수 있는 기기 (컴퓨터 모니터, 스마트폰 화면 등), 가장 많이 사용
print	인쇄 결과물, 출력 미리보기 화면에 표시되는 문서

 

 

 

미디어 쿼리 연산자

미디어 쿼리에는 연산자를 추가해주어 복잡한 조건을 만들어 줄 수 있습니다.

미디어 쿼리 연산자
and	조건을 계속 추가할 때 사용
not	미디어 쿼리를 부정할때 사용, 쿼리가 거짓일때만 작동되며 반드시 미디어 유형을 작성해 줘야함
only	오래된 브라우저가 스타일을 잘 못 적용시키지 못하도록 방지할 때 사용 적어준 전체 쿼리가 일치할 경우에만 작동
, (콤마)	동일한 스타일 유형을 적용시키고 싶은 쿼리가 있을때 콤마를 사용하여 추가 가능

 

연산자의 종류는 네가지가 있지만, 기본적으로 and만 사용하셔도 충분히 반응형 작업을 하실 수 있습니다.

 

 

 

반응형

 

 

미디어 쿼리 조건

미디어 쿼리는 조건을 추가해서 원하는 화면에서 요소의 스타일을 변경시켜 줄 수 있습니다.

실제 기기의 화면에 웹사이트가 보이는 내용 영역을 뷰포트라고 하며, 이러한 뷰포트 영역의 너비를 미디어쿼리 조건으로 조절해 줄 수 있습니다.

조건의 종류는 많지만 가장 많이 사용되는 최대, 최소 가로크기값을 알려 드리도록 하겠습니다.

미디어 쿼리 조건
max-width	웹페이지의 최대 너비
min-width	웹페이지의 최소 너비

 

 

 

미디어 쿼리 중단점 (Break Point)

미디어 쿼리를 작성할 때 원하는 화면의 크기가 되었을 때 요소의 스타일을 변경해 주기 위해서 미디어 쿼리 중단점 작업을 해줄 수 있습니다.

 

<div class="box"></div>

 

.box {
    width: 1400px;
    height: 400px;
    background-color: tan;
}

@media screen and (max-width: 1400px) {
    /* 화면의 너비가 1400px 이하일 경우 적용되는 스타일 영역 */
    .box {
        width: 900px;
        background-color: blue;
    }
}

@media screen and (max-width: 900px) {
    /* 화면의 너비가 900px 이하일 경우 적용되는 스타일 영역 */
    .box {
        width: 500px;
        height: 600px;
        background-color: salmon;
    }
}

@media screen and (max-width: 500px) {
    /* 화면의 너비가 900px 이하일 경우 적용되는 스타일 영역 */
    .box {
        width: 90%;
        height: 300px;
        background-color: gold;
    }
}

 

이렇게 여러개의 미디어 쿼리를 작성해 주어 기기의 크기가 작아졌을 때 박스의 스타일이 변경되어 보이도록 작업해 줄 수 있습니다.

 

이러한 중단점은 임의로 작업을 하셔도 됩니다. 또한 중단점을 더더욱 세분화하여 표현하여도 되지만, 시중에 있는 모든 기기에 적용시켜 주기에는 무리가 있습니다.

따라서 기본적으로 피씨, 태블릿, 모바일의 세 개의 반응형 분기점을 기준으로 미디어 쿼리 작업을 해주는 게 무난한 방법입니다.

 

세 개의 반응형 분기점

• PC & 노트북 : ~1024px
• 노트북 & 태블릿 : 1024px ~ 768px
• 모바일 : 768px ~ 

 

 

 

---

 

 

여기까지 하여 미디어 쿼리에 대하여 알아보았습니다.

 

요즘에는 특히 웹사이트를 모바일 기기로 많이 보기 때문에 미디어 쿼리는 웹사이트를 작성하기에 있어 가장 필수적인 요소가 되었습니다.

 

여러분들도 웹사이트를 만드실 때 반드시 모바일까지 생각하면서 만들어야 한다는 점 잊지 마세요 :)