CSS 투명도(Opacity)
CSS에서 opacity 속성은 요소의 투명도를 설정하는 데 사용됩니다. 이 글에서는 opacity 속성에 대해 설명합니다.
1. opacity란?
opacity 속성은 요소의 투명도를 지정합니다. 값은 0에서 1 사이의 숫자로 표현되며, 0은 완전히 투명함을, 1은 완전히 불투명함을 의미합니다. 중간 값은 반투명한 상태를 나타냅니다.
opacity: 0;: 완전히 투명opacity: 0.5;: 반투명opacity: 1;: 완전히 불투명
2. 기본 사용법
opacity 속성을 사용하여 요소의 투명도를 조절하는 방법을 코드로 예시를 들어보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 투명도 0 (완전히 투명) */
.transparent-box {
background-color: green;
opacity: 0;
}
/* 투명도 0.5 (반투명) */
.semi-transparent-box {
background-color: green;
opacity: 0.5;
}
/* 투명도 1 (완전히 불투명) */
.opaque-box {
background-color: green;
opacity: 1;
}
See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.
위의 예시에서 .transparent-box는 완전히 투명하게 설정되며, .semi-transparent-box는 반투명, .opaque-box는 완전히 불투명하게 설정됩니다.
3. child element에 미치는 영향
opacity 속성은 부모 요소뿐만 아니라 자식 요소에도 영향을 미칩니다. 부모 요소에 설정된 투명도는 모든 자식 요소에도 동일하게 적용됩니다.
1
2
3
4
5
6
<div class="parent-box">
Parent Box
<div class="child-box">
Child Box
</div>
</div>
1
2
3
4
5
6
7
8
9
10
.parent-box {
background-color: blue;
opacity: 0.5;
padding: 20px;
}
.child-box {
background-color: red;
padding: 10px;
}
See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.
위의 예시에서 .parent-box에 설정된 opacity: 0.5;는 .child-box에도 동일하게 적용되어 자식 요소 역시 반투명하게 보입니다.
4. 응용. 애니메이션과 결합
opacity 속성은 CSS 애니메이션과 함께 사용하면 fade-in, fade-out 효과를 만들 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fade-out-box {
background-color: purple;
animation: fade-out 2s forwards;
}
See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.
위의 예시에서 .fade-out-box는 2초 동안 점점 투명해지는 애니메이션이 적용됩니다.