JavaScript에서는 opacity 속성을 사용하여 요소의 불투명도 수준을 손쉽게 설정할 수 있습니다. 이 속성은 0(완전히 투명)부터 1(완전히 불투명) 사이의 값을 가지며, 소수점 단위로 세밀하게 조절할 수 있습니다.
기본 사용법
요소의 불투명도를 변경하려면 document.getElementById() 등으로 해당 요소를 선택한 뒤, style.opacity에 원하는 값을 할당하면 됩니다.
예제 코드
아래 예제에서는 버튼을 클릭하면 회색 배경의 div 요소가 반투명하게 변합니다. 직접 실행해 보면서 동작을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 450px;
background-color: gray;
}
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 불투명도가 설정됩니다.</p>
<button type="button" onclick="display()">불투명도 설정</button>
<div id="box">
<p>이것은 div 요소입니다. 이것은 div 요소입니다. 이것은 div 요소입니다.</p>
<p>이것은 div 요소입니다. 이것은 div 요소입니다. 이것은 div 요소입니다.</p>
<p>이것은 div 요소입니다. 이것은 div 요소입니다. 이것은 div 요소입니다.</p>
</div>
<br>
<script>
function display() {
document.getElementById("box").style.opacity = "0.5";
}
</script>
</body>
</html>
코드 설명
버튼을 클릭하면 display() 함수가 호출되고, 함수 내부의 document.getElementById("box").style.opacity = "0.5"; 구문에 의해 id가 box인 요소의 불투명도가 0.5로 설정됩니다. 그 결과 해당 요소는 50% 투명한 상태로 화면에 표시됩니다.
opacity 값 정리
0: 완전히 투명 (보이지 않음)
0.5: 반투명
1: 완전히 불투명 (기본값)
참고로 CSS에서처럼 JavaScript에서도 opacity 값은 자식 요소까지 함께 영향을 받으므로, 텍스트만 투명하게 하고 싶다면 rgba() 색상이나 별도의 오버레이 요소를 활용하는 것이 좋습니다.