Responsive Web Design
LINKS
metadata
meta tag
Responsive Web ① – 반응형 웹을 위해 개발자가 꼭 알아야 하는 기술들
Responsive Web ② - 반응형 웹을 위한 레이아웃 설계 방법
INTRO
Responsive Web Design은 반응형 웹 디자인으로 번역된다. Response가 ‘반응하다’로 번역되니 반응형이라 불리는 듯한데 ‘반응’보다는 ‘대응’이라고 번역했어도 괜찮았을 듯 싶다.
각기 다른 화면의 크기에 ‘대응’하기 위해 ‘Responsive Web Design’이 대두되기 시작했다.예전엔 PC에서 웹을 보는 게 대세였을 것이다. 하지만 스마트 기기의 출현 이후, 기존의 웹사이트가 다양한 기기의 화면 크기에 일일이 맞지 않는 현상이 발생했다.
어떻게 하면 각 기기에 알맞은 웹사이트를 선보일 수 있을까? HTML에는 <header> 안에 <meta name="viewport" content="width=device-width, initial-scale=1.0">를, CSS에는 @media ... { ... }와 같이 원하는 type에 대응하는 css 속성을 넣어줘야 한다. 아래서 추가로 알아보자.
1. HTML
MDN에 따르면 <meta> (태그)는 <base>, <link>, <script>, <style>, 혹은 <title>과 같은 meta 관련 요소로 나타낼 수 없는 메타데이터를 나타내게 도와준다.
메타데이터는 데이터를 설명하는 데이터이다. HTML 문서 자체가 데이터이지만, HTML은 <head>에 해당 문서를 설명하는 메타데이터를 가질 수 있다. 예를 들면 누가 문서를 작성했고, 문서에 대한 요약을 포함할 수 있다.
<meta> 요소가 제공하는 메타데이터의 타입은 다음과 같다 (우리가 알아볼 것은 1번이다):
<meta name="...">처럼 name 속성이 쓰이는 경우:
- 문서 레벨의 메타데이터로써 작동함
<meta http-equiv="...">처럼 http-equiv 속성이 쓰이는 경우:
- pragma directive로써 작동함
<meta charset="...">처럼 charset 속성이 쓰이는 경우:
- 문서의 캐릭터 인코딩과 관련
<meta itemprop="...">처럼 itemprop 속성이 쓰이는 경우
- 사용자 정의 메타데이터 제공과 관련
Name과 content 속성은 name-value 쌍으로 같이 올 수 있다. name엔 메타데이터 이름을, content에는 값을 준다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
반응형 웹 디자인을 위해 우리가 자주 쓰게 될 다음의 라인이 좀 더 이해가 된다.
참고
@viewport {
width: 100vw; /Sets the width of the actual viewport to the device width/
}
처럼 쓰이는 @viewport는 deprecated 되었고 HTML의 <meta name="viewport">가 이를 대체한다.
- CSS
