CSS 불투명도(opacity) 완벽 가이드: 웹 요소 투명도 조절 방법

웹사이트를 디자인하다 보면 특정 요소를 다른 요소보다 더 투명하게 보이게 하고 싶은 경우가 있습니다. 예를 들어, 여러 장의 이미지가 포함된 웹 페이지에서 이미지들을 살짝 반투명하게 처리해 분위기를 연출하고 싶을 수 있죠.

이럴 때 유용하게 쓰이는 것이 바로 CSS의 opacity(불투명도) 속성입니다. opacity 속성은 웹 요소의 투명도를 지정하는 데 사용됩니다.

이 글에서는 실제 예제와 함께 opacity 속성을 활용해 웹 페이지의 요소를 투명하게 만드는 방법을 단계별로 살펴보겠습니다. 글을 끝까지 읽고 나면 CSS opacity 속성을 전문가처럼 자유롭게 다룰 수 있게 될 것입니다.

CSS opacity 속성이란?

CSS opacity 속성은 요소를 반투명하게 만들어 뒤에 있는 내용이 비치도록 해줍니다.

opacity 값은 0부터 1 사이의 숫자로 지정합니다. 값이 작을수록 요소는 더 투명해집니다. 즉, 값이 0이면 요소가 완전히 투명해져 보이지 않게 되고, 값이 1이면 기본 상태 그대로 선명하게 표시됩니다.

다음은 opacity 속성의 기본 문법입니다:

img { opacity: 0.5; }

위 코드는 웹 페이지의 모든 img 요소의 불투명도를 0.5로 설정합니다. 결과적으로 페이지 내의 모든 이미지가 기본값보다 50% 더 투명하게 표시됩니다.

여기서 주의할 점이 있습니다. opacity 속성은 부모 요소에 적용하면 그 안에 포함된 자식 요소에도 함께 적용된다는 점입니다. 예를 들어 텍스트가 들어 있는 박스에 opacity를 지정하면 박스뿐만 아니라 안의 텍스트까지 모두 투명해집니다.

opacity 속성의 문법을 이해했으니, 이제 실제 활용 예제를 몇 가지 살펴보겠습니다.

투명한 이미지 만들기

웹사이트에서 이미지를 투명하게 보이게 하고 싶다면 CSS opacity 속성을 사용하면 됩니다.

다음은 이미지의 불투명도를 0.7로 설정하여 70%만큼 선명하게 표시하는 예제입니다:

img {
	opacity: 0.7;
}

위 코드의 실행 결과는 아래와 같습니다:

왼쪽 이미지에는 별도의 불투명도 값을 지정하지 않았기 때문에 원래 상태 그대로 표시됩니다. 반면 오른쪽 이미지는 불투명도를 0.7로 설정했기 때문에 왼쪽 이미지보다 더 투명하게 보이는 것을 확인할 수 있습니다.

마우스 오버(hover) 시 투명도 변경하기

opacity 속성을 사용할 때, 사용자가 이미지 위에 마우스를 올렸을 때 투명도가 변하도록 만들고 싶은 경우가 있습니다.

이럴 때는 CSS의 :hover 선택자를 opacity 속성과 함께 사용하면 됩니다. 마우스 커서가 이미지 위에 올라왔을 때 투명도 수준을 동적으로 변경할 수 있습니다.

예를 들어, 기본 상태에서 이미지를 50% 투명하게(즉, 불투명도 0.5) 표시하고, 사용자가 마우스를 올렸을 때는 불투명도를 1로 변경하여 완전히 선명하게 보이도록 하려면 다음과 같이 코드를 작성할 수 있습니다:

.img {
  opacity: 0.5;
}

.img:hover {
  opacity: 1;
}

위 코드의 실행 결과는 아래와 같습니다:

왼쪽은 사용자가 마우스 커서를 이미지 위에 올렸을 때의 모습이고, 오른쪽은 마우스를 올리지 않았을 때의 모습입니다.

기본 상태에서는 이미지가 50% 투명하게 표시되지만, 사용자가 이미지 위에 마우스를 올리면 불투명도가 1로 변경되어 이미지가 완전히 선명하게 나타납니다.

투명한 박스 만들기

opacity 속성은 이미지뿐만 아니라 CSS에서 박스를 투명하게 만들 때도 활용할 수 있습니다.

앞서 언급했듯이, opacity 속성으로 요소를 투명하게 만들면 해당 요소 내부의 모든 요소도 동일한 투명도가 적용됩니다.

예를 들어, 웹 페이지에 두 개의 <div> 박스가 있다고 가정해 보겠습니다. 하나는 일반 상태로 표시하고, 다른 하나는 50% 투명하게 만들고 싶다면 다음과 같은 코드를 사용할 수 있습니다:

.div1 {
background-color: #B5651D;
	opacity: 0.5;
 	text-align: center;
  	padding: 20px;
  	color: black;
}

위 코드의 실행 결과는 아래와 같습니다:

이 예제에서는 두 개의 박스를 만들었습니다. 위쪽 박스는 아래쪽 박스와 동일한 스타일을 갖지만 불투명도 값이 지정되어 있지 않습니다. 반면 아래쪽 박스는 불투명도가 0.5로 설정되어 있어 50% 투명하게 표시됩니다.

결과를 보면 아래쪽 박스의 텍스트 역시 함께 투명해진 것을 확인할 수 있습니다. 이는 <div> 박스 내부의 모든 요소가 지정된 투명도 값을 상속받기 때문입니다.

RGBA 색상으로 투명도 적용하기

지금까지는 opacity 속성을 사용해 요소의 투명도를 조절했습니다. 하지만 요소를 투명하게 만드는 또 다른 방법이 있습니다. 바로 RGBA 색상 값을 사용해 요소의 배경색에 투명도를 지정하는 것입니다.

색상을 지정할 때 일반적으로 RGB 값을 많이 사용합니다. 여기에 알파(alpha) 값을 추가한 RGBA 형식을 사용하면 지정한 색상의 불투명도까지 함께 설정할 수 있습니다.

이 방식이 유용한 이유는 요소의 배경색에만 투명도를 적용할 수 있기 때문입니다. rgba()로 지정한 투명도는 요소 내부의 자식 요소에는 영향을 주지 않습니다. 반면 앞서 살펴본 opacity 속성은 부모 요소뿐 아니라 내부의 모든 요소에 함께 적용된다는 점에서 차이가 있습니다.

앞선 예제의 갈색 박스를 다시 가져와 보겠습니다. 박스 자체는 70% 투명하게 만들되, 박스 안의 텍스트는 그대로 유지하고 싶다면 다음과 같은 코드를 사용할 수 있습니다:

.div1 {
 	text-align: center;
  	padding: 20px;
  	color: black;
	background: rgba(181, 101, 29, 0.3);
}

위 코드의 실행 결과는 아래와 같습니다:

코드에서 불투명도 값을 0.3으로 지정했습니다. 불투명도 값이 작을수록 요소가 더 투명해지기 때문에, 0.3은 요소가 70% 투명하다는 의미입니다. 또한 텍스트 색상은 검은색으로 지정했습니다.

위쪽 박스는 투명도가 적용되지 않은 일반적인 <div>의 모습이고, 아래쪽 박스는 rgba() 값으로 불투명도를 0.3으로 설정한 모습입니다. 아래쪽 박스가 위쪽 박스보다 확실히 더 투명한 것을 확인할 수 있습니다.

하지만 박스 내부의 텍스트인 This is a box는 전혀 투명해지지 않았습니다. 이는 박스의 배경색에만 투명도를 적용했기 때문입니다.

마무리

CSS opacity 속성은 웹 페이지의 요소 투명도를 설정하는 데 사용됩니다.

이 글에서는 예제와 함께 opacity 속성을 활용해 이미지와 박스의 투명도를 변경하는 방법을 살펴보았습니다. 또한 RGBA 색상을 사용해 CSS에서 투명 효과를 구현하는 방법도 알아보았습니다. 이제 opacity 속성을 전문가처럼 활용할 준비가 되셨습니다!