반응형 웹 제작을 위한 핵심 기술 맛보기

2024. 3. 15. 16:56ㆍ웹 개발/반응형 웹 개발

반응형 웹을 제작할 때는 여러 가지 기술이 필요하다. 화면 크기나 환경의 변화를 감지하는 기술, 홤녀 크기를 정확하게 제어하는 기술, 그리고 감지한 화면 크기로 변환하는 기술 등 다양한 기술이 필요하다.

 

픽셀은 한계가 있다. ㅡ 가면 그리드

우선 가변 그리드(Fluid Grid)라는 개념을 이해하고 있어야 한다. 가변 그리드는 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px)대신 퍼센트(%)로 제작하는 기술이다.

'가변' 또는 '가변적이다'라는 말은 무슨 의미일까? 학창시절 과학 시간에 어떠한 물체 또는 공을 늘이거나 줄이는 실험을 하면서 '가변적이다' 또는 '유동적이다'라는 말을 한 번쯤은 들어보았을 것이다. 이렇듯 가변이라는 말은 어떠한 객체/물체 또는 사물이 늘어나거나 줄어들거나 성질이 변하는 것을 말한다.

그렇다면 그리드란 무엇일까? 종이에 규칙적인 간격으로 그림을 그리고 싶을 때 우리는 먼저 좋이의 길이를 재고 간격을 계산하여 줄자를 종이에 대고 규칙적인 선을 그을 것이다.

바로 이러한 작업 또는 개념을 '그리드' 또는 '그리드 작업'이라고 한다. 본래 그리드란 격자나 눈금을 말하지만 웹 디자인에서 말하는 그리드는 웹 페이지의 가로 크기 또는 세로 크기, 여백, 단 수 등 웹사이트의 구조 설계를 위한 의미로 사용되고 있다.

지금까지는 웹사이트를 만들 때 픽셀(px) 크기로 계산을 했다면 반응형 웹을 만들 때는 모든 요소를 퍼센트(%)로 계산한다. 가변 폭에 따라 내용들도 가변적이게 늘어나거나 줄어든다.

 

고정 크기의 박스를 가변 크기의 박스로 변환하기

고정된 크기(px)로 제작된 박슬르 가변적인 박스(%)로 변환하는 간단한 실습을 진행해 보자.

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0; padding:0;}

#wrap{
width:960px;
height:500px;
margin:0 auto;
background:#e65d5d;
border:4px solid #000;
}
</style>
</head>
<body>
    <div id="wrap">
    </div>
</body>
</html>

여기서 가단히 가로 너비만 수정해 보자. 소스 중 가로 너빗값인 960px를 90%로 변경한다.

#wrap{
width:90%;
height:500px;
margin:0 auto;
background:#e65d5d;
border:4px solid #000;
}

이제 수정된 html 파일을 저장 후 실행 해 보자.

가로 너비가 넓을 때는 차이가 없지만 가로 너비를 줄이면 폭에 맞게끔 박스의 크기가 줄어든 것을 확인할 수 있다.

이것을 가변 그리드 기술이라고 한다.

 

가로 너비 수정 전

 

가로 너비 수정 후

 

하지만 px을 %로 바꾸어도 반응형 웹이 완성되지는 않는데, 이는 비율로 제작하면 가변적으로 작동하기는 하지만 기기나 환경에 따라 구조를 바꾸지는 못하기 때문이다.

그래서 화면을 제어할 '뷰포트'와 화면이 크기나 환경을 감지하여 구조를 바꿔줄 '미디어 쿼리'가 필요하다.

 

미디어 쿼리와 뷰포트

화면의 크기와 환경 감지 및 웹사이트를 변경하는 기술 ㅡ 미디어 쿼리

미디어 쿼리(Media Queries)란 컴퓨터나 기기에서 '너는 어떤 종류의 미디어니?" 또는 '미디어의 화면 크기는 어느 정도나 되니?'라고 미디어에서 질문하고 감지하여 웹사이트를 변경하는 기술이다.

컴퓨터나 기기의 환경 또는 종류를 감지해야 그 기기에 맞게 웹 사이트의 구조를 바꿀 수 있기 때문에 반응형 웹을 제작할 때 반드시 필요한 기술이다.

화면을 제어하는 기술 ㅡ 뷰포트

뷰포트(Viewport)는 화면에 보이는 영역을 제어하는 기술로, 미디어 쿼리로 수많은 기기의 화면 크기를 감지해야 할 때 꼭 필요하다.

데스크톱은 사용자가 지정한 해상도에 따라 보이는 영역이 결정되지만 스마트 기기는 기본 설정값이 자동으로 보이는 영역으로 설정되기 때문에 미디어 쿼리를 사용해도 스마트 기기에서 화면의 크기를 정확하게 감지하지 못한다. 이처럼 스마트 기기의 보이는 영역을 기기의 실제 화면 크기로 변경하여 미디어 쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록 하기 위해 뷰포트라는 기술을 이용하는 것이다.

 

미디어 쿼리 사용하기

<style>
@media all and (min-width:320px){
body{
background:#e65d5d;    
}
}
@media all and (min-width:768px){
body{
background:#2dcc70;
}
}
@media all and (min-width:960px){
body{
background:#6fc0d1;
}
}
</style>

웹 브라우저의 크기가 960px 이상일 때 배경색이 파란색으로 변경됨
웹 브라우저의 크기가 768px 이상일 때 배경색이 초록색 계열로 변경됨
웹 브라우저의 크기가 320px 이상일 때 배경색이 빨간색으로 변경됨

 

떠오르고 있는 기술 ㅡ 플렉서블 박스

플렉서블 박스(Flexible Box)란 단어에서 알 수 있듯이 가변적인 박스를 만드는 기술인 동시에 웹 사이트의 구조 설계를 위한 새로운 기술이다.

또한 요즘 반응형 웹 제작 시 필수 기술인 가변 그리드 기술을 이용해서 만드는 가변적인 박스를 간단하게 만들어줄 뿐만 아니라 박스를 손쉽게 배치할 수 있다는 장점 때문에 반응형 웹과 플럭서블 박스는 환상의 콤비라고도 한다.

'웹 개발 > 반응형 웹 개발' 카테고리의 다른 글

px을 %로 바꾸기 - 가변 그리드  (0) 2024.04.02
반응형 웹 개발 기본 개념 이해하기  (0) 2024.03.13

관련글

티스토리툴바