필터 효과와 관련된 CSS 속성
이 글은 필터 효과와 관련된 CSS 속성을 설명합니다.
filter와 transform 같은 속성의 사용법과 작성법을 배울 수 있습니다.
YouTube Video
미리보기를 위한 HTML
css-effect.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-effect.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Animation</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Filter/Effect Related Properties</h2>
20 </header>
21 <article>
22 <h3>filter</h3>
23 <section>
24 <header><h4>Original Image</h4></header>
25 <section class="sample-view">
26 <img src="example.jpg" alt="Example Image" width="100">
27 </section>
28 <header><h4>filter: sepia(1)</h4></header>
29 <section class="sample-view">
30 <img src="example.jpg" alt="Example Sepia Image" class="filtered-image-sepia" width="100">
31 </section>
32 <header><h4>filter: opacity(0.5)</h4></header>
33 <section class="sample-view">
34 <img src="example.jpg" alt="Example Opacity Image" class="filtered-image-opacity" width="100">
35 </section>
36 <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
37 <section class="sample-view">
38 <img src="example.jpg" alt="Example Filtered Image" class="filtered-image-multiple" width="100">
39 </section>
40 </section>
41 </article>
42 <article>
43 <h3>filter-function</h3>
44 <section>
45 <header><h4>filter: blur(5px)</h4></header>
46 <section class="sample-view">
47 <img src="example.jpg" alt="Example Blur Image" style="filter: blur(5px);" width="100">
48 </section>
49 <header><h4>filter: brightness(1.5)</h4></header>
50 <section class="sample-view">
51 <img src="example.jpg" alt="Example Brightness Image" style="filter: brightness(1.5);" width="100">
52 </section>
53 <header><h4>filter: contrast(2)</h4></header>
54 <section class="sample-view">
55 <img src="example.jpg" alt="Example Contrast Image" style="filter: contrast(2);" width="100">
56 </section>
57 <header><h4>filter: grayscale(1)</h4></header>
58 <section class="sample-view">
59 <img src="example.jpg" alt="Example Grayscale Image" style="filter: grayscale(1);" width="100">
60 </section>
61 <header><h4>filter: hue-rotate(90deg)</h4></header>
62 <section class="sample-view">
63 <img src="example.jpg" alt="Example Hue Rotate Image" style="filter: hue-rotate(90deg);" width="100">
64 </section>
65 <header><h4>filter: invert(1)</h4></header>
66 <section class="sample-view">
67 <img src="example.jpg" alt="Example Invert Image" style="filter: invert(1);" width="100">
68 </section>
69 <header><h4>filter: opacity(0.5)</h4></header>
70 <section class="sample-view">
71 <img src="example.jpg" alt="Example Opacity Image" style="filter: opacity(0.5);" width="100">
72 </section>
73 <header><h4>filter: saturate(2)</h4></header>
74 <section class="sample-view">
75 <img src="example.jpg" alt="Example Saturate Image" style="filter: saturate(2);" width="100">
76 </section>
77 <header><h4>filter: sepia(1)</h4></header>
78 <section class="sample-view">
79 <img src="example.jpg" alt="Example Sepia Image" style="filter: sepia(1);" width="100">
80 </section>
81 <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
82 <section class="sample-view">
83 <img src="example.jpg" alt="Example Filtered Image" style="filter: brightness(1.2) contrast(1.5) sepia(0.5);" width="100">
84 </section>
85 </section>
86 </article>
87 <article>
88 <h3>transform</h3>
89 <section>
90 <header><h4>Transform: scale(1.5, 2)</h4></header>
91 <section class="sample-view">
92 <div class="transform-box transform-scale">Scale</div>
93 </section>
94 <header><h4>Transform: skew(30deg, 20deg)</h4></header>
95 <section class="sample-view">
96 <div class="transform-box transform-skew">Skew</div>
97 </section>
98 <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
99 <section class="sample-view">
100 <div class="transform-box transform-rotate">Rotate Scale</div>
101 </section>
102 </section>
103 </article>
104 <article>
105 <h3>transform functions</h3>
106 <section>
107 <header><h4>Transform: translate(100px, 50px)</h4></header>
108 <section class="sample-view">
109 <div class="transform-box transform-translate">Translate</div>
110 </section>
111 <header><h4>Transform: rotate(45deg)</h4></header>
112 <section class="sample-view">
113 <div class="transform-box transform-rotate">Rotate</div>
114 </section>
115 <header><h4>Transform: scale(1.5, 2)</h4></header>
116 <section class="sample-view">
117 <div class="transform-box transform-scale">Scale</div>
118 </section>
119 <header><h4>Transform: skew(30deg, 20deg)</h4></header>
120 <section class="sample-view">
121 <div class="transform-box transform-skew">Skew</div>
122 </section>
123 <header><h4>Transform: matrix(1, 0.5, -0.5, 1, 100, 0)</h4></header>
124 <section class="sample-view">
125 <div class="transform-box transform-matrix">Matrix</div>
126 </section>
127 <header><h4>Transform: translate3d(50px, 50px, 50px)</h4></header>
128 <section class="sample-view perspective">
129 <div class="transform-box transform-translate3d">Translate3D</div>
130 </section>
131 <header><h4>Transform: rotate3d(1, 1, 0, 45deg)</h4></header>
132 <section class="sample-view perspective">
133 <div class="transform-box transform-rotate3d">Rotate3D</div>
134 </section>
135 <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
136 <section class="sample-view">
137 <div class="transform-box transform-rotate-scale">Rotate Scale</div>
138 </section>
139 </section>
140 </article>
141 <article>
142 <h3>transform-origin</h3>
143 <section>
144 <header><h4>transform-origin: left top</h4></header>
145 <section class="sample-view">
146 <div class="transform-box transform-origin">Transform<br>(left-top)</div>
147 </section>
148 <header><h4>transform-origin: right bottom</h4></header>
149 <section class="sample-view">
150 <div class="transform-box transform-origin-right-bottom">Transform<br>(right-bottom)</div>
151 </section>
152 <header><h4>transform-origin: 0% 100%</h4></header>
153 <section class="sample-view">
154 <div class="transform-box transform-origin-percent">Transform<br>(percent)</div>
155 </section>
156 </section>
157 </article>
158 </main>
159</body>
160</html>필터 효과
filter 속성
1.filtered-image-sepia {
2 filter: sepia(1);
3}
4
5.filtered-image-opacity {
6 filter: opacity(0.5);
7}
8
9.filtered-image-multiple {
10 filter: brightness(1.2) contrast(1.5) sepia(0.5);
11}filter 속성은 요소에 시각적 효과를 적용하는 데 사용됩니다. 이미지나 요소를 흐리게 하거나 밝기를 조정하고 대비를 변경하는 등의 다양한 효과를 쉽게 추가할 수 있습니다.
filtered-image-sepia클래스에는 세피아 효과가 적용되었습니다.filtered-image-opacity클래스에는 불투명도 효과가 적용되었습니다.filtered-image-multiple클래스에는 이미지에 밝기, 대비, 세피아 효과가 적용되었습니다.
기본 구문
1filter: none | <filter-function> [<filter-function>]*;filter 속성에서는 none 또는 filter-function을 지정합니다.
none을 지정하면 필터 효과가 적용되지 않습니다.에서 적용할 필터 함수를 지정합니다. 여러 필터는 공백으로 구분하여 지정할 수 있습니다.
필터 함수의 유형
blur()
1filter: blur(5px);blur() 함수는 흐림 효과를 적용합니다.
- 값은 픽셀(px) 단위로 지정되며, 값이 클수록 흐림 정도가 강해집니다.
brightness()
1filter: brightness(1.5);brightness() 함수는 밝기를 조정합니다.
- 값은
0(완전히 어두움)에서1(원래 밝기)까지를 기준으로 지정됩니다.1보다 큰 값을 지정하면 요소가 더 밝아집니다.
contrast()
1filter: contrast(2);contrast() 함수는 대비를 조정합니다.
- 값은
0(흑백)에서1(원래 대비도)까지를 기준으로 지정하며,1보다 큰 값은 대비를 증가시킵니다.
grayscale()
1filter: grayscale(1);grayscale() 함수는 요소를 단색으로 변환합니다.
0(원래 색상)에서1(완전한 단색)까지 지정됩니다.
hue-rotate()
1filter: hue-rotate(90deg);hue-rotate() 함수는 색조를 회전시킵니다.
- 값은 각도(deg) 단위로 지정되며, 색조를 회전시켜 색상을 변경합니다. 색조는
0deg에서360deg까지 회전합니다.
invert()
1filter: invert(1);invert() 함수는 색상을 반전합니다.
0(원래 색상)에서1(완전히 반전된 색상)까지 지정됩니다.
opacity()
1filter: opacity(0.5);opacity() 함수는 요소의 투명도를 변경합니다.
0(완전한 투명)에서1(불투명)까지 지정됩니다.
saturate()
1filter: saturate(2);saturate() 함수는 채도를 조정합니다.
0(단색)에서1(원래 채도)까지, 그리고1보다 큰 값을 지정하면 채도가 증가합니다.
sepia()
1filter: sepia(1);sepia() 함수는 색상을 세피아 톤으로 변환합니다.
0(원래 색상)에서1(완전한 세피아 톤)까지 지정됩니다.
여러 필터 적용하기
1filter: brightness(1.2) contrast(1.5) sepia(0.5);여러 필터를 띄어쓰기로 구분하여 적용할 수 있습니다.
filter 속성을 사용하는 장점
filter 속성은 시각적으로 매력적인 요소를 쉽게 만들 수 있는 강력한 도구입니다. 다음과 같은 장점이 있습니다:.
- 시각 효과를 쉽게 추가할 수 있습니다.
- 이미지 편집 소프트웨어 없이 CSS만 사용하여 이미지를 조정할 수 있습니다.
- 애니메이션과 결합하여 동적인 효과를 만들 수 있습니다.
transform 속성
1.transform-box {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 transition: transform 0.3s ease;
6}
7
8.transform-scale:hover {
9 /* Width 1.5 times and height 2 times */
10 transform: scale(1.5, 2);
11}
12
13.transform-skew:hover {
14 /* Skew 30 degrees on the X-axis and 20 degrees on the Y-axis */
15 transform: skew(30deg, 20deg);
16}
17
18.transform-rotate:hover {
19 transform: rotate(45deg) scale(1.5);
20}transform 속성은 요소에 2D 또는 3D 변환을 적용하는 데 사용됩니다. 위치, 회전, 크기 조정(확대/축소), 비틀기 등의 다양한 시각적 변환을 CSS로 지정할 수 있습니다. transform 속성은 애니메이션과 함께 자주 사용되며 동적인 UI 요소를 만드는 데 도움을 줍니다.
-
요소에 마우스를 올리면
transform-scale클래스에서 너비가 1.5배, 높이가 2배로 커집니다. -
요소에 마우스를 올리면
transform-skew클래스에서 X축으로 30도, Y축으로 20도 회전합니다. -
요소에 마우스를 올리면
transform-rotate클래스에서 45도 회전하고 1.5배로 확대됩니다.
기본 구문
1transform: none | <transform-function> [<transform-function>]*;transform 속성은 none 또는 transform-function 중 하나를 지정합니다.
none이 지정되면 변환이 적용되지 않습니다.<transform-function>으로 변환 유형을 지정하세요. 여러 변환은 공백으로 구분하여 동시에 적용할 수 있습니다.
주요 변환 함수
translate()
1/* Move 50px to the right and 100px down */
2transform: translate(50px, 100px);
3
4transform: translateX(50px); /* Move 50px to the right */
5transform: translateY(100px); /* Move 100px down */translate(x, y)함수는 X 및 Y축을 따라 지정된 거리만큼 요소를 이동시킵니다.x와y를px또는%등의 단위를 사용하여 지정하세요.translateX()또는translateY()를 사용하여 개별적으로 지정할 수도 있습니다.
rotate()
1transform: rotate(45deg); /* Rotate 45 degrees */rotate(angle)함수는 요소를 지정된 각도(deg)만큼 회전시킵니다.
scale()
1/* Width 1.5 times and height 2 times */
2transform: scale(1.5, 2);
3
4transform: scaleX(1.5); /* Width 1.5 times */
5transform: scaleY(2); /* Height 2 times */scale(x, y)함수는 X와 Y축을 따라 요소를 비율 조정합니다.x와y는 원래 크기에 대한 비율을 나타냅니다. 예를 들어,scale(2, 2)는 크기를 두 배로 만듭니다.scaleX()또는scaleY()를 사용하여 개별적으로 지정할 수 있습니다.
skew()
1/* Skew 30 degrees on the X-axis and
2 20 degrees on the Y-axis */
3transform: skew(30deg, 20deg);
4
5/* Skew 30 degrees on the X-axis */
6transform: skewX(30deg);
7
8/* Skew 20 degrees on the Y-axis */
9transform: skewY(20deg);skew(x-angle, y-angle)함수는 X축과 Y축을 따라 지정된 각도로 요소를 기울입니다.skewX()또는skewY()를 사용하여 개별적으로 지정할 수 있습니다.
matrix()
1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);matrix()함수는 여러 변환을 한 번에 결합하는 행렬을 지정합니다. 일반적으로 기타 변환 함수와 함께 사용됩니다.
3D 변환 함수
translate3d()
1/* Moves the element 100px to the right (X-axis),
250px down (Y-axis), and 30px towards the viewer (Z-axis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Allows child elements to preserve their 3D position relative to the parent */
6transform-style: preserve-3d;
7
8/* Applies a perspective from a distance of 600px to give a sense of depth */
9perspective: 600px;translate3d()함수는 3D 공간에서 이동을 수행합니다.- X, Y, Z축의 3차원으로 지정할 수 있습니다.
transform-style속성을preserve-3d로,perspective속성을600px로 설정하면 자식 요소에 깊이가 있는 3차원 이동 효과가 적용됩니다.
rotate3d()
1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;rotate3d()함수는 3D 공간에서 회전을 수행합니다.- 요소를 X, Y, Z축을 기준으로 회전시킵니다.
여러 변환 결합하기
1transform: rotate(45deg) scale(1.5);transform 속성을 사용하여 여러 변환을 동시에 적용할 수 있습니다. 예를 들어, 회전과 크기 조정을 결합할 수 있습니다.
사용 시 주요 포인트
transform 속성은 CSS에서 요소를 시각적으로 변형하는 강력한 도구입니다. 다양한 기능을 조합하여 상호작용적이고 동적인 UI를 만들 수 있습니다.
transform속성은 요소를 직접 변형할 수 있게 해주며, DOM 레이아웃을 변경하지 않고 시각적 조작을 할 수 있습니다.transform속성은 애니메이션과 상호작용 요소를 만드는 데 매우 유용하며,transition또는animation과 결합하면 동적인 디자인이 가능합니다.
transform-origin 속성
1.transform-box {
2 background-color: skyblue;
3}
4
5.transform-origin-left-top:hover {
6 /* Based on the top left corner */
7 transform-origin: left top;
8 transform: rotate(45deg) scale(1.2);
9}
10
11.transform-origin-right-bottom:hover {
12 /* Based on the right bottom corner */
13 transform-origin: right bottom;
14 transform: rotate(45deg) scale(1.2);
15}
16
17.transform-origin-percent:hover {
18 /* Transform based on the bottom left corner */
19 transform-origin: 0% 100%;
20 transform: rotate(45deg) scale(1.2);
21}transform-origin 속성은 transform 속성에 의해 적용되는 변형의 기준점을 설정하는 데 사용됩니다. 요소 변형의 기준점을 지정하여 회전이나 크기 조정 효과가 적용되는 지점을 제어할 수 있습니다.
이 예제에서는, 마우스를 요소 위에 올리면, transform-origin 속성에 지정된 기준점을 기준으로 회전과 크기 조정이 동시에 이루어집니다.
기본 구문
1transform-origin: x y z;transform-origin 속성에서는 다음과 같이 x, y, z 값을 지정합니다.
x에서는 X축(수평 방향)의 기준점을 지정합니다. 값은 키워드(left,center,right) 또는 길이(px,%등)로 지정할 수 있습니다.y에서는 Y축(수직 방향)의 기준점을 지정합니다. 값은 키워드(top,center,bottom) 또는 길이로 지정할 수 있습니다.z에서는 Z축(깊이 방향)의 기준점을 지정합니다. 이는 3D 변환에서만 사용할 수 있습니다. 이는 선택 사항이며 기본값은0입니다.
기본값
1transform-origin: 50% 50%; /* Center of the element */transform-origin 속성의 기본값은 X축과 Y축 모두 요소의 중심입니다. 이는 기본적으로 변형이 요소의 중심을 기준점으로 수행됨을 의미합니다.
값 지정 방법
transform-origin 속성의 값은 키워드, 백분율, 또는 px, em 등의 길이 단위로 지정할 수 있습니다.
-
키워드 지정 방법
left: X축 기준점을 요소의 왼쪽 가장자리로 설정합니다.right: X축 기준점을 요소의 오른쪽 가장자리로 설정합니다.top: Y축 기준점을 요소의 상단 가장자리로 설정합니다.bottom: Y축 기준점을 요소의 하단 가장자리로 설정합니다.center: X축 또는 Y축 기준점을 요소의 중심으로 설정합니다.
-
백분율 지정
0%: 왼쪽 또는 상단 가장자리로 설정합니다.50%: 중심으로 설정합니다.100%: 오른쪽 또는 하단 가장자리로 설정합니다.
-
길이 지정
px,em등과 같은 특정 길이를 사용하여 기준점을 세밀하게 조정할 수 있습니다.
3D 변환에서 transform-origin
1.box {
2 width: 100px;
3 height: 100px;
4 background-color: lightblue;
5 transform-origin: 50% 50% 50px; /* Specify the Z-axis as well */
6 transform: rotateY(45deg);
7}transform-origin은 3D 변환에서도 사용할 수 있습니다. 3D 변환에서는 Z축의 기준점도 지정할 수 있습니다. 예를 들어, 깊이 방향의 회전 중심을 지정하면 깊이감 있는 변환이 가능합니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.