본문 바로가기
HTML/CSS문법

CSS opacity/transparency

by flycoding 2023. 8. 31.
반응형

opacity 속성은 요소의 불투명도/투명도를 지정한다.

 

투명 이미지(transparent image)

opacity 속성은 0.0 - 1.0 사이의 값을 사용할 수 있다. 값이 낮을수록 투명도가 높다:

CSS opacity 예

 

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image 투명도</h1>
<p>opacity 특성은 요소의 투명도를 지정합니다. 값이 낮을수록 투명도가 높습니다:</p>

<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">

</body>
</html>

img 요소에 opacity속성에 0.5값을 설정하도록 설정하였고, 실행결과 화면은 아래 그림과 같다.

CSS opacity 예제

 

Transparent hover Effect

opacity 속성은 종종 :hover 선택기와 함께 마우스 오버 시 불투명도를 변경하는 데 사용된다:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>

<h1>Image 투명도</h1>
<p>불투명도 속성은 종종 :hover 선택기와 함께 사용되어 마우스 오버 시 불투명도를 변경합니다:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>

img 요소에 불투명도는 0.5인데 마우스로 hover시에는 불투명도를 1로 설정하여 선명하게 보여주도록 스타일을 정의하였고, 위의 코드를 실행하면 아래 그림과 같다.

CSS opacity :hover 시 투명도 설정 예제

 

투명도 박스

opacity 속성을 사용하여 요소의 배경에 투명도를 추가할 때 모든 하위 요소가 동일한 투명도를 상속한다. 이렇게 하면 완전히 투명한 요소 내부의 텍스트를 읽기 어렵게 만들 수 있다:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #4CAF50;
  padding: 10px;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>투명도 박스</h1>
<p>불투명 특성을 사용하여 요소의 배경에 투명도를 추가할 때 모든 하위 요소가 동일한 투명도를 상속합니다. 이렇게 하면 완전히 투명한 요소 내부의 텍스트를 읽기 어렵게 만들 수 있습니다::</p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

opacity 0.1 0.3. 0.6 1로 설정한 투명도 박스 내에 글자와 투명도를 아래 그림과 같이 비교하여 표시하였다.

CSS transparency box(투명도 박스) 예제

 

CSS RGBA를 사용한 투명도

위의 예제와 같이 자식 요소에 불투명도를 적용하지 않으려면 RGBA 색상 값을 사용하시오. 다음 예제에서는 텍스트가 아닌 배경 색상에 불투명도를 설정한다:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(76, 175, 80);
  padding: 10px;
}

div.first {
  background: rgba(76, 175, 80, 0.1);
}

div.second {
  background: rgba(76, 175, 80, 0.3);
}

div.third {
  background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>

<h1>투명도 박스</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>

<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

<p>불투명 특성을 사용할 때 배경색뿐만 아니라 텍스트가 투명해지는 방법에 주목합니다.</p>

</body>
</html>

rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.3), rgba(76, 175, 80, 0.6) 각각 투명도 0.1, 0.3, 0.6을 설정한 결과가 아래 그림과 같다.

CSS RGBA를 사용한 투명도 박스 예제

 

투명도 박스 내에 텍스트

<!DOCTYPE html>
<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>투명 상자에 있는 텍스트입니다.</p>
  </div>
</div>

</body>
</html>

먼저 배경 이미지와 테두리로 <div> 요소(class="background")를 만든다.
그런 다음 첫 번째 <div> 안에 또 다른 <div>(class="트랜스박스")를 만든다.
<div class="transbox">에는 배경색이 있고 경계 - div는 투명하다.
투명 <div> 안에 <p> 요소 안에 텍스트를 추가한다.

 

위의 코드를 실행한 결과는 아래 그림과 같다.

CSS 투명도박스내에 텍스트 예제

 

지금까지 CSS에서 불투명도와 투명도를 활용하는 개념과 실습을 하였다.

모두 손으로, 눈으로, 머리로 꼭 실습하세요

모두 화이팅입니다.!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

반응형
저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS 수평 네비게이션 바  (0) 2023.09.02
CSS navigation bar  (0) 2023.09.01
CSS pseudo-elements  (1) 2023.08.30
CSS pseudo-classes  (0) 2023.08.29
CSS combination  (0) 2023.08.28

관련글

댓글

티스토리툴바