동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
오늘날 인터넷은 생활입니다. 인터넷에 접속하는 미디어 역시 PC, 테블릿, 모바일, TV 등 다양합니다. 이렇게 많은 모든 장치, 모든 화면 크기에 자연스럽게 작동하도록 웹사이트를 구축하는 것이 필요합니다. 그런 것을 만족하는 기법이 반응형 웹디자인입니다.
반응형 웹디자인이란 용어는 에단 마코트라는 사람이 처음 언급을 하였습니다.
오늘날 반응형홈페이지는 부트스트랩 같은 프레임웍이 많이 나와서 쉽게 만들 수 있습니다.
다만, 반응형의 원리를 이해하기 위해 프레임웍을 사용하지 않고 먼저 만들어 보도록 하겠습니다.
일반 홈페이지를 반응형으로 만드는 방법에는 아래의 과정이 필요합니다.
HTML:
Viewport(뷰포트)
CSS:
Flexible layouts(유연한 레이아웃)
Media queries(미디어 쿼리)
Flexible Media(유연한 미디어)
ViewPort
뷰포트는 웹사이트를 탐색하는 브라우저의 크기라고 볼 수 있습니다.
PC는 브라우저의 크기를 사용자가 자유자재로 변경할 수 있지만 모바일은 그렇지 못합니다. 그래서 웹사이트를 최적의 환경에서 보는데 어려움이 있습니다.
이 문제를 해결하기 위해 애플에서 뷰포트 매타태그를 적용하기로 했습니다.
일반적으로 아래와 같이 <head>안에 메타태그를 추가하면 이 문제를 해결할 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1">Flexible layouts(유연한 레이아웃)
여기서 핵심은 고정수치값을 상대수치값으로 바꾸는 것입니다. 절대 수치값인 px 또는 inch는 유연한 레이아웃을 만드는데 방해가 됩니다.
em 또는 rem, %가 쓰이며 최근에는 vw, vh, vmin, vmax같은 것이 도입되었습니다.
상대 너비를 구하는 일반적인 공식 :
target ÷ context = result
그 외에 유연한 레이아웃을 위해 min-width, max-width 속성 등을 사용할 수 있습니다.
Media queries(미디어 쿼리)
유연한 레이아웃만으로는 최적의 환경을 만들 수 없습니다.
비율로 작아지면 모바일에서는 특정 컨텐츠 영역이 너무 작아져 보기가 흉해질 수 있습니다.
미디어쿼리는 뷰포트의 너비 또는 장치 방향에 따른 CSS를 선언할 수 있게 도와줍니다.
미디어쿼리 적용방법은 기존 스타일시트 화일내에서 @media규칙을 사용하거나 @import규칙을 사용하여 새 스타일 시트를 가져오는 방법, 그리고 HTML문서내에서 별도의 스타일 시트에 링크하여 사용하는 방법 두가지가 있습니다.
첫번째 방식은 html <head>안에 link요소를 이용하는 것입니다.
<!-- Separate CSS File -->
<link href="styles.css" rel="stylesheet" media="all and (max-width: 640px)">두번째 방식은 CSS화일내 규칙에 따라 CSS를 정의하는 것입니다.
/* @media Rule */
@media all and (max-width: 640px) {...}
/* @import Rule */
@import url(styles.css) all and (max-width: 640px) {...}
Flexible Media(유연한 미디어)
반응형 웹디자인의 마지막 단계일 수도 있는 유연한 미디어입니다.
이미지, 비디오 같은 미디어가 뷰포트 크기의 변경에 따라 자연스럽게 적용이 되도록 처리하는 것입니다.
가장 단순한 방법은 max-width를 이용하는 것입니다.
img, video, canvas {
max-width: 100%;
}
문제는 max-width속성이 모든 미디어 인스턴스에 제대로 작동하지 않을 수 있다는 것입니다. 특히 iframe에서 문제를 일으킵니다.
해결방법은 iframe을 다른 요소로 (예를 들면 div) 감싼다음 CSS를 아래와 같이 적용하면 됩니다.
HTML:
<div class="videoWrapper"><iframe src="https://player.vimeo.com/video/244630454" width="640" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
CSS :
.videoWrapper {
height: 0;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
width: 100%;
}
.videoWrapper iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
등록된 댓글이 없습니다.