opacity : 요소를 투명하게 설정하기(css) | 전자책 제작 팁

 

​

opacity 속성은 CSS에서 요소의 투명도를 조절하는 데 사용되는 중요한 속성입니다. 마치 유리창에 안개를 낀 정도를 조절하는 것처럼, 요소의 배경과 내용을 얼마나 투명하게 보여줄지를 결정합니다.

opacity 속성의 기본적인 사용법

element {
  opacity: 0.5;
}

element: 투명도를 적용할 요소를 지정합니다. (예: div, img, span 등)

opacity: 0에서 1 사이의 값을 가집니다.

0: 완전히 투명 (보이지 않음)

1: 완전히 불투명 (기본값)

0.5: 50% 투명 (반투명)


예시:

<div class="box">
  이것은 투명한 박스입니다.
</div>

 

.box {
  background-color: blue;
  opacity: 0.7;
}

위 코드는 파란색 배경을 가진 div 요소를 생성하고, opacity 값을 0.7로 설정하여 70% 투명하게 만듭니다.
​

opacity 속성의 특징

상속: opacity 속성은 자식 요소에도 상속됩니다. 즉, 부모 요소의 opacity 값이 변경되면 자식 요소도 동일한 투명도를 갖게 됩니다.

레이어링: opacity 값이 1이 아닌 요소는 새로운 쌓임 맥락에 배치됩니다. 이는 다른 요소와의 레이어링에 영향을 줄 수 있습니다.

성능: opacity 속성은 일반적으로 성능에 큰 영향을 미치지 않지만, 너무 많은 요소에 opacity를 적용하거나 복잡한 애니메이션을 사용하는 경우 성능 저하가 발생할 수 있습니다.

​

opacity와 rgba의 차이점

opacity: 요소 전체의 투명도를 조절합니다. 배경색, 테두리, 글자 등 모든 요소가 동일한 투명도를 갖습니다.

rgba: 색상 값에 투명도를 추가하여 배경색만 투명하게 만들 수 있습니다. 글자는 불투명하게 유지할 수 있습니다.

​

rgba 예시:

.box {
  background-color: rgba(0, 0, 255, 0.7); /* 파란색 배경, 70% 투명 */
  color: white;
}

#css #전자책 #디자인 #html #투명도 #opacity