LINKS
MDN - metadata
w3schools - meta tag
samsungsds - Responsive Web ① – 반응형 웹을 위해 개발자가 꼭 알아야 하는 기술들
samsungsds - Responsive Web ② - 반응형 웹을 위한 레이아웃 설계 방법
MDN - using media queries
MDN - viewport meta tag
experienceleague.adobe - mobile viewports
quirksmode - A tale of two viewports
developer.apple - using the viewport
Responsive Web Design
INTRO
반응형 웹 디자인을 구현해보고 핵심적인 것만 추려보자면 HTML에는 <header> 안에 <meta name="viewport" content="width=device-width, initial-scale=1.0"> (일반적인 모바일 최적화 코드)를, CSS에는 @media ... { ... }와 같이 원하는 media type에 대응하는 css 속성과 값을 넣어주면 한다.
하지만 우리는 어떻게 <meta> 태그를 사용하고, viewport와 media라는 키워드를 사용해서 반응형 웹 디자인을 구현할 수 있는지 알아봐야 한다.
Responsive Web Design은 반응형 웹 디자인으로 번역된다. Response가 ‘반응하다’로 번역되니 반응형이라 불리는 듯한데 ‘반응’보다는 ‘대응’이라고 번역했어도 괜찮았을 듯 싶다.
예전엔 PC에서만 웹을 보는 게 당연했을 것이다. 하지만 스마트 기기의 출현 이후, 기존의 웹사이트가 다양한 기기의 화면 크기에 일일이 맞지 않는 현상이 발생했다. 각기 다른 화면의 크기에 ‘대응’ 하기 위해 ‘Responsive Web Design’이 대두되기 시작했다.
meta란 무엇인가?(HTML)
<meta> 요소는 <base>, <link>, <script>, <style>, 혹은 <title>과 같은 meta 관련 요소로 나타낼 수 없는 메타데이터를 나타내게 도와준다.
메타데이터는 데이터를 설명하는 데이터이다. HTML 문서 자체가 데이터이지만, <head>에 해당 문서(데이터)를 설명하는 데이터를 가질 수 있다. 예를 들면 누가 해당 문서를 작성했고, 문서에 대한 요약을 포함할 수 있다.
<meta> 요소가 제공하는 메타데이터의 타입은 다음과 같다:
<meta name="...">처럼 name 속성이 쓰이는 경우:
- 문서 레벨의 메타데이터로써 작동함
<meta http-equiv="...">처럼 http-equiv 속성이 쓰이는 경우:
- pragma directive로써 작동함
<meta charset="...">처럼 charset 속성이 쓰이는 경우:
- 문서의 캐릭터 인코딩과 관련
<meta itemprop="...">처럼 itemprop 속성이 쓰이는 경우
- 사용자 정의 메타데이터 제공과 관련
이 중 반응형 디자인에서 사용되는 건 1번이다. Name과 content 속성은 name-value 쌍으로 같이 올 수 있다. name엔 메타데이터 이름을, content에는 값을 준다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width 속성은 viewport의 사이즈를 조정할 수 있게 한다. width=600과 같이 수치를 지정해줄 수 있지만, width=device-width로 할 시에 웹페이지가 보여지는 기기의 width에 맞게 CSS 픽셀로 viewport 크기가 지정되므로, 즉 모바일에 더 최적화되므로, 수치를 직접적으로 기재하는 일은 잘 없다. (참고로 height속성과 device-height 속성값도 존재한다)
initial-scale 속성은 페이지가 처음 로딩되었을 때의 줌 레벨을 의미한다. maximum-scale, minimum scale, user-scalable과 같은 속성이 있다. 이러한 속성들은 initial scale과 width에 영향을 주고, 줌 레벨의 변화에도 제한을 준다.
반응형 웹 디자인을 위해 우리가 자주 쓰게 될 다음의 라인이 좀 더 이해가 된다.
Viewport
Viewport란 컴퓨터 그래픽에서 현재 보고 있는 다각형(주로 사각형)의 영역을 의미한다. 웹 브라우저에서는 윈도우에서 현재 보고 있는 문서를 의미한다. 따라서 viewport 밖의 영역은 스크롤을 하기 전까진 보이지 않는다 (스크롤할 영역이 더 있는 페이지의 경우).
Viewport는 layout viewport와 visual viewport라는 개념이 있다.
layout viewport VS visual viewport
layout viewport는 브라우저가 웹페이지를 그려넣는 viewport를 의미한다.
visual viewport는 현재 기기에서 보이는 viewport를 의미한다. 화면에 떠있는 가상 키보드와 같이 온스크린 형식으로 떠있는 요소를 제외한 페이지의 영역을 의미한다.
정의만으론 헷갈릴 수 있다. 모바일에서의 핀치 기능 (두 손가락을 이용해 현재 보고 있는 웹페이지를 확대하거나 축소하는) 때문에 layout viewport와 visual viewport로 종종 구분짓게 한다.
예를 들어보자. 현재 m.naver.com에 접속했다. 현재 확대되거나 축소되지 않은 상태이다. 브라우저가 네이버 페이지를 그려넣은 layout viewport는 계속 유지될 것이고, 핀칭으로 영향 받지 않는다.
핀칭으로 현재 보는 페이지를 확대했다. 검색창쪽으로 확대해볼수도 있고, 아래 뉴스 기사 링크쪽을 확대해볼수도 있다. 이러한 행위로 visual viewport는 계속 달라진다.
@viewport는 무엇?
지금은 deprecated 되었지만 CSS에서 viewport at-rule이 존재했다. 현재 HTML의 <meta name="viewport">가 이를 대체한다. 아래처럼 사용되었다.
@viewport {
width: 100vw; /*Sets the width of the actual viewport to the device width*/
}Media query
Media query는 CSS3에서 소개된 기술로 @media at-rule을 사용해 각기 다른 미디어 형식과 기기에 각기 다른 스타일을 적용하기 위해 사용된다.
Media types
미디어 타입은 기기의 기본적인 종류를 설명한다. 미디어 타입은 필수적으로 필요하지 않고, 타입이 명시되지 않은 상태에선 all을 적은 것과 같다.
1. all
모든 기기에 적합한 상태를 의미한다.
2. print
print preview 모드에서 보여지는 문서를 의미한다.
3. screen
screen을 위한 것이다.
4. speech
speech synthesizer 타입을 위한 것이다.
logical operator
and, not, only, comma(,)와 같은 다양한 논리 연산자를 조합해 미디어 쿼리를 구성할 수 있다.
