Chapter 02 px을 %로 바꾸기 - 가변 그리드_3(가변 폰트 이용하기/멀티미디어 요소 가변적으로 만들기)

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

폰트도 자유자재로! 가변 폰트 이용하기

웹사이트를 구성하는 요소는 여러 가지가 있지만 그중에서도 글자, 즉 폰트는 웹사이트에서 빠져서는 안 될 핵심 요소 중 하나입니다.

기존에 웹사이트를 개발할 때는 고정 단위인 픽셀(px)을 많이 사용했습니다. 하지만 픽셀은 모니터의 해상도를 기준으로 하기 때문에 화면이 확대되거나 축소되는 환경에는 맞지 않습니다. 웹 페이지를 표시하는 모니터 해상도에 따라 픽셀 크기가 달라지기 때문이죠. 웹 브라우저에서 정확하게 글자 크기를 나타내려면 상대적인 단위인 em을 사용하는 것이 좋습니다. em 단위는 대문자 M의 너비를 1cm으로 표현한 것으로, 16px이 1cm에 해당합니다.

(최신 브라우저는 픽셀(px) 단위를 사용해도 축소, 확대가 가능합니다.)

글자를 가변적이게 만들어주는 가변 폰트

반응형 웹에서 글자 크기를 상대적인 단위로 사용할 때 상속 문제를 해결해주는 방법을 가변 폰트라고 합니다. 가변 폰트는 지금까지 이용한 가변 그리드 공식을 이용해서 적용할 수 있습니다.

(가변 폰트를 적용할 글자 크깃값 ÷ 적용할 요소를 감싸고 있는 요소의 글자 크깃값) = 가변 폰트값

예를 들어 태그 안에 태그가 있고, 태그에 폰트 크기를 2em으로 적용했다고 가정해 보겠습니다. 그런데 태그에 1em 크기의 폰트를 적용하기 위해 공식을 이용합니다.

그럼 여기서 <가변 폰트를 적용할 요소를 감싸고 있는 요소의 글자 크깃값>은 태그에 적용된 2em(32px)이 됩니다. 그리고 <적용할 글자 크깃값>은 태그에 적용할 1em(16px)이겠죠?

공식은 다음과 같습니다.

16px ÷ 32px = 0.5
(글자 크기)

다음은 글자 크기가 6em(96px)으로 적용되어 있는 박스에 자식 박스가 있고, 그 박스 안에 글자 크기를 64px로 적용하는 예제입니다.

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

#para{
font-size:6em;
}

#para p{
font-size:0.6666666666666667em;
/* 64px ÷ 96px */
/* 64px의 글자 크기를 적용하기 위해서는 64px/96px 공식을 이용해서 얻은 값을 글자 크기로 지정합니다. */
}
</style>
</head>
<body>
	<div id="para">
	가변적인 폰트1
		<p>가변적인 폰트2</p>
	</div>
</body>

단순히 글자 크기를 4em(64px)으로 지정하게 되면 자신의 부모 박스에 적용된 6em이라는 글자 크기 때문에 상속 문제가 발생하여 글자가 엄청나게 커집니다.

따라서 지정하고자 하는 글자 크기를 가변 폰트 공식을 이용해서 설정해야 합니다.

※ 가변 폰트 크기를 쉽게 계산해주는 사이트
가변 폰트를 적용할 때 매번 공식을 이용해서 계산해야 한다면 불편하겠죠? 이를 위해 폰트 크기를 계산해 주는 사이트가 있습니다. PXtoEM 사이트에서 간단히 가변 폰트 크기를 계산해 보세요.

em 단위의 상속 문제를 해결해주는 rem 단위

앞에서 살펴본 em 단위는 자신의 부모 박스에 글자 크기가 지정되어 있을 경우 자식 박스에게 글자 크기가 상속됩니다. 그래서 자식 박스의 글자 크기를 지정할 때 공식을 이용하여 글자 크기를 지정해야 하는 등 복잡해집니다.

rem 단의는 최상위, 즉 웹 문서의 시작인 <html>, </html> 태그를 기준으로 하기 때문에 상속 문제가 발생하지 않아 유용하게 사용할 수 있는 단위 중 하나입니다.

다음 예제는 부모 박스에서 글자 크기를 5em으로 적용하고 자식 박스에는 글자 크기를 5rem으로 적용하는 예제입니다. 글자 크기를 rem 단위로 사용하면 상속 문제가 발생하지 않습니다.

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

p{
font-size:5em;
}

p span{
font-size:5rem;
}
</style>
</head>
<body>
	<p>
	rem 단위!
		<span>rem 단위!</span>
	</p>
</body>

진정한 가변 폰트 - vw, vh, vmin, vmax 단위

사실 앞에서 살펴본 가변 폰트는 em 단위의 글자 크기로 인해 발생하는 상속 문제를 공식을 이용해서 해결하려는 방법일 뿐, 글자가 브라우저의 비율에 따라 줄어들가나 늘어나지는 않으므로 실제로는 가변 폰트라고 보기 어렵습니다.

이제 브라우저의 비율에 따라 글자 크기가 늘어나거나 줄어드는 CSS3의 새로운 가변 단위인 vw, vh, vmin, vmax 단위를 알아보겠습니다.

(우리나라는 아직까지 최신 기술의 지원이 용이하지 못한 익스플로러 사용자가 상당히 많기 때문에 vw, vh, vmin, vmax 단위는 지금 바로 사용하기 어려울 수 있습니다. 하지만 앞으로 미래에는 많이 사용하게 될 기술이므로 꼭 알아두는게 좋습니다.)

1. vw(viewport width) 단위

vw 단위는 웹 브라우저의 너비를 100을 기준으로 하여 크기를 결정하는 단위입니다.

(vw 단위를 적용할 글자 크깃값 × 브라우저의 너빗값) ÷ 100 = 크깃값

만약 글자 크기를 5vw로 설정하면 웹 브라우저의 너비는 100을 기준으로 하기 때문에 5%가 됩니다. 정확한 값을 얻기 위해서는 웹 브라우저의 너비를 알아야 하는데 너비가 만약 1280이라면 (5 × 1280) ÷ 100 공식을 이용해서 얻은 값인 64px이 정확한 값이 됩니다.

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

p{
font-size:5vw;
}
</style>
</head>
<body>
	<p>vw단위!</p>
</body>

2. vh(viewport height) 단위

vh 단위는 웹 브라우저의 높이를 100을 기준으로 하여 크기를 결정하는 단위입니다.

(vh 단위를 적용할 글자 크깃값 × 브라우저의 높잇값) ÷ 100 = 크깃값

만약 글자 크기를 5vh로 설정하면 웹 브라우저의 높이는 100을 기준으로 하기 때문에 5%가 됩니다. 만약 웹 브라우저의 높이가 1024px이라면 (5 × 1024) ÷ 100 공식을 이용해서 얻은 값인 51.2px이 정확한 값이 됩니다.

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

p{
font-size:5vh;
}
</style>
</head>
<body>
	<p>vh단위!</p>
</body>

3. vmin(viewport minimum) 단위

vmin 단위는 웹 브라우저의 너비와 높이 중 짧은 쪽을 기준으로 하여 크기를 결정하는 단위입니다. 만약 글자 크기를 5vmin으로 설정하면 글자 크기는 웹 브라우저의 너비, 높이 중 작은 쪽을 100을 기준으로 해서 결정합니다.

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

p{
font-size:5vmin;
}
</style>
</head>
<body>
	<p>vmin단위!</p>
</body>

4. vmax(viewport maximum) 단위

vmax 단위는 웹 브라우저의 너비와 높이 중 큰 쪽을 기준으로 하여 크기를 결정하는 단위입니다.

만약 글자 크기를 5vmax로 설정하면 글자 크기는 브라우저의 너비와 높이 중 큰 쪽을 100을 기준으로 해서 결정합니다.

(그 외에는 vw, vh 단위와 같습니다.)

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

p{
font-size:5vmax;
}
</style>
</head>
<body>
	<p>vmax단위!</p>
</body>

멀티미디어 요소 가변적으로 만들기 - 가변 이미지와 가변 동영상

비율에 상관없이 가변적인 멀티미디어 요소 만들기

식당에는 사람마다 항상 찾는 단골 메뉴가 있듯이 웹사이트에서도 자주 사용하는 단골 메뉴와 같은 요소들이 있습니다. 바로 이미지와 동영상 같은 미디어 요소들입니다. 기존의 웹사이트에서는 아무런 문제가 없었지만 브라우저의 비율에 따라 웹사이트의 구조가 늘어나거나 줄어드는 가변형 레이아웃에서도 브라우저 너비에 맞게 이미지나 기타 멀티미디어 요소들도 가변적으로 작동하게 만들어줘야 합니다.

다음 예제는 이미지와 동영상을 가변적으로 작동하게 만드는 예제입니다.

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

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

#wrap div{
width:50%;
display:inline-block;
}

img, video{
width:100%;
/* 이미지와 동영상 요소에 너빗값과 최대 너빗값을 100%로 설정하면 멀티미디어 요소가 가변적으로 작동합니다. */
max-width:100%;
}
</style>
</head>
<body>
	<div id="wrap">
		<div>
			<video controls preload="auto">
			    <source src="source/video.mp4" type='video/mp4'></source>
			    <source src="source/video.ogv" type='video/ogg'></source>
			    <source src="source/video.webm" type='video/webm'></source>
		    </video>
		</div><div>
		<img src="source/img_01.jpg"></div>
	</div>
</body>

예제 파일을 웹 브라우저에서 실행해 보면 화면 크기에 따라 이미지와 비디오가 가변적으로 작동하는 것을 확인할 수 있습니다.

※ width와 max-width의 차이점
width 속성과 max-width 속성은 비슷해 보이지만 분명한 차이가 있습니다. width 속성은 속성값을 100%로 설정할 경우 요소의 크기를 100%로 유지하지만, max-width 속성은 속성값을 100%로 설정할 경우 요소의 기본 크기 이상으로는 크기가 조절되지 않습니다.

유튜브나 비메오 같은 멀티미디어 요소를 가변적으로 만들기

앞서 멀티미디어 요소들을 가변적으로 만드는 방법에 대해 알아보았습니다. 그런데 유튜브(YouTube)나 비메오(Vimeo) 같은 동영상 사이트의 멀티미디어 요소들은 어떨까요? 아쉽게도 앞서 알아본 방법으로는 정상적으로 작동하지 않습니다. 유튜브나 비메오는 자체적으로 만든 동영상 플레이어를 제공하고 있으므로 다른 방법을 이용해야 합니다.

유튜브, 비메오 같은 멀티미디어 요소를 가변적으로 만드는 방법 2가지를 알아보겠습니다.

방법 1. 패딩 속성을 사용하기

멀티미디어 요소 중에서도 동영상 요소는 대부분 16:9 비율로 이루어져 있습니다. 이는 텔레비전과 모니터의 국제 표준이기도 합니다. 유튜브나 비메오도 마찬가지로 16:9 비율로 동영상을 제공하고 있기 때문에 이 표준을 참고하여 패딩 속성을 이용하면 유튜브나 비메오의 동영상도 가변적으로 만들 수 있습니다.

다음의 예제는 비메오의 동영상을 가변적으로 만드는 예제입니다.

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

#wrap{
position:relative;
padding-bottom:56.25%;
/* 9 ÷ 16 */
height:0;
overflow:hidden;
}
    
iframe{
position:absolute;
top:0;
left:0;
height:100%;
}
</style>
</head>
<body>
    <div id="wrap">
        <iframe src="https://player.vimeo.com/video/192526798?byline=0&badge=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</body>

18행 ~ 24행 동영상 요소가 위치할 기준점을 만들기 위해 position 속성의 값을 상대적인 위치로 만들어주는 relative로 설정합니다. 그리고 동영상 요소를 16:9 비율로 만들기 위해 가변 그리드 공식을 이용하여 얻은 값인 56.26%를 하단 패딩값으로 설정합니다. 높잇값은 0으로 설정하고 overlfow의 속성값을 hidden으로 설정합니다.

26행 ~ 31행 요소의 위치를 설정해주는 속성인 position 속성의 값을 절대적인 위치로 만들어주는 absolute로 설정합니다. 그리고 요소의 위치 속성을 위쪽과 왼쪽을 0으로 설정합니다. 높잇값은 100%로 설정합니다.

※ 상/하 퍼센트 패딩 값은 어디를 기준점으로 하나요?
상/하 퍼센트 패딩 값은 해당 요소의 부모 요소 가로 너비를 기준으로 합니다. 보통은 부모 요소의 높이를 기준으로 할 것으로 생각하지만, CSS 스펙을 살펴보면 상/하 퍼센트 패딩 값은 부모 요소의 너빗값을 기준으로 한다고 명시되어 있습니다. 많이 헷갈릴 수 있는 부분이니 꼭 기억하고 넘어가세요!

방법 2. 스크립트 파일 사용하기

이번에는 스크립트 파일을 사용하여 동영상 요소를 가변적으로 만드는 방법을 알아보겠습니다.

다음의 예제는 fivids라는 스크립트 파일을 사용한 예제입니다.

<body>
    <div id="wrap">
        <iframe src="https://player.vimeo.com/video/203671501" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
<script src="source/jquery.min.js"></script>
<script src="source/jquery.fitvids.js"></script>
<script>
$("#wrap").fitVids();
</script>
</body>

위의 예제는 사실 앞서 알아본 방법 1을 자바스크립트라는 언어를 이용해 스크립트 파일로 만들고, 해당 스크립트 파일만 연결하면 간단하게 동영상 요소를 자동으로 가변적이게 만들어주는 스크립트 파일 중 하나입니다. 그러므로 앞의 방법 1과 같다고 볼 수 있습니다.

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

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

Chapter 04 새로운 웹 기술, 플렉서블 박스_1(개념/기술 익히기1) (0)	2022.12.01
Chapter 03 미디어 쿼리와 뷰포트 (0)	2022.12.01
Chapter 02 px을 %로 바꾸기 - 가변 그리드_2(가변 마진과 가변 패딩 이해하기) (0)	2022.11.30
Chapter 02 px을 %로 바꾸기 - 가변 그리드_1(가변 그리드 배우기) (0)	2022.11.30
Chapter 01 반응형 웹 기본 개념 이해하기_2 (0)	2022.11.29

ABOUT ME

's IT STORY 's IT STORY

폰트도 자유자재로! 가변 폰트 이용하기

멀티미디어 요소 가변적으로 만들기 - 가변 이미지와 가변 동영상

비율에 상관없이 가변적인 멀티미디어 요소 만들기

유튜브나 비메오 같은 멀티미디어 요소를 가변적으로 만들기

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

티스토리툴바

ABOUT ME

폰트도 자유자재로! 가변 폰트 이용하기

멀티미디어 요소 가변적으로 만들기 - 가변 이미지와 가변 동영상

비율에 상관없이 가변적인 멀티미디어 요소 만들기

유튜브나 비메오 같은 멀티미디어 요소를 가변적으로 만들기

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

관련글 관련글 더보기

티스토리툴바