-
Chapter 02 px을 %로 바꾸기 - 가변 그리드_1(가변 그리드 배우기)Do it! 반응형 웹 페이지 만들기 2022. 11. 30. 15:10
본격적으로 가변 그리드 배우기
이제부터는 본격적으로 가변 그리드에 대해 알아보고 가변 그리드를 이용한 가변 마진 그리고 가변 패딩도 함께 알아보겠습니다.
가변 그리드 공식 이해하기
앞에서 간단히 % 값을 이용해서 가변 크기의 박스를 만들어 보았습니다. 하지만 사실상 가변 그리드라는 기술은 정해져 있는 공식에 의해 정확한 가변 크기의 박스를 만드는 기술입니다.
공식은 다음과 같습니다.
(가변 크기로 만들 박스의 가로 너비 ÷ 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) x 100
= 가변 크기의 % 값예를 들어 노란 박스를 감싸고 있는 테두리 박스의 가로 너비가 960px이고, 가변 크기로 만들 박스의 가로 너비가 300px이라면 노란 박스를 가변 크기로 만들기 위한 공식은 다음과 같습니다.
(300px ÷ 960px) x 100 = 31.25% 그렇다면 여기서 왜 100을 곱하는 걸까요? 그 이유는 가변 크기의 박스는 비례형인 % 값으로 지정되기 때문에 백분율로 표현하기 위해 100을 곱해준 것입니다.
(만약 이러한 계산법이 복잡하다면 100을 곱하지 않고 간단히 공식을 이용해서 나온 가변 크기의 값에서 앞의 두 자리를 앞당겨주기만 하면 됩니다.)
서로 다른 크기의 박스를 가변 크기로 변환하기
이제 크기가 다른 두 개의 박스를 앞에서 배운 공식을 이용해 가변 크기의 박스로 제작해 보겠습니다.
먼저 테두리 박스(a)의 가로 너비는 960px로, 그리고 그 안에 있는 박스(b)의 가로 너비는 900px로 설정합니다. 900px 박스 안의 자식 박스인 두 개의 박스(c,d) 크기는 각각 300px, 600px입니다.
(테두리 박스 안에 또 다른 박스가 하나 더 있는 이유는 감싸고 있는 요소가 하나 더 있기 때문에 이를 구분하기 위해 테두리를 넣은 것입니다.)
1. 먼저 편집기를 실행시켜 실습 파일인 02_1.html을 불러옵니다.
2. <body>, </body> 태그 사이에 <div> 태그들을 작성합니다. <div> 태그는 요소를 묶기 위해 사용하는 태그입니다. 전체를 감싸는 <div> 태그를 만드는 이유는 각 요소들의 너비를 %(백분율)로 바꿀 때 기준이 되는 너비가 필요하기 때문입니다.
<body> <div id="wrap"> /*모든 태그를 감싸고 있는 박스를 만들기 위해 'wrap'이라는 아이디를 가진 <div> 태그를 작성합니다.*/ <div class="container"> <div></div><div></div> </div> </div> </body>※ wrap 또는 wrapper라는 박스가 소스에 항상 있는 이유
다른 웹사이트의 소스를 보면 wrap 또는 wrapper라는 아이디를 쓰는 <div> 태그로 모든 태그들을 감싸고 있는 소스를 자주 볼 수 있습니다. 왜 이렇게 작업을 하는 것일까요?
wrap 또는 wrapper라는 요소로 박스 전체를 감싸면 웹 문서 내용 전체의 크기나 배경색 등을 한꺼번에 조절할 수 있을 뿐만 아니라, 브라우저 화면 크기에 상관없이 웹 문서의 내용을 중앙에 배치할 수도 있습니다. 또한 반응형 웹에서는 자식 박스들이 가변 크기로 설정되었을 때 무제한으로 늘어나는 것을 방지할 수 있을 뿐만 아니라 자식 박스들을 가변 크기로 만들 때 기준 크기로 사용할 수도 있습니다.3. <head>, </head> 태그 사이에 <style>, </style> 태그를 작성합니다.
<head> ... <style> ... </style> </head>4. <style>, </style> 태그 사이에 wrap이라는 아이디를 가진 <div> 태그의 스타일을 설정합니다. 먼저 고정 크기였던 960px을 가변 크기로 설정합니다. 단, wrap 박스는 가장 상위의 박스이므로 가변 그리드 계산시 기준이 될 박스가 없기 때문에 임의로 설정한 값인 90%로 설정합니다. 세로 높이는 500px로, 마진값과 선값은 다음처럼 설정합니다.
<head> ... <style> ... #wrap{ width:90%; /* 960px */ /* wrap이라는 아이디를 가진 <div> 태그의 너빗값을 90%로 설정합니다. */ height:500px; margin:0 auto; border:4px solid #000; } ... </style> </head>※ wrap이라는 아이디를 가진 박스의 너빗값을 임의로 설정한 또 다른 이유!
최상위의 박스는 가변 그리드 공식을 사용할 수 없기 때문에 보통 임의 값으로 너빗값을 지정합니다. 하지만 최상위 박스의 너빗값을 지정할 때 참고하면 좋은 또 다른 기준이 있습니다. 바로 기획, 디자인 단계에서 '이 정도의 크기로 보였으면 좋겠다'처럼 기획자나 디자이너가 미리 정해둔 목적(의도) 또는 크기를 최상위 박스의 너빗값으로 하는 것입니다. 이처럼 반응형 웹사이트를 제작할 때는 기획자와 디자이너, 개발자 모두의 의견을 모아 협력해서 작업을 해야 합니다.5. 이번에는 container라는 클래스명을 가진 <div> 태그의 스타일을 설정합니다. 높이는 492px로 설정하고 마지막으로 마진값과 선값을 다음처럼 설정합니다.
(예제처럼 가변 크기로 변환하여 값을 적용한 곳 아래에는 사용한 공식을 주석으로 작성해야 합니다. 그래야 나중에 코드를 확인할 때 유용합니다.)
<head> ... <style> ... .container{ width:93.75%; /* 960px / 900px */ /* 본래 크기인 900px을 가변 크기로 변환하기 위해 container 박스의 부모 박스인 wrap 박스의 가로 너비를 900px / 960px 공식을 이용해서 얻은 값인 93.75%로 설정합니다. */ height:492px; margin:0 auto; border:4px solid #000; } ... </style> </head>6. 자식 박스의 가변 크기 설정하기
이제 container의 자식 박스의 <div> 태그에 스타일을 설정합니다. 태그를 어떻게 보일지 설정하는 display 속성의 값을 inline-block으로 설정합니다. 그리고 높이는 100%로 설정합니다.
(inline-block은 display 속성의 값 중 inline 속성값처럼 요소들이 한 줄로 보이고, <block> 태그에 적용할 수 있는 속성들도 사용할 수 있는 송성값입니다.)
... .container div{ display:inline-block; height:100%; } ... </style> </head>7. 마지막으로 container의 자식 태그인 두 개의 <div> 태그 중 첫 번째와 두 번째의 스타일을 각각 설정합니다.
<head> ... <style> ... .container div:first-child{ width:33.33333333333333%; /* 300px ÷ 900px */ /* 첫 번째 <div> 태그의 가로 너비인 300px을 가변 크기로 변환합니다. 300px/900px 공식을 이용해서 얻은 값인 33.33...%를 가로 너비로 설정합니다. (여기서 900px은 자신을 감싸고 있는 부모 박스의 가로 너비입니다) */ background:#1f518b; } .container div:first-child + div{ width:66.66666666666667%; /* 600px ÷ 900px */ background:#f7e041; } </style> </head>34,40행 두 박스의 배경색은 다르게 설정한 후 마무리합니다.
이제 완성한 파일을 실행해 보겠습니다. 화면의 가로 너비를 줄여도 화면 오른쪽이 잘리지 않고 브라우저의 비율에 맞춰 박스의 크기도 줄어드는 것을 볼 수 있습니다.
- 출처 : "반응형 웹 페이지 만들기"
'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 01 반응형 웹 기본 개념 이해하기_2 (0) 2022.11.29 Chapter 01 반응형 웹 기본 개념 이해하기_1 (0) 2022.11.29