요새 웹 디자인은 데스크탑으로 웹 사이트를 접속하나
모바일을 통해 웹 사이트를 접속하나 맞춤형으로 웹 디자인이 변경이 된다.
사용자의 접속 환경에 맞추어 사이트의 레이아웃을 자연스럽게 바꾸어
보여주는 것을 '반응형 웹 디자인'이라고 한다.
이런 반응형 웹 디자인에서 가장 기본적인 개념은
'뷰포트(viewprot)'라는 것이다.
뷰포트는 스마트폰 화면에서 실제 내용이 표시되는 영역으로
뷰포트를 지정해주게 되면, PC화면이나 모바일 화면에 맞추어 확대하거나 축소해서
레이아웃을 표시할 수 있다.
이런 뷰포트는
<meta> 태그를 이용해 <head></head> 태그 사이에 작성을 하는데
기본형태는
<meta name="viewport" cotent="속성1=값1", "속성2=값2". ... >이다.
뷰포트(viewport) 단위
뷰포트의 단위는
vw (viewport width) : 1vw는 뷰포트 너비의 1%와 같다.
vh (viewprot height) : 1vh는 뷰포트 높이의 1%와 같다.
vmin (viewport minimum) : 뷰포트 너비와 높이 중 작은 값의 1%와 같다.
vmax (viewport maximum) : 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같다.
예를 들어 뷰포트의 너비가 1200px, 높이가 600px인 경우
1vw은 12px, 1vh는 6px가 되는 것이다.
반응형 웹 디자인에서 알아야할 기본적인 개념으로
'미디어 쿼리'라는 것이 있다.
미디어 쿼리(media queries)란?
미디어 쿼리란 사이트에 접속하는 장치에 따라 특정한
CSS 스타일을 사용하는 방법이다. 미디어 쿼리를 사용하면 웹 사이트에 접속하는
기기의 화면 크기에 따라서 레이아웃이 다르게 적용이 된다.
아래 사이트는
미디어 쿼리를 이용하여 만든 사이트가 날짜별로 정렬이 되어 있다.
해당 사이트의 썸네일을 클릭하면 사이트로 이동이 된다.
해당 사이트를 참고하여 웹 브라우저 창의 크기에 따라 바뀌는 레이아웃을 실감해보자.
Media Queries
mediaqueri.es
위와 같은 미디어 쿼리를 사용하려면 아래와 같은 기본형으로 작성한다.
미디어 쿼리 기본형
@meida 미디어 유형 and [조건] and [조건]
미디어 유형에는 여러가지가 있는데,
all : 모든 미디어 유형
print : 인쇄 장치
screen : 컴퓨터 스크린, 스마트폰 스크린
tv : 음성 영상이 동시에 출력되는 TV 유형
이외에도
aural, braille, handheld, projection, tty, embossed 등이 있다.
작성 예시로는
@media screen and (min-width: 1170px) and (max-width: 2532) { }
와 같이 작성을 한다.
한번 미디어쿼리를 활용해 만들어보자.
여기서 bg1~ bg3의 이미지는 아무거나 다운로드 받고 이름을
bg1, bg2, bg3로 해놓으면 된다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body{
background: url(images/bg0.jpg) no-repeat fixed;
background-size:cover;
}
@media screen and (max-width: 1024px){
body{
background: url(images/bg1.jpg) no-repeat fixed;
background-size: cover;
}
}
@media screen and (max-width: 768px){
body{
background: url(images/bg2.jpg) no-repeat fixed;
background-size: cover;
}
}
@media screen and (max-width: 320px){
body{
background: url(images/bg3.jpg) no-repeat fixed;
background-size: cover;
}
}
</style>
</head>
<body>
</body>
</html>
해당 html 코드를 크롬으로 열어보게 되면
웹 사이트의 크기를 줄일 때마다 배경이미지가 바뀌는 것을 확인할 수 있다.
조금 더 자세히 확인을 하려면 F12 를 눌러 개발자도구를 연 다음에
개발자도구 창 왼쪽 상단에 있는 휴대폰 모양 아이콘을 클릭한다.
그리고
상단의 바를 클릭하며 크기를 변경해가면서 적용이 잘 되었는지 확인한다.
그런데 모바일 기기마다 뷰포트의 크기가 다르다.
미디어 쿼리를 작성하기 위해서 모든 기기의 해상도와 뷰포트 크깃값을
다 기억할 수는 없는 노릇이다.
이때 유용한 사이트 하나를 소개하겠다.
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
해당 사이트는 새로운 모바일 기기가 등장할 때마다
뷰포트 크기를 외우거나 따로 검색할 필요 없이
한 곳에 정리가 되어 있는 사이트이다.
이 사이트에 접속을 하면 바로 뷰포트 크기를 확인할 수 있을 뿐만 아니라
알고자하는 기기를 클릭했을 때
여러 상황에 맞는 CSS 미디어 쿼리 소스도 제공하므로 유용하게 활용할 수 있다 .
댓글