[HTML/CSS] Media Queries(미디어쿼리), Viewport(뷰포트)

1) 미디어쿼리 소개

미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것입니다.

미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기 합니다.

미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줍니다.

 

미디어쿼리는 CSS2의 미디어 타입(Media Types)을 확장해서 만들어졌습니다.

미디어타입은 이론적으로는 훌륭했지만, 결과적으로 제대로 활용되지 못했습니다.

이유는 당시에는 미디어 타입을 제대로 지원하는 기기가 없었기 때문입니다.

 

미디어 쿼리가 등장하기 이전에는 제대로 된 반응형 웹 사이트를 제작할 수는 없었습니다.

하지만 당시에는 사용자들의 환경이 아주 제한적이었기 때문에 제작자 입장에서는

대중적인 미디어 범위에서만 잘 보이도록 사이트를 제작하면 반응형이 아니더라도 충분했습니다.

 

하지만 웹이 급격이 발전하면서 대응해야 하는 미디어의 폭이 상당히 늘어났습니다.

이런 필요성에 따라 W3C는 CSS2의 미디어 타입을 확장하여, CSS3 미디어쿼리를 발표합니다.

이 미디어 쿼리로 인해 웹 사이트를 제작함에 있어 이전의 정적인 고정 레이아웃 웹 사이트에서

동적으로 반응하는 반응형 웹 사이트로 패러다임이 새롭게 변화하였습니다.

 

미디어 쿼리 초보자 안내서

---

2) 미디어 타입 & 미디어 특성

@media(at media)

미디어 쿼리는 CSS2 Media Types을 확장했기 때문에 선언 방법은 동일합니다.

@media mediaqueries { /* style rules  */ }

@media 로 시작하며, 이 키워드는 이제부터 미디어 쿼리를 시작한다 라는 뜻입니다.

그 뒤에 미디어 쿼리 구문(위 코드의 mediaqueries) 이 나오고 이어서 중괄호( { } )를 이용해서 스타일 규칙이 들어갑니다.

미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나오는 스타일 규칙이 적용되고, 거짓이면 무시됩니다.

미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 이루어져 있습니다.

 

▶ 미디어 타입

  ● all, braille, embossed, handheld, print, projection, screen, speech, tty, tv

우리가 알아야 할 타입은 all, print, screen 정도입니다. 그 중에서도 screen이 거의 대부분입니다.

화면을 출력하는 디스플레이가 있는 미디어들은 전부 screen에 속하기 때문에 현실적으로 고려해야하는 미디어들은

전부 여기에 해당이 됩니다.

print 타입도 간혹 사용이 됩니다. 실습할 때 다룹니다.

all 타입은 모든 미디어에 적용되는 타입입니다. 미디어를 구분하는 용도가 아니기 때문에 유용하게 사용되지는 않습니다.

 

▶ 미디어 특성

  ● width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid

미디어 특성 역시 우리가 알아야 할 특성은 width와 orientation 정도입니다.

width는 뷰포트의 너비, 즉 브라우저 창의 너비를 말합니다.(스크린의 크기 x)

orientation은 미디어가 세로모드인지 가로모드인지를 구분합니다.

미디어 쿼리에서는 이 구분을 width와 height 특성의 값을 비교해서 height가 width보다 같거나 크면 세로모드

반대인 경우에는 가로모드라고 해석합니다. 세로모드에서는 portrait, 가로모드에서는 landscape 키워드와 매칭이 됩니다.

​

▶ 미디어 쿼리 level 4

우리 수업의 미디어 타입과 미디어 특성은 CSS3 미디어 쿼리 표준 명세를 기준으로 작성되었습니다.

현재, 미디어 쿼리 level 4가 CR(유력 후보안) 단계입니다.

해당 문서에서 미디어 타입 대부분과 미디어 특성 중 일부 속성이 폐기 예정입니다.

 

미디어 쿼리 사용하기

---

3) 미디어 쿼리 Syntax

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;

위 코드는 CSS3 미디어 쿼리 표준 명세에 나와 있는 Syntax 부분입니다. 우리가 알아야 할 부분만 적어놓았습니다.

참고로 Syntax는 전부 이해할 필요는 없지만 일부 기호는 알아두면 좋습니다.

​

  ● [ a ] : a가 나올 수도 있고 나오지 않을 수도 있습니다.

  ● a | b : a 또는 b 둘 중에 하나를 선택합니다.

     "|"는 파이프 라인 기호로 키보드의 역슬래시(\) 키를 Shift 키를 누른 채로 누르면 나옵니다.

  ● a? : a가 0번 나오거나 1번만 나올 수 있음

  ● a* : a가 0번 나오거나 그 이상 계속 나올 수 있음

  ● media_type : all, screen, print 등 명세에 정의된 미디어 타입

  ● media_feature : width, orientation 등 명세에 정의된 미디어 특성

​

위 Syntax를 요약하면

media_query_list

: 여러개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표를 이용해서 구분합니다.

media_query

: A 형태 - 미디어 타입에 and 키워드를 이용해서 미디어 표현식을 붙일 수 있습니다.

미디어 타잎 앞에는 only 또는 not 키워드가 올 수 있습니다.

미디어 표현식은 생략 가능하기 때문에 미디어 타입 단독으로 사용될 수 있습니다.

: B 형태 - 미디어 타입 없이 미디어 표현식이 바로 나올 수 있습니다.(미디어 타입이 명시되지 않으면 all로 간주합니다.)

미디어 표현식은 and 키워드를 이용해서 계속해서 나올 수 있습니다.

expression

: 미디어 표현식은 괄호로 감싸야 하며, 특성 이름과 해당하는 값으로 이루어집니다. 이름과 값은 : 기호로 연결합니다.

또, 값이 없이 특성 이름만으로도 작성할 수 있다.

​

▶ min-/max- 접두사

미디어 특성은 이름 앞에 min- 또는 max- 접두사를 붙일 수 있습니다.

실제로 반응형 사이트를 제작할 때는 보통 접두사를 붙여서 사용합니다.

접두사를 붙이지 않고 사용하는 경우 대부분 효율적이지 못하기 때문입니다.

예를 들어 대부분의 반응형 사이트는 width 특성을 이용하는데, 접두사 없이 width: 00px 이라고 하게 선언하면

정확히 뷰포트의 크기가 00px 에서만 적용되기 때문에, 다양한 기기들을 대응하기 힘듭니다.

​

그래서 접두사를 사용하여 범위를 지정하게 되면 훨씬 간결하게 반응형 사이트를 제작할 수 있습니다.

​

▶ 예제 코드

위에서 정의한 Syntax 따라 유효한 미디어 쿼리 예제 코드를 살펴보고 어떻게 해석이 되는지 같이 봅니다.

@media screen { ... }

: 미디어 타입이 screen이면 적용됩니다.

@media screen and (min-width: 768px) { ... }

: 미디어 타입이 screen이고 width가 768px 이상이면 적용됩니다. 두 개 중 하나라도 만족하지 않으면 거짓이 됩니다.

@media (min-width: 768px) and (max-width: 1024px) { ... }

: and는 연결된 모든 표현식이 참이면 적용됩니다.(and 키워드는 연결된 부분이 모두 참이어야 적용이 됩니다.)

@media (color-index)

: 미디어 장치가 color-index를 지원하면 적용됩니다.

@media screen and (min-width: 768px), screen and (orientation: portrait), ...

: 쉼표로 연결된 미디어 쿼리 중 하나라도 참이면 적용됩니다.( and 키워드와 반대라고 생각하면 됩니다.)

@media not screen and (min-width: 768px)

: not 키워드는 하나의 media_query 전체를 부정합니다.

: (not screen) and (min-width: 768px) 잘못된 해석!

: not (screen and (min-width: 768px)) 올바른 해석!

: @media not screen and (min-width: 768px), print

첫 번째 미디어 쿼리에만 not 키워드가 적용되며, 두 번째 미디어 쿼리(print)에는 영향이 없습니다.

​

▶ 미디어 쿼리 선언 방법

미디어 쿼리를 선언하는 3가지 방법에 대해 알아보겠습니다.

참고로 @media를 이용한 방법을 가장 많이 사용하며 나머지 2가지 방법은 거의 쓰이지 않습니다.

@media screen and (color)

: CSS 파일 내부에 또는 <style> 태그 내부에 사용가능 합니다. 대부분의 경우 이렇게 사용합니다.

<link rel="stylesheet" media="screen and (color)" href="example.css">

: <link> 태그의 media 속성에 미디어 쿼리를 선언합니다. 미디어 쿼리가 참이면 뒤에 css 파일 규칙이 적용됩니다.

@import url(example.css) screen and (color);

: CSS 파일 내부에 또는 <style> 태그 내부에 사용가능 합니다. @import문 뒤에 미디어 쿼리를 선언하면 됩니다.

 

Media Queries

---

4) 실습

실습 1. 디스플레이 크기에 따른 body요소의 background-color 변경

세부 조건

  ● 0~767px 이면 : gold

  ● 768px~1024px 이면 : lightblue

  ● 1025px~ 이면 : lightpink

width 미디어 특성을 이용해서 뷰포트 가로 크기에 따라 배경 색상이 변경되는 예제를 만들어봅니다.

@media (max-width: 767px) {
	body { background-color: gold; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	body { background-color: lightblue; }
}
@media (min-width: 1025px) {
	body { background-color: lightpink; }
}

위 코드의 경우, 3개의 조건을 만족하기 위해 3개의 미디어 쿼리를 작성했습니다.

위 코드도 우리가 의도한 대로 정상적으로 잘 동작하지만,

1개의 조건을 기본 body 요소의 배경 색상으로 지정해놓게되면 다른 2개의 미디어 쿼리만 이용해도 가능합니다.

어떤 조건을 기본으로 정할지는 작성하는 사이트가 모바일 사이트인지, 데스크탑 사이트인지를 먼저 구분해야 합니다.

모바일 중심의 사이트라면(모바일 first) 모바일에 해당하는 조건의 배경 색상을 기본으로 선언하면 되고,

데스크탑 중심의 사이트라면(데스크탑 first) 데스크탑에 해당하는 조건의 배경 색상을 기본으로 선언해놓으면 됩니다.

만들어진 미디어 쿼리를 수정해서, 모바일 first인 경우 또 데스크탑 first인 경우대로 한번씩 작성을 해보겠습니다.

- mobile first

/* mobile first*/
body { background-color: gold; }
@media (min-width: 768px) and (max-width: 1024px) {
	body { background-color: lightblue; }
}
@media (min-width: 1025px) {
	body { background-color: lightpink; }
}

- desktop first

/* desktop first*/
body { background-color: lightpink; }
@media (min-width: 768px) and (max-width: 1024px) {
	body { background-color: lightblue; }
}
@media (max-width: 767px) {
	body { background-color: gold; }
}

---

실습 2. 웹 페이지를 인쇄하는 경우의 스타일 추가

세부 조건

  ● 앵커 요소의 url 출력

  ● 앵커 요소의 밑줄 제거

미디어 타입 print를 이용하면, 인쇄될 경우에 적용되는 스타일을 추가할 수 있습니다.

먼저 앵커 요소의 url 을 텍스트 뒤에 붙여서 나타나게 하고, 링크임을 표시해주는 밑줄도 제거를 하겠습니다.

웹 페이지를 인쇄할 경우에는 앵커 요소가 가리키는 url을 문서에 같이 출력해주는게 내용을 이해하는데 훨씬 좋습니다.

실제 인쇄를 하지 않더라도 브라우저에서 제공하는 인쇄 미리보기 기능을 이용하면 화면으로 확인이 가능합니다.

@media print {
	a { text-decoration: none; }
	a:after { display: inline; content: '(' attr(href) ')'; }
}

---

5) Viewport의 이해

스마트폰 이전 시대에는 대부분의 웹 페이지가 데스크탑 모니터 사이즈를 고려해서 제작되었기 때문에

모바일 기기처럼 작은 화면에서는 모두 보이지 않아 좌우로 스크롤을 해야만 내용을 볼 수가 있었습니다.

그래서 모바일 브라우저들은 뷰포트(viewport)라는 가상의 화면을 만들고 그 화면에 페이지를 나타내기 시작했습니다.

(기기마다 다르지만 대부분 일반적인 데스크탑 모니터 사이즈와 비슷하게 대부분 980px 입니다.)

 

여기에서 실제 우리가 보는 스마트폰의 스크린 사이즈(device-width/height)와

브라우저가 화면을 나타내는 가상의 화면 사이즈(viewport)의 차이가 생기게 됩니다.

 

기본 뷰포트의 크기가 980px이기 때문에 width가 980px 정도인 웹 페이지를 모바일 브라우저로 보게 되면

가로 스크롤 없이 딱 화면에 맞춰 나옵니다. 그렇게 되면 스크롤 하지 않아도 내용이 다 보여지는 장점이 있지만

글자나 그림들이 그 폭에 맞춰서 작아지기 때문에 가독성이 매우 떨어집니다.

 

그래서 모바일 safari에서 뷰포트를 설정할 수 있는 태그를 도입해서

뷰포트의 크기와 스케일을 조정할 수 있게 했습니다.

 

뷰포트 설정

뷰포트를 설정하는 태그는 <meta> 태그로 <head> 태그에 위치해야 합니다.

name 속성에 "viewport"라고 선언하며 content 속성에 뷰포트를 설정하는 내용이 들어갑니다.

<meta name="viewport" content=" 뷰포트의 설정 값" >

content에는 몇 가지 설정을 할 수 있습니다.

● width(height) : 뷰포트의 가로(세로) 크기를 지정합니다. px단위의 수치가 들어갈 수 있지만, 대부분 특수 키워드인 "device-width(height)"를 사용합니다.(뷰포트의 크기를 기기의 스크린 width(height) 크기로 설정한다는 의미입니다.)

● initial-scale : 페이지가 처음 나타날 때 초기 줌 레벨 값을 설정합니다.(소수값)

● user-scalable : 사용자의 확대/축소 기능을 설정할 수 있습니다.

​

대부분의 모바일 웹 사이트의 뷰포트 설정은 아래와 같습니다. 기타 다른 설정은 필요에 따라 하시면 됩니다.

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

 

 

반응형 웹의 미디어 쿼리 (Media Query) 와 Viewport

---

 

[부스트코스] 비전공자를 위한 HTML/CSS 강좌소개 : edwith

위 5개 내용은 부스트코스 무료 강의에서 들을 수 있습니다🥰

​

#HTML #CSS #HTMLCSS #HTML문법 #HTML태그 #HTML속성 #HTML태그중첩 #HTML빈태그 #HTML주석 #HTML문서구조 #HTML공부 #HTML연습 #HTML기초 #미디어쿼리 #Mediaquries #syntax #Viewport #display #visibility #float #clear #position #z_index #유효성 #유효성검사 #typography #fontfamily #lineheight #vertical_align #text_align #text_indent #text_decoration #white_space #letter_spading #word_spading #word_break #word_wrap #webfont #font #fontsize #fontweight #fontstyle #fontvariant #boxmodel #content #padding #border #margin #width #height #CSS정의 #CSS속성 #CSS단위 #CSS색상 #CSS구체성 #CSS상속 #상속 #CSS선택자 #CSS문법 #CSS구문 #문서구조 #가상선택자 #가상클래스 #가상요소 #class #id #선택자 #속성선택자 #inline #internal #external #import #제목태그 #콘텐츠모델 #시멘틱웹 #시멘틱마크업 #HTML5 #HTML5시멘틱 #block #inline #h1 #단락태그 #p #개행 #br #텍스트표현태그 #앵커 #a #href #target #내부링크 #div #span #ul #ol #dl #img #src #alt #상대경로 #절대경로 #gif #jpg #png #table #tr #th #td #caption #thead #tbody #tfoot #colspan #rowspan #form #input #text #password #radio #checkbox #file #submit #reset #button #image #select #textarea #label #fileset #legend #article #aside #figure #figcaption #header #main #footer #mark #nav #section #summary #time #background #코딩 #코딩공부 #코딩연습 #코딩독학 #비전공자 #부스트코스 #부스트코스HTML #부스트코스강의 #edwith