투명성과 관련된 CSS 속성
이 글은 투명성과 관련된 CSS 속성에 대해 설명합니다.
opacity, z-index, clip-path 속성의 사용 방법과 구문을 배울 수 있습니다.
YouTube Video
미리보기를 위한 HTML
css-opacity.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-opacity.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties Related to Transparency</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>CSS Properties Related to Transparency</h2>
20 </header>
21 <article>
22 <h3>opacity</h3>
23 <section>
24 <header><h4>opacity: 1</h4></header>
25 <section class="sample-view">
26 <div class="opaque-box">Opaque</div>
27 </section>
28 <header><h4>opacity: 0.5</h4></header>
29 <section class="sample-view">
30 <div class="semi-transparent-box">Semi-transparent</div>
31 </section>
32 <header><h4>opacity: 0</h4></header>
33 <section class="sample-view">
34 <div class="transparent-box">Transparent</div>
35 </section>
36 <header><h4>transition: opacity 2s ease-in-out</h4></header>
37 <section class="sample-view">
38 <div class="opacity-transition-box">Opacity with Transition (Fade out on hover)</div>
39 </section>
40 <header><h4>Parent & Child Element</h4></header>
41 <section class="sample-view">
42 <div class="opacity-parent">
43 Parent Element & <span class="opacity-child">Child Element</span>
44 </div>
45 </section>
46 </section>
47 </article>
48 <article>
49 <h3>z-index</h3>
50 <section>
51 <div class="z-index-box1">1</div>
52 <div class="z-index-box2">
53 <div class="z-index-box2-1">2-1</div>
54 2
55 </div>
56 <div class="z-index-box3">3</div>
57 </section>
58 </article>
59 <article>
60 <h3>clip-path</h3>
61 <section>
62 <h4>Clip-path Property Examples</h4>
63 <header><h4>clip-path: circle(50% at 50% 50%)</h4></header>
64 <section class="sample-view">
65 <div class="clip-path-circle">Circle</div>
66 </section>
67 <header><h4>clip-path: ellipse(50% 30% at 50% 50%)</h4></header>
68 <section class="sample-view">
69 <div class="clip-path-ellipse">Ellipse</div>
70 </section>
71 <header><h4>clip-path: polygon(50% 0%, 100% 100%, 0% 100%)</h4></header>
72 <section class="sample-view">
73 <div class="clip-path-polygon">Polygon</div>
74 </section>
75 <header><h4>clip-path: inset(10% 20% 30% 40%)</h4></header>
76 <section class="sample-view">
77 <div class="clip-path-inset">Inset</div>
78 </section>
79 <header><h4>clip-path: url(#myClip)</h4></header>
80 <section class="sample-view">
81 <div class="clip-path-url">Url</div>
82 </section>
83 </section>
84 <svg width="0" height="0">
85 <clipPath id="myClip">
86 <circle cx="50" cy="50" r="40" />
87 </clipPath>
88 </svg>
89 </article>
90 </main>
91</body>
92</html>필터 효과
opacity 속성
1.opaque-box {
2 background-color: skyblue;
3 opacity: 1; /* completely opaque */
4 border: 1px solid black;
5}
6
7.semi-transparent-box {
8 background-color: skyblue;
9 opacity: 0.5; /* semi-transparent */
10 border: 1px solid black;
11}
12
13.transparent-box {
14 background-color: skyblue;
15 opacity: 0; /* completely transparent */
16 border: 1px solid black;
17}
18
19.opacity-transition-box {
20 background-color: orange;
21 transition: opacity 2s ease-in-out;
22 border: 1px solid black;
23}
24
25.opacity-transition-box:hover {
26 opacity: 0; /* Fade out on hover */
27}
28
29.opacity-parent {
30 background-color: blue;
31 opacity: 0.5;
32}
33
34.opacity-child {
35 background-color: red;
36}opacity 속성은 요소의 투명도를 설정하는 데 사용됩니다. 이 속성은 요소 전체의 투명도를 지정하며, 0에 가까운 값일수록 투명도가 높고, 1에 가까운 값일수록 불투명합니다. opacity 속성은 애니메이션과 결합하여 페이드 인 및 페이드 아웃 효과를 만들 수 있습니다.
opacity 속성은 설정된 요소뿐만 아니라 그 자식 요소에도 영향을 미칩니다. 즉, 부모 요소가 반투명으로 설정된 경우 자식 요소도 그 투명도를 상속받습니다.
이 예제에서는 설정이 다음과 같이 구성되어 있습니다.
-
opacity속성이1로 설정되면, 해당 요소는 일반 요소처럼 완전히 불투명해집니다. -
opacity속성이0.5로 설정되면, 해당 요소는 반투명해집니다. -
opacity속성이0으로 설정되면, 해당 요소는 완전히 투명해져 전혀 보이지 않게 됩니다. -
transition속성이opacity로 설정되어 있어서, 마우스 커서가 요소 위에 올려지면 2초 후에 점차 사라지며 완전히 투명해집니다. -
부모 요소에
opacity속성이0.5로 지정되면, 자식 요소들도 반투명해집니다.
z-index 속성
1.z-index-box1 {
2 position: relative;
3 width: 100px;
4 height: 100px;
5 background-color: red;
6 top: 10px;
7 left: 10px;
8 z-index: 1; /* Displayed in the foreground */
9}
10
11.z-index-box2 {
12 position: relative;
13 width: 100px;
14 height: 100px;
15 background-color: blue;
16 top: -100px;
17 left: 90px;
18 z-index: 0; /* Displayed in the background */
19}
20
21.z-index-box3 {
22 position: relative;
23 width: 100px;
24 height: 100px;
25 background-color: green;
26 top: -160px;
27 left: 80px;
28 z-index: 2; /* Displayed in the frontmost layer */
29}
30
31.z-index-box2-1 {
32 position: relative;
33 width: 50px;
34 height: 50px;
35 background-color: skyblue;
36 top: 0px;
37 left: 0px;
38 z-index: 4;
39}z-index는 CSS에서 요소의 쌓임 순서를 제어하는 데 사용되는 속성입니다. 이 속성은 요소가 다른 요소 앞에 나타날지, 혹은 뒤에 나타날지를 지정합니다.
- 빨간 상자에는
z-index가1로 설정되어 있으므로, 이 요소가 다른 요소들보다 앞에 표시됩니다. - 파란 상자에는
z-index가0으로 설정되어 있으므로, 이 요소는 빨간 상자 뒤에 표시됩니다. - 초록 상자는
z-index가2로 설정되어 있어, 가장 앞쪽에 표시됩니다. - 연파란 상자에는
z-index가4로 가장 높게 지정되어 있지만, 부모 요소의z-index가0이기 때문에 가장 앞에 표시되지 않습니다.
기본 메커니즘
z-index 속성은 숫자 값을 가지며, 숫자가 클수록 해당 요소가 숫자가 작은 요소 앞에 표시됩니다. 기본적으로, z-index가 지정되지 않은 요소는 HTML에서 나타나는 순서에 따라 쌓입니다.
그러나, z-index가 적용되기 위해서는 해당 요소의 position 속성을 relative, absolute, fixed, 또는 sticky 중 하나로 설정해야 합니다. 만약 position이 static이라면, z-index는 효과가 없습니다.
값
-
z-index에 양의 정수가 주어지면, 요소가 더 앞쪽에 표시됩니다. 숫자가 클수록 다른 요소보다 더 앞에 표시됩니다.z-index가0으로 설정되면, 기본 쌓임 순서를 유지합니다.z-index가1로 설정되면, 요소는 다른 요소보다 한 층 앞에 표시됩니다.
-
z-index에 음의 정수가 주어지면, 요소가 더 뒤쪽에 표시됩니다. 숫자가 작을수록 다른 요소보다 더 뒤에 표시됩니다.z-index가-1로 설정되면, 요소는 다른 요소보다 한 층 뒤에 표시됩니다.
노트
z-index는 부모 요소의z-index에 의존합니다. 부모 요소에z-index가 지정된 경우, 해당 부모 요소 내에서 상대적인 쌓임 순서가 적용됩니다. 이를 쌓임 컨텍스트(stacking context)라고 합니다. 따라서, 자식 요소에 높은z-index가 있더라도, 부모 요소의z-index가 낮으면 다른 요소보다 앞에 표시되지 않습니다.
clip-path 속성
CSS clip-path는 요소를 특정 모양으로 자르는데 사용되는 속성입니다. 일반적으로 요소는 사각형 상자로 표시되지만, clip-path를 사용하면 요소를 원형 또는 다각형과 같은 복잡한 모양으로 표시할 수 있습니다. 이는 시각적 디자인이나 인터랙티브 효과를 만드는 데 매우 유용한 도구입니다.
clip-path 속성은 요소의 표시 영역을 제한하고, 지정된 모양 밖의 부분을 숨깁니다. 다음으로, 자주 사용되는 모양을 지정하는 방법을 설명하겠습니다.
주요 클리핑 모양
circle()
1.clip-path-circle {
2 width: 100px;
3 height: 100px;
4 background-color: green;
5 clip-path: circle(50% at 50% 50%);
6}circle()은 요소를 원형 모양으로 자릅니다. 원을 제어하려면 중심과 반지름을 지정하십시오.
- 첫 번째
50%는 원의 반지름입니다 (요소의 너비나 높이에 대한 백분율로). - 다음
at 50% 50%는 원의 중심위치입니다 (요소의 너비와 높이에 대한 백분율로).
여기에서는 요소의 크기의 절반 반지름을 가지며 중심에 위치한 원을 지정합니다.
ellipse()
1.clip-path-ellipse {
2 width: 100px;
3 height: 100px;
4 background-color: green;
5 clip-path: ellipse(50% 30% at 50% 50%);
6}ellipse()는 요소를 타원형으로 자릅니다. 너비와 높이의 반지름 그리고 중심 위치를 지정합니다.
- 첫 번째
50% 30%는 너비와 높이의 반지름입니다. - 다음
at 50% 50%는 타원의 중심 위치입니다.
이 예에서는 요소 중심에 위치하며 너비는 50%, 높이는 30%인 타원을 지정합니다.
polygon()
1.clip-path-polygon {
2 width: 100px;
3 height: 100px;
4 background-color: green;
5 clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
6}polygon()은 지정된 꼭짓점을 연결하여 다각형을 형성합니다. 각 꼭짓점은 요소 내의 상대적인 좌표로 지정됩니다.
- 이 예에서는 세 꼭짓점 (위쪽 중앙, 아래쪽 오른쪽, 아래쪽 왼쪽)을 지정하여 삼각형으로 자릅니다.
polygon()은 매우 유연하며 어떤 모양도 생성할 수 있습니다.
inset()
1.clip-path-inset {
2 width: 100px;
3 height: 100px;
4 background-color: green;
5 clip-path: inset(10% 20% 30% 40%);
6}inset()은 요소의 외곽 가장자리부터 안쪽으로 자릅니다. 각 네 면으로부터의 거리를 지정하여 사각형을 정의합니다.
10%는 위쪽 가장자리로부터의 거리입니다.20%는 오른쪽 가장자리로부터의 거리입니다.30%는 아래쪽 가장자리로부터의 거리입니다.40%는 왼쪽 가장자리로부터의 거리입니다.
이 지정은 요소 내부로 줄어든 사각형을 만듭니다.
SVG를 사용한 clip-path
1/*
2<svg width="0" height="0">
3 <clipPath id="myClip">
4 <circle cx="50" cy="50" r="40" />
5 </clipPath>
6</svg>
7*/
8.clip-path-url {
9 width: 100px;
10 height: 100px;
11 background-color: green;
12 clip-path: url(#myClip);
13}CSS clip-path는 기본 도형뿐만 아니라 SVG <clipPath> 요소를 사용하여 복잡한 모양도 잘라낼 수 있습니다.
- 이 예제에서는 SVG에서
myClip이라는id로 정의된 원형 클립 패스가 HTML 요소에 적용됩니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.