-
Chapter 01 반응형 웹 기본 개념 이해하기_2Do it! 반응형 웹 페이지 만들기 2022. 11. 29. 13:15
반응형 웹 제작을 위한 핵심 기술 맛보기
반응형 웹을 제작할 때는 여러 가지 기술이 필요합니다. 화면 크기나 환경의 변화를 감지하는 기술, 화면 크기를 정확하게 제어하는 기술, 그리고 감지한 화면 크기로 변환하는 기술 등 다양한 기술이 필요합니다. 이 기술들에 대해서는 02장에서 살펴보기로 하고 우선 여기서는 반응형 웹 제작에 필요한 네 가지 기본 개념만 익히고 넘어가겠습니다.
픽셀은 한계가 있다! - 가변그리드
우선 가변 그리드(Fluid Grid)라는 개념을 이해하고 있어야 합니다. 가변 그리드는 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술입니다.
'가변'또는 '가변적이다'라는 말은 무슨 의미일까요? 학창시절 과학 시간에 어떠한 물체 또는 공을 늘이거나 줄이는 실험을 하면서 '가변적이다' 또는 '유동적이다'라는 말을 한 번쯤 들어보았을 것입니다. 이렇듯 가변이라는 말은 어떠한 객체/물체 또는 사물이 늘어나거나 줄어들거나 성질이 변하는 것을 말합니다.
그렇다면 그리드란 무엇일까요? 종이에 규칙적인 간격으로 그림을 그리고 싶을 때 우리는 먼저 종이의 길이를 재고 간격을 계산하여 줄자를 종이에 대고 규칙적인 선을 그을 것입니다.
바로 이러한 작업 또는 개념을 '그리드' 또는 '그리드 작업'이라고 합니다. 본래 그리드란 격자나 눈금을 말하지만 웹 디자인에서 말하는 그리드는 웨 페이지의 가로 크기 또는 세로 크기, 여백, 단 수 등 웹사이트의 구조 설계를 위한 의미로 사용되고 있습니다.
지금까지는 웹사이트를 만들 때 픽셀(px) 크기로 계산을 했다면 반응형 웹을 만들 때는 모든 요소를 퍼센트(%)로 계산합니다. 가변 폭에 따라 내용들도 가변적이게 늘어나거나 줄어듭니다.
고정 크기의 박스를 가변 크기의 박스로 변환하기
고정된 크기(px)로 제작된 박스를 가변적인 박스(%)로 변환하는 간단한 실습을 진행해 보겠습니다.
다음 예제의 코드들을 하나 하나 다 이해할 필요는 없습니다. 본격적으로 가변 그리드를 적용하는 방법은 02장에서 자세히 설명할 것이므로 여기서는 '이런 게 가변그리드구나!'라는 정도로만 이해하고 넘어가면 됩니다.
1. 먼저 파일을 크롬으로 실행해 보세요. 그런 다음 웹 브라우저의 크기를 줄이면 가로 너비가 줄어들면서 오른쪽 화면이 잘려 보이지 않을 것입니다.
박스가 고정된 크기(px)로 제작되어 있기 때문에 화면 크기가 변경되어도 박스가 수정되지 않는 것이죠.
이제 이 박스를 가변 크기의 박스로 변환해 보겠습니다.
2. 박스를 가변 크기로 변경하기 위해 편집기에서 01_1.html 파일을 불러옵니다.
3. 여기서는 간단히 가로 너비만 수정해 보겠습니다. 소스 중 가로 너빗값인 960px울 90%로 변경합니다.
#wrap{ width: 90%; height: 500px; margin: 0 auto; background: #e65d5d; border: 4px solid #000; }4. 이제 수정한 01_1.html 파일을 저장한 후 크롬에서 실행해 보세요.
가로 너비가 넓을 때는 차이가 없지만 가로 너비를 줄이면 폭에 맞게끔 박스의 크기가 줄어든 것을 확인할 수 있습니다. 이것을 가변 그리드 기술이라고 합니다.
(예제를 실행할 때는 동일한 결과물을 확인하기 위해 반드시 구글 크롬 브라우저를 이용하세요.)
하지만 px을 %로 바꾸어도 바응형 웹이 완성되지는 않는데, 이는 비율로 제작하면 가변적으로 작동하기는 하지만 기기나 환경에 따라 구조를 바꾸지는 못하기 때문입니다.
그래서 화면을 제어할 '뷰포트'와 화면의 크기나 환경을 감지하여 구조를 바꿔줄 '미디어 쿼리'가 필요합니다.
그럼 지금부터 미디어 쿼리와 뷰포트에 대해 알아볼까요?
미디어 쿼리와 뷰포트
화면의 크기와 환경 감지 및 웹사이트를 변경하는 기술 - 미디어 쿼리
미디워 쿼리(Media Queries)란 컴퓨터나 기기에게 '너는 어떤 종류의 미디어니?' 또는 '미디어의 화면 크기는 어느 정도나 되니?'라고 미디어에게 질문하고 감지하여 웹사이트를 변경하는 기술입니다.
컴퓨터나 기기의 환경 또는 종류를 감지해야 그 기기에 맞게 웹사이트의 구조를 바꿀 수 있기 때문에 반응형 웹을 제가할 때 반드시 필요한 기술이죠.
※ '미디어 쿼리'에서 쿼리란 무엇일까요?
혹시 컴퓨터 같은 기기를 사용하면서 기기에게 질문을 하고 있다는 느낌을 받아본 적이 있나요? 그런 느낌을 받아본 적이 있다면 아마 여러분들은 이미 알고 있는 내용일지도 모르겠네요.
우리가 실제로 기기를 사용하면서 하는 모든 행동들은 기기에게 질문을 하고 있는 것이라 할 수 있습니다. 예를 들어 컴퓨터 자판을 누르면서 컴퓨터에게 '자판을 눌렀으니 글자를 나타내줄 수 있겠니?'라고 묻고 만약 문제가 없다면 컴퓨터가 그에 해당하는 답변을 주는 것과 같습니다. 물론 마우스도 마찬가지입니다.
이처럼 우리가 컴퓨터나 기기를 사용하면서 매번 질문을 하는 작업을 컴퓨터 용어로는 '질의' 또는 '쿼리(query)', '쿼리 작업'이라고 부릅니다.화면을 제어하는 기술 - 뷰포트
뷰포트(Viewport)는 화면에 보이는 영역을 제어하는 기술로, 미디어 쿼리로 수많은 기기의 화면 크기를 감지해야 할 때 꼭 필요합니다. (뷰포트는 모니터나 기기의 화면을 통해 보이는 영역을 뜻하기도 합니다.)
데스크톱은 사용자가 지정한 해상도에 따라 보이는 영역이 결정되지만 스마트 기기는 기본 설정값이 자동으로 보이는 영역으로 설정되기 때문에 미디어 쿼리를 사용해도 스마트 기기에서 화면의 크기를 정확하게 감지하지 못합니다. 이처럼 스마트 기기의 보이는 영역을 기기의 실제 화면 크기로 변경하여 미디어 쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록 하기 위해 뷰포트라는 기술을 이용하는 것이죠.
앞의 설명이 잘 이해되지 않을 수도 있을 겁니다. 그래서 이번에는 테스트해 보면서 데스크톱 뷰포트와 스마트 기기 뷰포트의 차이를 비교해 보겠습니다. 그리고 미디어 쿼리를 적용해 보겠습니다.
뷰포트 비교하기
뷰포트가 정확히 어떤 기술인지 알려면 뷰포트 기술을 사용하지 않은 파일과 사용한 파일을 각각 호스팅 서버에 올려 스마트 기기와 데스크톱 기기를 이용해서 각각 비교해야 합니다. 그럼 지금부터 기기마다 뷰포트를 비교하는 작업을 시작해 볼까요?
1. 먼저 FTP 프로그램인 파일질라를 실행합니다.
2. '사이트 관리자' 대화상자에서 [새 사이트(N)] 버튼을 눌러 사이트를 추가합니다. '호스트'에는 미리 가입한 닷홈의 FTP 주소를, '사용자'와 '비밀번호'에는 닷홈 호스팅 홈페이지에서 가입한 아이디와 FTP 비밀번호를 입력하고 [연결] 버튼을 누릅니다.
3. 뷰포트가 적용되지 않은 파일 확인하기
FTP 프로그램을 이용해 호스팅 서버에 연결한 후 html 폴더를 더블 클릭합니다. 그리고 01_2.html 파일과 img_01.jpg 파일을 오른쪽 박스로 드래그합니다. 이 이미지 파일은 가로 너비가 300px인 그림 이미지입니다.
4. 이제 데스크톱과 스마트 기기로 'xxx.dothome.co.kr/01_2.html'처럼 자신의 호스팅 서버 주소와 업로드한 파일명을 주소 창에 입력하고 접속합니다.
확인해 보면 데스크톱에서는 문제가 없어 보이지만 스마트 기기에서는 그림이 더 작게 보입니다.
5. 스마트 기기에서 그림이 작게 보이는 문제를 해결하기 위해 01_2.html 파일을 편집기로 불러옵니다. 그리고 <head>, </head> 태그 사이에 뷰포트를 제어하기 위한 <meta> 태그를 작성합니다.
<head> <meta charset="UTF-8"> <meta name="Viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> /*<meta> 태그를 이용해서 화면의 크기나 배율을 조절해 줘야 미디어 쿼리가 정상적으로 작동할 수 있습니다.*/ <title>Document</title> </head>6. 이제 수정한 html 파일을 TP 프로그램인 파일질라를 이용해서 호스팅 서버에 업로드합니다.
7. 파일의 업로드가 완료되면 스마트 기기를 이용해 자신의 호스팅 주소와 업로드한 파일명을 주소창에 입력하고 접속합니다. 그럼 정상적으로 이미지가 크게 표현되는 것을 확인할 수 있습니다.
데스크톱과 스마트 기기의 뷰포트를 비교해 봤다면 이제는 미디어 쿼리 소스를 실습할 차례입니다. 앞에서도 설명했듯이 미디어 쿼리 기술을 활용해야 기기의 환경 또는 종류를 감지할 수 있고, 그 기기에 맞게 웹 사이트의 구조를 바꿀 수도 있습니다.
미디어 쿼리 사용하기
1. <head>, </head> 태그 사이에 <style> 태그를 입력합니다.
<head> <style> /*스타일을 설정하기 위한 태그입니다.*/ </style> </head>2. 이제 <style>, </style> 태그 사이에 미디어 쿼리 CSS 코드를 입력합니다. 웹 브라우저의 크기별로 다른 색을 지정하는 것입니다.
<!DOCTYPE HTML> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <title>Document</title> <style> @media all and (min-width:320px){ body{ background:#e65d5d; } } /*웹 브라우저의 크기가 320px 이상일 때 배경색을 빨간색 계열로 변경합니다.*/ @media all and (min-width:768px){ body{ background:#2dcc70; } } /*웹 브라우저의 크기가 768px 이상일 때 배경색을 초록색 계열로 변경합니다.*/ @media all and (min-width:960px){ body{ background:#6fc0d1; } } /*웹 브라우저의 크기가 960px 이상일 때 배경색을 파란색 계열로 변경합니다.*/ </style> </head> <body> </body> </html>3. 작성한 파일을 저장한 후 크롬에서 실행하여 창의 크기를 줄입니다. 크기에 따라 배경색이 변하는 것을 확인할 수 있습니다.
미디어 쿼리와 뷰포트에 대한 자세한 내용은 03장에서 좀 더 자세히 다룰 것이므로 여기서는 각 기술의 기본 정의에 대해서만 이해하고 넘어가세요.
떠오르고 있는 기술 - 플렉서블 박스
플렉서블 박스(Flexible Box)란 단어에서 알 수 있듯이 가변적인 박스를 만드는 기술인 동시에 웹사이트의 구조 설계를 위한 새로운 기술입니다.
또한 요즘 반응형 웹 제작 시 필수 기술인 가변 그리드 기술을 이용해서 만드는 가변적인 박스를 간단하게 만들어줄 뿐만 아니라 박스를 손쉽게 배치할 수 있다는 장점 때문에 반응형 웹과 플렉서블 박스는 환상의 콤비라고도 합니다.
지금까지는 반응형 웹이 무엇인지 사례를 통해 살펴보고, 반응형 웹을 제작할 때 어떤 기술들이 사용되는지에 대해 알아보았습니다.
각 기술들을 사용하는 구체적인 방법에 대해서는 02장에서 직접 실습해 보겠습니다. 이제부터는 각 기술의 문법과 조건문 등을 하나씩 살펴볼 것이므로 만약 가변 그리드와 미디어 쿼리, 뷰포트 등에 대한 개념이 잘 이해되지 않는다면 01장을 한 번 더 읽고 난 후에 02장으로 넘어가는 것이 좋습니다.
- 출처 : "반응형 웹 페이지 만들기"
'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글
Chapter 03 미디어 쿼리와 뷰포트 (0) 2022.12.01 Chapter 02 px을 %로 바꾸기 - 가변 그리드_3(가변 폰트 이용하기/멀티미디어 요소 가변적으로 만들기) (1) 2022.11.30 Chapter 02 px을 %로 바꾸기 - 가변 그리드_2(가변 마진과 가변 패딩 이해하기) (0) 2022.11.30 Chapter 02 px을 %로 바꾸기 - 가변 그리드_1(가변 그리드 배우기) (0) 2022.11.30 Chapter 01 반응형 웹 기본 개념 이해하기_1 (0) 2022.11.29