responsive | 반응형 웹
-
pc, 태블릿, 모바일 환경에 맞춰 레이아웃을 바꿔 보여주는 웹 기술을 말한다
-
사용자가 어떠한 기기를 통해 웹 사이트에 접속하면 meta태그의 viewport속성이 기기의 해상도 사이즈를 판단하여 그에 맞는 레이아웃을 보여준다.
-
meta태그는 화면의 해상도뿐만아니라 검색엔지의 검색 키워드를 판별하여 검색어 엔진(robots)이 해당 게시물을 걸러서 보여주게끔 만드는 역할도 하며, 언어의 인코딩도 담당한다.
viewport
-
반응형 웹 디자인에서 기본적으로 알아두어야 하는 것이 바로 'viewport'이다.
-
pc에 맞게 제작한 웹 사이트를 모바일 기기에서 접속해보면 모든 내용이 정비율로
줄어들어 작게 표시된다. -
그 이유은 pc화면과 모바일 화면에서 표시되는 픽셀의 차이때문인데, viewport를 지정하면 접속한 화면 기기에 맞춰 확대하거나 축소하여 표시 할 수 있다.
이때 viewport란 스마트폰 화면에서 실제로 내용이 표시되는 영역을 말한다. -
viewport는
<meta>태그를<head>태그 안에 작성한다.[기본형] | (단독태그)
<meta name='viewport' content='속성1=값, 속성2=값....'/>
[viewport 속성 종류]
width
: 뷰포트의 넓이. device-width또는 크기(px)를 값으로 사용한다.
기본값은 브라우저에서 설정한 기본값으로 사용한다.
-height
: 뷰포트의 넓이. device-height또는 크기(px)를 값으로 사용한다.
기본값은 width와 마찬가지로 브라우저에서 설정한 기본값을 쓴다.
user-scalable (yes=1=10)
: 확대/축소 여부. 사용하는 값은 yes 또는 no를 사용한다. 기본값은 yes이고
yes는 1이라는 뜻이고, 1은 device-width와 device-height값을 10으로 쓴다.
initial-scale
: 초기 확대 축소값. 1~10까지의 값을 사용하고, 기본값은 1이다.
반응형 단위
- viewport 개념이 등장하기 전까지는 css에서 크기를 지정할때 주로 px이나 %단위를 사용했다.
하지만 viewport 개념이 등장한 이후에는 vw,vh,vmin,vmax와 같은 단위를 함께 사용할 수 있다.vw(viewport width) : 1w는 브라우저의 넓이를 백분율로 나눴을때 1%라는 의미이다.
vh(viewport height) : 1vh 브라우저의 넓이를 백분율로 나눴을때 1%라는 의미이다. (스크롤과 관계없이 브라우저 창 기준)
vmin(vierport minimum) : 뷰포트의 넓이와 높이를 비교했을때 더 작은 값을 적용한다.
vmax(vierport maximum) : 뷰포트의 넓이와 높이를 비교했을때 더 큰 값을 적용한다.
반응형 요소 만들기
- 반응형 웹은 화면 크기에 따라 문서에 있는 여러 요소의 배치도 바뀌고 크기도 바뀐다.
- 상댓값으로 글자 크기를 지정하는 em, rem
- 글자 크기를 지정할때 px단위를 많이 사용한다. 하지만 px은 브라우저 넓이 높이와는 관계없이 항상 고정된 고정단위로, 반응형을 작업할 때 화면 사이즈가 작아지면
글자 크기를 제어하기가 어렵다. 이럴때에는 em또는 rem단위를 이용하여 글자의 크기를
상대적으로 지정할 수 있다.
em
-
em단위는 부모요소에서 지정한 글꼴의 대문자 M의 넓이를 1em으로 놓고 상대적으로 값을 계산한다.
-
부모 요소에 글자 크기를 지정하지 않았다면 body요소의 기본 크기를 사용한다.
-
body기본 글자 크기는 16px이고 이 값이 1em에 해당한다.
rem
-
em에서 부모요소의 글자 크기 때문에 예상하지 못한 결과가 나오는 것을 막기위해 rem단위가 생겼다.
-
rem은 root에서 지정한 크기를 기준값으로 한다.
-
이렇게 rem단위를 쓰면 중간에 부모의 폰트나 사이즈가 바뀌더라도 root를 기준으로만
글자 크기를 설정하기 때문에 늘 유지된 스타일로 디자인을 할 수있다.
가변 이미지
-
가변 이미지란 부모 요소 넓이에 따라 넓이와 높이가 바뀌는 이미지를 말한다.
-
이미지는 웹 문서에 불러올때부터 크기가 정해져 있으므로 브라우저 화면이
작아지면 이미지의 일부만 보일 수 있다. -
또는 부모영역이 이미지 기존 사이즈보다 커지면 이미지가 늘어나면서 화질이 떨어질 수 있으며 이를 방지하기위해 max-width나 object-fit을 사용하여 이미지를 제어할 수 있다.
이미지를 부모영역에 맞추는 다양한 방법
1. width : 100%로 설정하기
: 이미지의 넓이를 100%로 지정하면 이미지가 부모 요소의 넓이에
맞춰 항상 100%를 유지한다. 단, 부모영역의 높이가 더 높다면
빈 공간이 생길 수 있다.
2. max-widht : 100%로 설정하기
: width속성과 함께 max-widht를 100%를 사용하면 부모 요소의
크기에 따라 이미지가 커질때 원본 이미지만큼만 커진다.
즉, 부모요소가 아무리 커지더라도 사진의 원본사이즈보다 커질 수 없다.
