티스토리 뷰
반응형 웹이란 무엇일까요?
화면에 맞게 웹페이지를 보여주는 것을 "반응형 웹"이라고 합니다. 미래의 일을 예상하기엔 힘들지만 확실한건 아주 다양한 화면을 가진 기기들이 나올 것이고, 지금보다도 더 많은 사물에서 인터넷으로 접속하는 것이 가능해질 겁니다. 그때마다 그 기계에 맞는 페이지를 따로 구성해야할까요? 그러기엔 돈도 시간도 너무 많이 들어가겠죠. 하나의 코드로 여러 기기마다 최적화되서 보여줄 수 있다는 건 정말 매력적인 일입니다.
모바일이 조금 더 많습니다. 휴대폰 없이 사는 건 정말 상상하기도 싫은 세상. 반응형 웹의 중요성은 말 안해도 아시겠죠? 이제부터 같이 만들어 봅시다.
가장 먼저 배워야 할 것들은 무엇일까요?
예제를 보면서 따라 만들어보기 전에 우선 알아두어야 할 개념이 3개 있습니다. 이번 포스팅에서는 그 3가지를 차근차근 배워보도록 하겠습니다.
1. 길이가 가변적이어야 합니다.
레이아웃 등을 구성할 때 px로 지정하게 된다면 휴대폰으로 봤을 때도 지정한 px로 보이게 될 겁니다. 그렇다면 전혀 반응형이라고 할 수 없겠죠? %단위로 만들어야 어떤 기기에서든 지정한 %로 보이게 될 것입니다.
<head> <title>예시 12번</title> <style> #wrap{ width: 90%; height: 700px; margin: 0 auto; border: 4px solid tomato; } #wrap div{ display: inline-block; height: 100%; } #left{ width: 30%; background-color: limegreen; } #right{ width: 70%; background-color: blue; } </style> </head> <body> <div id="wrap"> <div id="left"></div><div id="right"></div> </div> </body>
위의 소스코드를 복사해서 붙여 넣어 주세요. #wrap이라는 상자 안에 #left와 #right라는 두 개의 상자가 들어 있습니다. 우선 #wrap이라는 상자를 가운데에 두기 위해 margin 값을 0 auto으로 주었습니다. 크기는 전체화면의 90%로 지정했고, 구분하기 위해 4px에 토마토 색의 경계선을 주었습니다. 그리고 감싸고 있는 상자 안에서 왼쪽상자는 30%, 오른쪽 상자는 70%로 크기를 지정해 주었습니다.
상자를 웹 브라우저의 크기를 줄였다가 늘였다가 해보시면 계속 지정한 %(퍼센트) 값을 유지하는 것을 볼 수 있습니다. 이미지 파일도 마찬가지로 %로 지정해야합니다. 그럼 글자 크기는 어떻게 가변적으로 표현할 수 있을까요? 예제에서는 rem이라는 단위를 사용하겠지만 %와 같이 화면의 크기가 달라질 때 변하지는 않으므로 진정한 가변단위라고는 할 수 없습니다. 진정한 가변단위는 vw, vh, vmin, vmax입니다.
위의 단위들은 화면을 기준으로 삼고 글자크기를 정합니다. 예를 들면 vw를 웹 브라우저의 너비를 100으로 생각하여 글자크기를 결정합니다. 5vw는 브라우저 너비의 5%에 해당하는 크기입니다. 이와 비슷하게 vh는 웹 브라우저의 높이를 기준으로 생각해서 글자크기를 결정해 줍니다. vmin은 너비와 높이 둘 중에서 짧은 쪽을 기준으로 하고, vmax는 너비와 높이 둘 중에서 긴 쪽을 기준으로 합니다. 외우기 어려우시다고요? 단위에서 v는 viewport의 줄임말입니다. 뷰포트는 우리에게 보여지는 화면 영역을 나타냅니다. 그리고 w는 width, h는 height, min은 minimum, max는 maximum을 나타내죠. 무엇을 줄여쓴 것인지 알게되니 더 쉽게 느껴지지 않나요?
정리하자면, 길이는 가변적으로 지정해야 합니다. 레이아웃이나 이미지 등은 %로 지정해야하는 것이죠. 그리고 폰트는 vw, vh, vmin, vmax라는 가변 단위가 있습니다.
2. 뷰포트 메타태그를 사용해야 합니다.
3. 미디어 쿼리를 사용해야합니다.
only나 not의 경우 필요 없으면 사용하지 않으셔도 되고, 미디어유형은 생략하실 경우 미디어 전체를 뜻하는 all이 기본값이 됩니다. 조건문에는 min-width나 max-width와 같은 형태가 들어갑니다. min-width는 너비가 지정한 min-width값 이상일때 적용되고, max-width의 경우엔 너비가 지정한 max-width값 이하일 때 적용됩니다. @media all and (max-width:768px){실행문}의 경우엔 768px 이하일 경우엔 실행문이 실행됩니다. 이해가시나요? 실행문은 css구문이 들어갑니다. 예제로 살펴볼까요?
<style> /* 윗부분은 동일합니다 */ @media all and (max-width:768px) { #left{ background-color: blue; } #right{ background-color: limegreen; } } </style>
맨 처음 사용했던 코드 사이에 미디어쿼리문을 넣어주세요. 너비가 768px 이하일 경우에 왼쪽과 오른쪽의 색깔이 바뀌게 됩니다. 미디어쿼리문에 대해서 이해가 좀 되시나요?
오늘은 반응형 웹을 만들어 보기 전에 미리 알아야 할 것들에 대해서 배워보았습니다. 다음 포스팅부터는 하나씩 만들어보면서 익혀보는 시간을 가져보도록 하겠습니다.
공감은 제작자에게 큰 힘이 됩니다.
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| 반응형 웹 제작하기 2 (2) | 2018.01.27 |
|---|---|
| 간단한 반응형 웹 만들어보기 (0) | 2018.01.19 |
| css의 position 속성을 알아봅시다. (0) | 2018.01.16 |
| 플렉스를 활용한 네비게이션 바 만들기 4 (4) | 2018.01.12 |
| 플렉스를 활용한 네비게이션 바 만들기 3 (0) | 2018.01.11 |