Chapter 02 px을 %로 바꾸기 - 가변 그리드_2(가변 마진과 가변 패딩 이해하기)

Do it! 반응형 웹 페이지 만들기 2022. 11. 30. 15:58

가변 마진과 가변 패딩 이해하기

웹사이트의 요소에 마진과 패딩을 설정할 때는 모든 박스들을 감싸고 있는 wrap과 같은 요소들의 너빗값을 고려하여 요소의 마진값과 패딩값을 지정해야 합니다. 만약 너빗값을 고려하지 않은 상태로 마진값과 패딩값들을 설정하면 의도했던 대로 레이아웃이 나오지 않거나 박스들이 밀려 아래로 떨어지는 문제가 생길 수 있습니다.

이는 반응형 웹에서도 마찬가지지만 크기가 가변값으로 설정된다는 차이가 있습니다.

여기서는 가변 마진과 가변 패딩을 설정하는 방법을 알아보고 실습해 보겠습니다.

간격을 자유자재로! 가변 마진 설정하기

반응형 웹사이트에서는 모든 요소가 가변적이어야 합니다. 구조상의 간격 역시 마찬가지죠. 기존의 고정되어 있는 마진(여백)을 변할 수 있게 설정해줘야 합니다.

가변 마진은 가변 그리드에서 사용했던 공식과 같습니다.

(가변 마진을 적용할 마진값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) × 100 = 가변 마진값

예제와 함게 살펴보는 것이 이해하기 더 쉬울 것입니다. 오른쪽 이미지를 보면 너빗값이 각각 300px인 두 개의 박스를 고정 크기가 960px인 박스가 감싸고 있습니다. 이 중 A 박스의 오른쪽에 가변 마진을 적용하여 A 박스와 B 박스 사이에 공간을 만드는 예제입니다.

<head>
...
<style>
...

#wrap{
width:90%;
/* 960px */
height:500px;
margin:0 auto;
border:4px solid #000;
}

#wrap div{
display:inline-block;
width:31.25%;
/* 300px ÷ 960px */
height:100%;
}

#wrap div:first-child{
margin-right:37.5%;
/* 360px ÷ 960px */
/* 두 개의 박스 중 A 박스 오른쪽에 360px 크기의 가변 마진값을 적용하기 위해
360px/960px 공식을 이용해서 가변 마진값으로 설정합니다. */
background:#1f518b;
}

#wrap div:first-child + div{
background:#f7e041;
}
</style>
</head>
<body>
	<div id="wrap">
		<div></div><div></div>
	</div>
</body>

A 박스에 360px의 가변 마진값을 적용하니 B 박스가 부모 박스의 오른쪽 끝에 붙는 구조가 됩니다.

※ 마진과 패딩
마진이란 어떠한 물체와 물체 사이의 빈 공간을 말합니다. 웹사이트를 만들 때도 이러한 여백이 필요합니다. 예를 들어 웹사이트 구조를 보면 사이 사이 벌어져 있는 공간들이 있는데, 이것을 여백 또는 간격이라고 합니다.
패팅(두께)이란 면과 면 사이가 물체나 공간 등으로 채워져 있는 것을 말하며, 속 또는 충전재라고도 합니다. 우리가 겨울에 입는 패딩 점퍼의 면과 면 사이가 오리털로 채워져 있듯이 패딩은 면과 면 사이에 어떠한 것이 채워져 있는 상태를 말합니다. 웹사이트에서도 특정 요소에 두께를 만들거나 빈 공간 또는 간격을 만들 때 마진과 패딩이 사용됩니다.

고정 마진을 가변 마진으로 변환하기

02장/실습/02_2.html 파일을 크롬에서 실행해 보면 파란색 박스와 달리 노란색 박스는 오른쪽에 딱 붙지 않고 어중간한 위치에 배치되어 있는 것을 볼 수 있습니다. 가변적인 크기로 제작된 박스에 마진이 고정값으로 설정되어 있다 보니 노란색 박스가 오른쪽에 붙지 않고 어중간한 위치로 배치되어 버린 것입니다. 이러한 문제를 해결하기 위해 고정 마진을 가변 마진으로 변환해야 합니다.

1. 편집기에서 실습 파일인 02_2.html 파일을 불러옵니다. 현재 소스를 보면 모든 박스를 감싸고 있는 테두리 박스의 가로 너비는 960px이고 그 박스 안에 있는 자식 박스들인 두 개의 박스는 가로 너비가 각각 300px입니다.

(크기가 960px인 박스와 300px인 박스 모두 가변 크기로 변환되어 있는 상태입니다.)

2. 첫 번째 박스의 마진 수정하기

두 개의 자식 박스 중 첫 번째 박스에 고정 마진이 설정되어 있는데, 이는 나머지 공간을 마진 영역으로 만들기 위해 360px 크기의 고정 마진으로 설정된 것입니다.

<head>
...
<style>
...

#wrap div:first-child{
margin-right:37.5%;
/* 360px ÷ 960px */
/* 기존의 마진값인 360px 대신 360px/960px 공식을 이용해서 얻은 값인 37.5%를 입력하여 가변 마진으로 변환합니다. */
background:#1f518b;
}

...
</style>
</head>

3. 수정한 파일을 저장한 다음 크롬으로 열어보겠습니다. 노란색 박스가 어중간한 위치에 배치되지 않고 정상적으로 오른쪽에 붙어 있는 모습을 확인할 수 있습니다.

가변 패딩을 적용하는 두 가지 방법

가변 패딩을 적용할 때는 가변 그리드에서 사용한 공식을 이용하면 됩니다. 단, 가변 패딩은 가변 마진과 달리 박스 너빗값에 포함되기 때문에 작업할 때 헷갈릴 수 있으므로 여기서 정확히 이해하고 넘어가는 것이 좋습니다.

가변 패딩을 적용할 때 일반적으로는 기본 방법인 '방법1'을 사용하고, 제한적인 조건이 있을 때는 '방법2'를 사용하면 됩니다. 하나씩 예제와 함께 살펴보겠습니다.

가변 패딩 적용 방법1 - 기본 방법

첫 번째 방법은 가변 패딩을 적용하는 기본적인 방법입니다. 아래 예제처럼 40px 크기의 패딩값을 가변 그리드 공식을 이용해서 가변 패딩으로 적용할 수 있습니다.

(가변 패딩을 적용할 패딩값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) × 100 = 가변 패딩 % 값

다음 예제는 960px 크기의 박스 안에 또 다른 박스가 있고, 이 박스의 상하좌우에 40px 크기의 가변 패딩을 적용하는 예제입니다.

<head>
...
<style>
...

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

#wrap p{
padding:40px 4.16666666666667%;
/* 40px ÷ 960px */
/* 40px 크기의 가변 패딩값을 적용하기 위해 40px/960px 공식을 이용해서 얻은 값인 4.16...%를
왼쪽과 오른쪽 패딩값으로 설정합니다. */
}
</style>
</head>
<body>
	<div id="wrap">
		<p>...텍스트 생략...</p>
</body>

그리고 예제 파일을 브라우저에서 열어 브라우저의 가로 너비를 줄여보세요. 적용된 가변 패딩을 확인할 수 있습니다.

가변 패딩 적용 방법2 - 제한적인 조건이 있을 때

두 번째 방법은 박스에 패딩을 적용하더라도 박스의 정해진 너빗값 이상이 되지 말아야 하는 경우에 이용하는 방법입니다. 이용하는 공식은 방법 1과 같습니다.

(가변 패딩을 적용할 패딩값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) × 100 = 가변 패딩 % 값

다음 예제는 고정 크기일 때 960px 크기의 박스 안에 하나의 박스가 있고, 이 박스는 600px을 넘지 않으면서 상하좌우 패딩값을 50px로 적용하는 예제입니다.

<head>
...
<style>
...

#wrap{
width:90%;
/* 960px */
height:700px;
margin:0 auto;
border:4px solid #000;
}

#wrap p{
width:62.5%;
/* 600px ÷ 960px */
/* 600px을 유지해야 하는 박스에 가변 패딩값을 적용하기 위해 600px-100px(왼쪽/오른쪽 패딩값을 더한 값)
공식을 이용해서 얻은 값인 500px을 다시 500px/960px공식을 이용해서 얻은 가변 크기의 값인 52.08%를
너빗값으로 설정합니다. */
padding:50px 5.20833333333333%;
/* 50px ÷ 960px */
/* 50px 크기의 가변 패딩을 적용하기 위해 50px/960px 공식을 이용해서 가변 패딩을 설정합니다. */
margin:0 auto;
background:#f7e041;
}
</style>
</head>
<body>
	<div id="wrap">
		<p>...텍스트 생략...</p>
	</div>
</body>

위 예제를 좀 더 자세히 설명하겠습니다. 먼저 600px에서 왼쪽과 오른쪽 패딩값을 더한 값인 100px을 뺍니다. 그럼 500px이 남겠죠? 이 500px을 너빗값으로 설정합니다. 그리고 왼쪽과 오른쪽의 가변 패딩값을 적용하면 됩니다.

단, 여기서 주의할 점은 앞에서도 말했듯이 패딩값은 너빗값에 포함된다는 것입니다. 그러므로 가변 그리드 공식을 이용해서 가변 패딩을 적용할 때는 박스의 너빗값인 600px이 아닌, 가장 상위의 부모 박스 크기인 960px을 기준으로 계산해야 합니다.

결국 앞서 배운 가변 패딩과 공식은 동일하지만 계산이 조금 더 복잡해진 것뿐입니다. 상황에 따라 가변 패딩을 다르게 적용해야 할 수도 있으니 반드시 이해하고 넘어가세요.

고정 크기의 마진과 패딩을 위해 calc 함수 이용하기

그런데 가변 마진과 가변 패딩에는 소소한 문제가 있습니다. 바로 브라우저의 비율에 따라 마진과 패딩도 줄어든다는 것입니다. 물론 '가변적이니까 줄어들 수도 있겠지'라고 생각할 수도 있지만 박스는 가변적이되 마진이나 패딩은 고정되어 있도록 설정하고 싶다면 어떻게 해야 할까요? 그럴 때는 CSS3의 clac 함수를 이용하면 됩니다.

프로그래밍 언어에서는 오래 전부터 함수를 사용해 왔지만 CSS 언어에서는 함수라는 개념 자체가 존재하지 않아 복잡한 연산이나 기타 반복적인 작업들을 할 수가 없었습니다. 하지만 CSS3부터 함수라는 개념이 등장하면서 복잡한 연산이나 반복적인 작업들을 할 수 있게 되었습니다. 이것을 CSS 함수라고 합니다.

clac 함수는 말 그대로 계산을 위한 CSS 함수입니다. 고차원의 연산까지는 아니더라도 간단한 사칙연산과 우선순위 계산 등 다양한 곳에서 활용할 수 있습니다.

함수명	함숫값	적용 요소
clac	width 속성에서 사용할 수 있는 모든 값. 연산 기호	모든 대상

다음 예제는 wrap이라는 아이디를 가진 박스 안에 자식 박스 한 개가 있고, 그 박스에 50px 크기의 고정 마진을 적용하기 위해 clac 함수를 이용해 총 너빗값에서 왼쪽, 오른쪽 패딩값을 더한 값인 100px을 뺀 값을 너빗값으로 설정하고, 마진값을 50px로 설정한 예제입니다.

예제를 웹 브라우저에서 열어 브라우저 크기를 줄여가면서 확인해 보면 50px 크기의 마진은 그대로 적용되고 박스의 크기만 가변적으로 작동하는 것을 확인할 수 있습니다.

<head>
...
<style>
...

#wrap{
width:90%;
/* 960px */
height:500px;
margin:0 auto;
border:4px solid #000;
}

#wrap div{
width:calc(100% - 100px);
height:200px;
margin:50px;
background:#f7e041;
}
</style>
</head>
<body>
	<div id="wrap">
		<div></div>
	</div>
</body>

가변 패딩 직접 적용하기

간단한 구조를 직접 만든 다음 가변 패딩을 적용해 보겠습니다.

1. 편집기에서 실습 파일인 02_3.html을 불러옵니다.

2. 먼저 <body>, </body> 태그 사이에 wrap이라는 아이디를 가진 <div> 태그를 작성합니다. 그리고 작성한 <div> 태그 사이에 두 개의 <div> 태그를 작성합니다.

<body>
	<div id="wrap">
		<div></div><div></div>
	</div>
</body>

3. <head>, </head> 태그 사이에 <style>, </style> 태그를 작성한 다음 wrap이라는 아이디를 가진 <div> 태그에 너비는 90%로, 높이는 500px로 입력해 스타일을 지정합니다. 그리고 마진값과 선값을 입력합니다.

<style>
...

#wrap{
width:90%;
/* 960px */
height:500px;
margin:0 auto;
border:4px solid #000;
}

...
</style>

4. wrap이라는 <div> 태그의 자식 박스에 공통 스타일 설정하기

먼저 <div> 태그에 공통적으로 300px을 가변 크기로 설정합니다. 300px ÷ 960px 공식을 이용해서 얻은 값인 31.25%를 너빗값으로 설정합니다.

<style>
...

#wrap div{
width:31.25%;
/* 300px ÷ 960px */
display:inline-block;
}

...
</style>

5. 첫 번째 박스에 가변 패딩 적용하기

자식 박스 중 첫 번째 박스에 50px 크기의 가변 패딩을 적용합니다. 50px ÷ 960px 공식을 이용해서 얻은 값을 패딩값으로 설정합니다.

<style>
...

#wrap div:first-child{
padding:50px 5.20833333333333%;
/* 50px ÷ 960px */
background:#1f518b;
}

...
</style>

그러면 왼쪽과 오른쪽의 패딩값이 실제로는 50px + 50px이 되어 총 100px 크기의 가변 패딩이 적용됩니다.

6. 두 번째 박스에 가변 패딩 적용하기

자식 박스 중 두 번째 박스에 130px 크기의 가변 패딩을 적용합니다. 130px ÷ 960px 공식을 이용해서 얻은 값을 패딩값으로 설정합니다.

<style>
...

#wrap div:first-child + div{
padding:130px 13.54166666666667%;
/* 130px ÷ 960px */
background:#f7e041;
}
</style>

그러면 왼쪽과 오른쪽 패딩값이 실제로는 130px + 130px이 되어 총 260px 크기의 가변 패딩이 적용됩니다. 이렇게 두 번째 박스까지 가변 패딩을 적용하면 너빗값을 설정한 후에 남은 값인 360px을 가변 패딩 영역으로 사용하여 박스를 꽉 채우는 구조가 됩니다.

7. 이제 작업한 소스를 저장한 다음 크롬으로 실행해 봅니다. 모든 박스들이 구조를 꽉 채우게 되고 웹 브라우저의 크기를 줄여도 가변 패딩은 유지되며 모든 박스들이 가변적으로 작동하는 모습을 확인할 수 있습니다.

※ 브라우저 기술 지원 현황을 확인할 수 있는 사이트
CSS3와 같이 새로 나온 속성들은 브라우저마다 제각기 지원하는 방식이나 지원율이 다를 수 있으므로 반드시 브라우저 기술 지원 현황을 확인하고 사용해야 합니다. 브라우저 기술 지원 현황을 확인할 수 있는 Can I use...사이트에서 기술명을 검색하여 사용해 보기 바랍니다.
Can I use...(http://caniuse.com)

출처 : "반응형 웹 페이지 만들기"

'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글

Chapter 03 미디어 쿼리와 뷰포트 (0)	2022.12.01
Chapter 02 px을 %로 바꾸기 - 가변 그리드_3(가변 폰트 이용하기/멀티미디어 요소 가변적으로 만들기) (1)	2022.11.30
Chapter 02 px을 %로 바꾸기 - 가변 그리드_1(가변 그리드 배우기) (0)	2022.11.30
Chapter 01 반응형 웹 기본 개념 이해하기_2 (0)	2022.11.29
Chapter 01 반응형 웹 기본 개념 이해하기_1 (0)	2022.11.29

ABOUT ME

's IT STORY 's IT STORY

가변 마진과 가변 패딩 이해하기

'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글

티스토리툴바

ABOUT ME

가변 마진과 가변 패딩 이해하기

'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바