2024. 4. 2. 17:54ㆍ웹 개발/반응형 웹 개발
본격적으로 가변 그리드 배우기
이제부터는 본격적으로 가변 그리드에 대해 알아보고 가변 그리드를 이용한 가변 마진 그리고 가변 패딩도 함께 알아보자
가변 그리드 공식 이해하기
앞에서 간단히 % 값을 이용해서 가변 크기의 박스를 만들어 보았다. 하지만 사실상 가변 그리드라는 기술은 정해져 있는 공식에 의해 정확한 가변 크기의 박스를 만드는 기술이다.
공식은 다음과 같다.
(가변 크기로 만들 박스의 가로 너비 / 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) * 100 = 가변 크기의 값
예를 들어 노란 박스를 감싸고 있는 테두리 박스의 가로 너비가 960px이고, 가변 크기로 만들 박스의 가로 너비가 300px이라면 노란 박스를 가변 크기로 만들기 위한 공식은 다음과 같다.
(300px / 960px) * 100 = 31.25%;
그렇다면 여기서 왜 100을 곱하는 것일까? 그 이유는 가변 크기의 박스는 비례형인 %값으로 지정되기 때문에 백분율로 표현하기 위해 100을 곱해준 것이다.
만약 이러한 계산법이 복잡하다면 100을 곱하지 않고 간단히 공식을 이용해서 나온 가변 크기의 값에서 앞의 두 자리를 앞당겨주기만 하면 된다.
서로 다른 크기의 박스를 가변 크기로 변환하기
이제 크기가 다른 두 개의 박스를 앞에서 배운 공식을 이용해 가변 크기의 박스로 제작해 보자.
먼저 테두리 박스(a)의 가로 너비는 960px로, 그리고 그 안에 있는 박스(b)의 가로 너비는 900px로 설정한다.
900px 박스 안의 자식 박스인 두 개의 박스(c, d) 크기는 각각 300px, 600px이다.
테두리 박스 안에 또 다른 박스가 하나 더 있는 이유는 감싸고 있는 요소가 하나 더 있기 때문에 이를 구분하기 위해 테두리를 넣는 것이다.
<body>,</body> 태그 사이에 <div> 태그들을 작성한다. <div> 태그는 요소를 묶기 위해 사용하는 태그이다.
전체를 감싸는 <div> 태그를 만드는 이유는 각 요소들의 너비를 %(백분율)로 바꿀 때 기준이 되는 너비가 필요하기 때문이다.
wrap 또는 wrapper라는 박스가 소스에 항상 있는 이유
다른 웹사이트의 소스를 보면 wrap 또는 wrapper라는 아이디를 쓰는 <div> 태그로 모든 태그들을 감싸고 있는 소스를 자주 볼 수 있다. 왜 이렇게 작업을 하는 것일까?
wrap 또는 wrapper라는 요소로 박스 전체를 감싸면 웹 문서 내용 전체의 크기나 배경색 등을 한꺼번에 조절할 수 있을 뿐만 아니라, 브라우저 화면 크기에 상관없이 웹 문서의 내용을 중앙에 배치할 수도 있다. 또한 반응형 웹에서는 자식 박스들이 가변 크기로 설정되었을 때 무제한으로 늘어나는 것을 방지할 수 있을 뿐만 아니라 자식 박스들을 가변 크기로 만들 때 기준 크기로 사용할 수도 있다.
<head>,</head> 태그 사이에 <style>,</style> 태그를 작성한다.
<style>,</style> 태그 사이에 wrap이라는 아이디를 가진 <div> 태그의 스타일을 설정한다. 먼저 고정 크기였던 960px를 가변 크기로 설정한다. 단, wrap 박스는 가장 상위의 박스이므로 가변 그리드 계산시 기준이 될 박스가 없기 때문에 임의로 설정한 값인 90%로 설정한다. 세로 높이는 500px로, 마진 값과 선값은 다음과 같이 설정한다.
wrap이라는 아이디를 가진 <div> 태그의 너빗값을 90%로 설정한다.
wrap이라는 아이디를 가진 박스의 너빗값을 임의로 설정한 또 다른 이유
최상위의 박스는 가변 그리드 공식을 사용할 수 없기 때문에 보통 임의 값으로 너빗값을 지정한다. 하지만 최상위 박스의 너빗값을 지정할 때 참고하면 좋은 또 다른 기준이 있다. 바로 기획, 디자인 단계에서 '이 정도의 크기로 보였으면 좋겠다'처럼 기획자나 디자이너가 미리 정해둔 목적(의도) 또는 크기를 최상위 박스의 너빗값으로 하는 것이다.
이처럼 반응형 웹사이트를 제작할 때는 기획자와 디자이너, 개발자 모두의 의견을 모아 협력해서 작업을 해야 한다.
이번에는 container라는 클래스명을 가진 <div> 태그의 스타일을 설정한다. 높이는 492px로 설정하고 마지막으로 마진값과 선값을 다음처럼 설정한다.
본래 크기인 900px을 가변 크기로 변환하기 위해 container 박스의 부모 박스인 wrap 박스의 가로 너비를 900px / 960px 공식을 이용해서 얻은 값인 93.75%로 설정한다.
이제 container의 자식 박스의 <div> 태그에 스타일을 설정한다. 태그를 어떻게 보일지 설정하는 display 속성의 값을 inline-block으로 설정한다. 그리고 높이는 100%로 설정한다.
마지막으로 container의 자식 태그인 두 개의 <div> 태그 중 첫 번째와 두 번쨰의 스타일을 각각 설정한다.
첫 번째 <div> 태그의 가로 너비인 300px을 가변 크기로 변환한다. 300px / 900px 공식을 잉요해서 얻은 값인 33.33.....%를 가로 너비로 설정한다(여기서 900px은 자신을 감싸고 있는 부모 박스의 가로 너비이다)
두 번째<div> 태그 역시 가로 너비인 600px에 동일한 공식을 이용해서 가변 크기인 66.66%를 가로 너비로 설정한다.
이제 완성된 파일을 실행해보자. 화면의 가로 너비를 줄여도 화면 오른쪽이 잘리지 않고 브라우저의 비율에 맞춰 박스의 크기도 줄어드는 것을 볼 수 있다.
'웹 개발 > 반응형 웹 개발' 카테고리의 다른 글
| 반응형 웹 제작을 위한 핵심 기술 맛보기 (0) | 2024.03.15 |
|---|---|
| 반응형 웹 개발 기본 개념 이해하기 (0) | 2024.03.13 |