개발 공부 기록하기

DAY 31. 미디어 쿼리(media queries) 본문

프밍/CSS

DAY 31. 미디어 쿼리(media queries)

태영(泰伶) 2023. 1. 16. 23:19

Media queries미디어 쿼리

= CSS *모듈의 하나.

* 모듈: 프로그램 내부를 기능별 단위로 분할한 부분.

= 사이트에 접속하는 기기의 해상도, 화면 크기에 따라 서로 다른 CSS 스타일을 작성/적용하는 방법.

 

책에 있는 예시 - 웹 브라우저 화면 크기에 따라 요소의 배치가 달라진다.

 

미디어 쿼리를 이용해 만든 사이트 예시는 https://mediaqueri.es/ 참조.

 

 

미디어 쿼리 기본형

@media [only | not] 미디어유형1, 미디어유형2, 미디어유형3... [and 조건] * [and 조건] {

}
/* ① only 뜻: 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 마라.
   ② not 뜻: 이 다음에 작성하는 미디어 유형을 제외한 다른 미디어 유형에만 미디어 쿼리를 적용해라.
   ③ and 뜻: 조건을 여러 개 연결해서 추가할 수 있다. 
   ④ 같은 조건을 적용하고 싶은 미디어 유형이 여러 개라면 쉼표(,)로 구분해서 써준다. */

CSS를 조절하는 것이므로 <head> 안의 <style>에 쓰거나, 별도의 CSS 파일에 작성하면 된다.

대소문자 구분 없이 쓸 수 있다.

 

외부 CSS 파일로 쓸 때

<!-- 아래 ①과 ② 방법 중 하나를 택할 수 있다. -->
<!-- ① 아래 코드를 <head> 안에 넣어줘야 한다. 순서는 상관 × -->
<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">

<!-- ① 예시 -->
<link rel="stylesheet" media="print" href="css/print.css">
/* ② 아래 코드를 <head> 안에 있는 <style>에 써 주어야 한다. */
@import url(css 파일 경로) 미디어 쿼리 조건

/* ② 예시 */
@import url("css/tablet.css") only screen and (min-width: 321px) and (max-width: 768px)



/* 주의할 점: 연결하는 CSS 파일의 개수가 적으면 속도 면에서 문제 생길 일 ×.
 BUT 자바스크립트와 @import가 함께 있을 때 오류 발생할 경우 있음.
 (Internet Explorer browser 이야기라 이제는 상관없을 것 같지만.)
 아무튼 CSS 파일 개수 많고, 규모 큰 사이트 개발 시에는 @import보다 <link>를 이용하는 게 낫다! */

 

웹 문서 내부에 직접 쓸 때

<!-- 아래 ①과 ② 방법 중 하나를 택할 수 있다. -->
<!-- ① <style> tag 안에서 media 속성으로 조건 지정하기.
   (한 가지 조건만 지정할 때) -->
<style media="조건"> {
     <!-- 스타일 규칙 -->
}
</style>



<!-- ① 예시 -->
<style media="screen and (max-width: 320px)">
   body {
      background-color: orange;
   }
</style>





<!-- ② <style> tag 안에서 @media문으로 조건별로 스타일 지정하기.
   (여러 조건마다 스타일 다 나열해놓고 그 중 선택해서 사용할 때) -->
<style>
   @media 조건 {
        <!-- 스타일 규칙 -->
   }
</style>


<!-- ② 예시 -->
<style>
   @media screen and (max-width: 320px) {
      body {
         background-color: orange;
      }
   }
</style>

 

미디어 유형

미디어 별로 적용할 CSS를 따로 작성하는 것이 일반적이다.

종류 설명
all 모든 미디어 유형
print 인쇄 장치
screen 컴퓨터 스크린, 핸드폰 스크린
tv 음성과 영상이 동시에 출력되는 TV
aural
* 단어 뜻: 청각의		 음성 합성 장치(주로 화면을 읽어 소리로 출력해주는 장치)
braille
* 단어 뜻: 브라유 점자(법) ─ 우리가 흔히 알고 있는 공인된 점자 표시 방법.		 점자 표시 장치
handheld
* 단어 뜻: 손바닥 크기의, 손에 들고 쓰는		 태블릿PC처럼 손에 들고 다니는 기기
projection
* 단어 뜻: 투사(投射), 투영(投映), 영사(映寫)		 프로젝터
tty
* 단어 뜻: teletypewriter의 약자. 전신 타자기.		 디스플레이 기능이 제한된 장치
embossed
* 단어 뜻: 양각으로 새겨진, 돋을새김한		 점자 프린터

   ⤷ 취소선을 그은 이유

Media queries 3 모듈에서는 다양한 미디어 유형을 각각 정의했지만,

2022년 12월 29일부로 개편된(?) Media queries 4 모듈에서는 더 이상 먹히지 않는 유형들이기 때문이다.

aural은 speech로 대체되었다. (참조 페이지: https://drafts.csswg.org/mediaqueries/#media-types)

 

/* 예시 */
@media screen { /* 화면용 스타일 작성 */
   
}
@media print { /* 인쇄용 스타일 작성 */

}

 

 

웹 문서의 가로 너비, 세로 높이

자, 복습!

뷰포트viewport: 실제 웹 문서 내용이 화면에 나타나는 영역

 

뷰포트의 너비, 높이를 미디어 쿼리의 조건으로 사용할 수 있다!

★ 단, 미디어 종류에 따라서 높잇값 범위는 달라지니까 주의!! ★

- screen이 아닌 미디어에서: 스크롤 포함한 전체 높이를 height로 지정해야

- print에서: 한 페이지 높이를 기준으로 height 지정해야

 

종류 설명
width, height 웹 페이지의 가로 너비, 세로 높이 지정.
min-width, min-height 웹 페이지의 최소 너비, 최소 높이 지정.
max-width, max-height 웹 페이지의 최대 너비, 최대 높이 지정.

 

/* 예시 */
@media screen and (min-width: 1440px) {		/* 너비가 최소 1440px인 화면용 스타일 */
     (...생략...)
}

 

 

단말기의 가로 너비, 세로 높이

단말기에서 기본 제공하는 물리적인 가로 너비, 세로 높이는 다른 속성으로 지정한다.

단말기 브라우저 창의 너비, 높이를 의미하는데, 대부분

 

단말기 해상도 ≠ 실제 브라우저 너비

ex, 아이폰 단말기 자체 해상도 ≠ (아이폰 웹 브라우저인) 사파리 너비

두 가지가 같지 않다.

 

단말기 너비, 높이를 고려해 미디어 쿼리를 작성해야 할 경우 다음 표와 같은 속성을 사용한다.

 

종류 설명
device-width, device-height 단말기의 가로 너비, 세로 높이 지정.
min-device-width, min-device-height 단말기의 최소 너비, 최소 높이 지정.
max-device-width, max-device-height 단말기의 최대 너비, 최대 높이 지정.

 

/* iPhone X일 경우의 예시 */
@media screen and (min-device-width: 375px) and (min-device-height: 812px) {
      (...생략...)
}

 

화면 회전 속성: orientation

화면 가로로 돌릴 때  달라지는 레이아웃을 orientation 속성을 사용해서 지정할 수 있다.

 

종류 설명
orientation: portrait 단말기의 세로 모드 스타일 지정.
orientation: landscape 단말기의 가로 모드 스타일 지정.

 

/* iPhone X 가로로 돌릴 때 예시 */
@media screen and (min-device-width: 812px) and (orientation: landscape) {
          (...생략...)
}

 

미디어 쿼리 여러 조건 자세히 알고 싶다면 아래 페이지 참조.

https://www.w3.org/TR/mediaqueries-3/

 

Media Queries Level 3

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types tha

www.w3.org

 

미디어 쿼리의 중단점break point

중단점이란 화면 크기에 따라 서로 다른 CSS를 적용할 분기점(分岐點)을 말한다.

 

대부분 기기 화면 크기를 기준으로 하지만, 시중의 모든 기기의 화면 크기를 반영할 수는 없어서 모바일, 태블릿, 데스크톱으로만 구분하는 것이 낫다.

 

 

그리고, 모바일에서의 제약 조건이 더 많기 때문에(처리 속도, 화면 크기 등)

보통 모바일의 레이아웃을 기본으로 해서 CSS를 만들고

(모바일용으로 만든 CSS가 태블릿과 데스크톱에도 기본 적용된다.)

+

사양 좋고 화면 큰 테블릿과 데스크톱에 맞춰서

더 많은 기능, 스타일을 추가한다.

➡ 모바일 퍼스트mobile first 기법 = 모바일을 먼저 고려해 미디어 쿼리를 작성하는 방법

(무울론! 디자이너에 따라 데스크톱을 기준으로 만들고 + 기능을 모바일 수준으로 줄이는 방법을 선택하는 사람도 있다.)

 

 

일반적으로는

스마트폰 보통 미디어 쿼리 사용 ×.
if 폰 방향 고려하면, min-width 세로 portrait 320px, 가로 landscape 480px로 지정.
태블릿 세로 높이 > 768px일 경우. 가로는 데스크톱처럼 1024px 이상으로 지정.
데스크톱 화면 크기 1024px 이상일 경우.

 

뷰포트 크기 참조 사이트: https://yesviz.com/devices.php

 

Viewport Size, Resolution, Screen Sizes, CSS PPI and CSS media queries for popular Devices | YesViz

A Useful database contains Viewport Size, Resolution, Screen Sizes, CSS PPI and CSS media queries for popular devices including phones, tablets, smart watches and laptops.

yesviz.com

 

 

 

 

 

 

 

책에 나온 실습

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>미디어 쿼리 사용하기</title>
         <style>
            body {
               background: url(images/bg0.jpg) no-repeat fixed;		/* 기본 배경 이미지 지정 */
               background-size: cover;
            }
            @media screen and (max-width: 1024px) {	/* 가로 1024px 이하면 bg1.jpg로 배경 지정하기 */
               body {
                  background: url(images/bg1.jpg) no-repeat fixed;
                  background-size: cover;
               }
            }
            @media screen and (max-width: 768px) {	/* 가로 768px 이하면 bg2.jpg로 배경 지정하기 */
               body {
                  background: url(images/bg2.jpg) no-repeat fixed;
                  background-size: cover;
               }
            }
            @media screen and (max-width: 320px) {	/* 가로 320px 이하면 bg3.jpg로 배경 지정하기 */
               body {
                  background: url(images/bg3.jpg) no-repeat fixed;
                  background-size: cover;
               }
            }
         </style>
      </head>
      <body>
      </body>
   </html>

↓

 

화면 크기에 따라 설정한 사진이 다르게 나타나는 것을 확인할 수 있다^^

동영상 속에서 viewport 크기를 나타내는 가로 막대가 푸른색인 것을 확인할 수 있다. (이건 max-width 조건을 설정해서 그렇다.)

만약 min-width 조건을 설정하면 막대 색이 주황빛으로 나타나고,

min-width, max-width 모두를 설정해 그 사이 범위를 조건으로 설정하면 초록빛의 막대가 된다고 한다ㅎㅎ

 

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

DAY 32. 그리드 레이아웃(Grid Layout)  (0) 2023.01.19
Section 9. 유용한 CSS 속성들(1)  (0) 2023.01.18
Section 8. CSS 박스 모델(2)  (0) 2023.01.09
Section 8. CSS 박스 모델(1)  (0) 2023.01.08
DAY 30. 반응형 웹 디자인(Responsive Web Design)  (1) 2023.01.07
'프밍/CSS' Related Articles more
Comments