미디어쿼리

▶ 반응형, 적응형 웹사이트를 만들 때 사용
▶ 제작한 웹사이트를 모바일, 태블릿 환경에 맞게 자연스러운 변화를 줄 때 사용하는 CSS 코드

1. 미디어 쿼리 기초

● 적응형, 반응형 웹사이트의 이해를 돕기 위한 사이트
→ https://blog.teamtreehouse.com/which-page-layout

● 적응형 웹사이트

• 고정값을 가지고 있는 px 단위를 사용해서 제작하는 웹사이트, 공간의 크기 변화에 따라 뚝뚝 끊기는 현상이 보임

● 반응형 웹사이트

• %값을 가지고 제작하는 웹사이트, 모바일과 태블릿에 맞춰 자연스러운 변화 가능

● PC용 웹사이트와 모바일용 웹사이트(예-m.naver.com)가 별도로 있는 이유 – 각각의 웹사이트 레이아웃이 완전히 다를 경우

● 미디어 쿼리 작성
CSS에서 @media () and () { }

• 사용자가 접속한 기기의 width 값을 기준으로 PC, 태블릿, 모바일에서 접속했는지 판단함
  ① 320px ~ 768px 미만 : 스마트폰
  ② 768px ~ 1024px 미만 : 태블릿
  ③ 1024px 이상 ~ : PC

※ 768px 이상 ↔ 320px 이상 768px 미만

※ 웹사이트가 모바일 크기가 되었을 때, 글자와 배경색 변화

@media (min-width: 300px) and (max-width: 767px) {
    .pc {
        color: blue;
        font-size: 20px;
        background-color: yellow;
    }
}

● 주의점

① 미디어쿼리 바깥쪽에서 있는 CSS 코드가 미디어쿼리 안쪽에서 작성한 CSS 코드에 상속됨
예) 미디어쿼리 바깥쪽에 있는 CSS 코드에 배경색(노란색)이 있고, 미디어쿼리 안쪽에서 작성한 코드에 배경색이 없으면 바깥쪽 코드의 배경색(노란색)이 상속됨

② 미디어쿼리를 사용할 때, 반드시 넣어야 하는 meta 태그

• 사용자가 접속하는 기기에 맞춰 스케일 업이 되도록 함

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

● viewport : 웹사이트에 접속하는데 사용되는 기기화면
● width=device-width : 웹사이트의 width값은 접속하는 기기의 width값을 적용함
● initial-scale=1.0 : 비율은 언제나 1.0을 유지함

※ 참고 : w3school viewport - https://www.w3schools.com/css/css_rwd_viewport.asp

● 드물지만 모든 디바이스 기기에 맞춰서 작업하거나, 디바이스의 width 값을 알고자 할 때

• https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  · orientation : portrait - 스마트폰 사용 시, 세로 화면 스타일
  · orientation : landscape 스마트폰 사용 시, 가로 화면 스타일
  ※ 일반적으로 세로 화면을 적용하는 경우가 많음, 아니면 orientation을 사용하지 않고 새로운 미디어쿼리 기준점을 추가해서 portrait와 landscape에 대응함

● ‘크롬-검사’에서 미디어쿼리 코드 확인하는 방법

• 웹사이트 화면 크기를 조절하여 미디어쿼리에 설정한 범위로 바꾸면, 미디어쿼리 코드 내용을 알 수 있음
• 내용(가운데 줄)은 캐스케이딩이 된 상태

2. 미디어쿼리 실무팁

● 웹사이트 작업 시, PC와 Mobile 버전 각각에 맞는 텍스트 정보를 제공해야 하는 경우

• display를 이용(none)
• h1 태그의 기본 display는 block

※ 768px 이상(Mobile display: none) ↔ 320px 이상 768px 미만(PC display: none)

● 미디어쿼리 응용 – 복잡도에 따른 제작 우선순위

• 단순히 말해서 간단한 것을 복잡하게 만드는 것이 반대로 하는 것보다 쉽기 때문에, 모바일 형태를 먼저 만든 후에 태블릿, PC 순으로 기획을 하는 것이 나음 (복잡도: 모바일 < 태블릿 < PC)
• 장점 : 코드 분량 감소

h1 {
    font-size: 20px;
    background-color: yellow;
}

/* max-width 1024px 미만 */
@media (min-width: 768px) {
    h1 {
        font-size: 40px;
        background-color: pink;
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size: 80px;
        background-color: gray;
    }
}

작성 코드

Git 링크.MediaQuery

어려웠던 점

미디어쿼리를 할 때 어떤 부분은 적응형을 적용하고, 어떤 부분은 반응형을 적용해야 할지에 대해 판단하기가 어려운 점이 있었습니다.

해결방법

강의에서 알려주신 참고 사이트를 통해 모르는 부분을 해결하였습니다.

학습 소감

현재 사람들이 스마트폰, 태블릿, PC를 복합적으로 사용함에 따라 미디어쿼리를 통해 편의성을 제공해야할 필요가 커졌다는 점을 알 수 있었습니다. 미디어쿼리 코드를 작성할 때는 번거로울지 모르지만, 작성 후의 결과물은 분명 이용자가 웹사이트를 이용하는데 있어 좋을 것이라는 생각이 들었습니다.