투명도(Opacity)

물감으로 그림을 그릴 때, 물을 섞으면 색상을 조금 더 투명하게 만들 수 있습니다.

물감의 투명도가 높아지면 아래의 레이어나 배경이 투명하게 비쳐 보이게 됩니다.

CSS에서 opacity는 웹 요소의 투명도를 조절하는 속성으로, HTML 요소에 투명한 물감과 같은 효과를 줄 수 있습니다.

opacity 속성

opacity 속성은 0.0에서 1.0 사이의 값을 갖습니다.

여기서 0.0은 완전히 투명, 1.0은 완전히 불투명을 의미합니다. 값이 작아질수록 요소는 더 투명해지고, 값이 커질수록 더 불투명해집니다.

예시 코드:

CSS
.transparent-box {
  opacity: 0.5; /* 50% 투명도 */
}

.opaque-box {
  opacity: 1; /* 100% 불투명 (기본값) */
}

코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!