`aspect-ratio` 속성과 반응형 디자인
이 글은 aspect-ratio 속성과 반응형 디자인에 대해 설명합니다.
aspect-ratio 속성을 활용한 반응형 디자인 기법을 소개합니다.
YouTube Video
미리보기를 위한 HTML
css-responsive-aspect-ratio.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-responsive-aspect-ratio.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Responsive Design</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>aspect-ratio</h2>
20 </header>
21 <article>
22 <h3>aspect-ratio Syntax</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26aspect-ratio: <ratio>;
27</pre>
28 </section>
29 </article>
30 <article>
31 <h3>aspect-ratio 1:1</h3>
32 <section>
33 <header><h4>CSS</h4></header>
34<pre class="sample">
35.square {
36 width: 200px;
37 aspect-ratio: 1 / 1;
38}
39</pre>
40 </section>
41 <header><h4>HTML+CSS</h4></header>
42 <section class="sample-view">
43 <img src="example.jpg" class="square">
44 </section>
45 </article>
46 <article>
47 <h3>aspect-ratio 16:9</h3>
48 <section>
49 <header><h4>CSS</h4></header>
50<pre class="sample">
51.widescreen {
52 width: 100%;
53 aspect-ratio: 16 / 9;
54}
55</pre>
56 </section>
57 <section class="sample-view">
58 <img src="example.jpg" class="widescreen">
59 </section>
60 </article>
61 <article>
62 <h3>aspect-ratio 2</h3>
63 <section>
64 <header><h4>CSS</h4></header>
65<pre class="sample">
66.custom-ratio {
67 width: 400px;
68 aspect-ratio: 2;
69}
70</pre>
71 </section>
72 <section class="sample-view">
73 <img src="example.jpg" class="custom-ratio">
74 </section>
75 </article>
76 <article>
77 <h3>aspect-ratio Example</h3>
78 <section>
79 <header><h4>HTML</h4></header>
80<pre>
81<div class="video-container">
82 <iframe src="https://www.youtube.com/embed/example"></iframe>
83</div>
84</pre>
85 <header><h4>CSS</h4></header>
86<pre class="sample">
87.video-container {
88 width: 100%;
89 aspect-ratio: 16 / 9;
90}
91</pre>
92 </section>
93 </article>
94 </main>
95</body>
96</html>aspect-ratio 속성
aspect-ratio 속성은 요소의 가로:세로 비율(종횡비)을 설정하는 데 사용됩니다. 이 속성은 특히 이미지나 비디오와 같은 미디어 콘텐츠 또는 반응형 디자인에서 고정된 비율로 요소를 표시하고자 할 때 유용합니다.
기본 구문
1aspect-ratio: <ratio>;<ratio>는 가로:세로 비율을 지정합니다. 비율은 "가로:세로" 형식으로 작성되거나 가로:세로 비율을 나타내는 단일 숫자로 표현됩니다.
예제
1:1 비율 (정사각형)
1:1 비율로 보이면 이렇게 나타납니다.
1.square {
2 width: 200px;
3 aspect-ratio: 1 / 1;
4}- 이 경우,
.square클래스를 가진 요소는 항상 너비와 높이가 같도록 설정되어 정사각형으로 표시됩니다.
16:9 비율 (와이드스크린 비디오 또는 이미지)
16:9 비율로 보면 이렇게 나타나며, 주로 와이드스크린 비디오나 이미지에 사용됩니다.
1.widescreen {
2 width: 100%;
3 aspect-ratio: 16 / 9;
4}- 이 경우,
.widescreen클래스가 적용된 요소는 16:9 비율을 유지하면서 너비에 따라 높이가 자동으로 조정됩니다.
한 개의 숫자로 비율 지정하기
한 개의 숫자로 비율을 지정하면 이렇게 나타납니다.
1.custom-ratio {
2 width: 400px;
3 aspect-ratio: 2;
4}- 여기서 숫자
2는2 / 1비율을 나타내며, 요소의 가로가 세로의 두 배가 됩니다.
aspect-ratio 속성의 장점
- 반응형 디자인 요소는 다양한 기기와 창 크기에서도 비율을 유지하면서 크기를 자동으로 조정할 수 있습니다.
- 간단한 구현 방법
특정 비율을 유지하기 위해 전통적으로
padding같은 방법을 사용했지만,aspect-ratio를 사용하면 더 간단하게 설정할 수 있습니다.
실제 사용 사례
예를 들어, 유튜브와 같은 비디오 플레이어는 보통 16:9 비율로 표시됩니다. 이 비율을 유지하기 위해 aspect-ratio 속성을 사용하여 반응형 비디오 컨테이너를 쉽게 만들 수 있습니다.
1<div class="video-container">
2 <iframe src="https://www.youtube.com/embed/example"></iframe>
3</div>1.video-container {
2 width: 100%;
3 aspect-ratio: 16 / 9;
4}- 이를 통해 비디오는 어떤 기기에서도 16:9 비율을 유지할 수 있습니다.
요약
aspect-ratio는 요소의 가로와 세로 비율을 지정하는 속성입니다.- 비율을 지정하면 반응형 디자인을 쉽게 구현할 수 있습니다.
- 이미지, 비디오, 카드 레이아웃과 같이 특정 비율을 유지해야 하는 요소에 매우 유용합니다.
기존의 복잡한 CSS 기술에 비해 aspect-ratio는 간단하고 직관적으로 사용할 수 있는 것으로 주목받고 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.