버튼에 투명도를 추가하려면 CSS의 opacity 속성을 사용하면 됩니다. 이 속성은 버튼이 비활성화된 것처럼 보이는 시각적 효과를 만들어 주어, 사용자에게 현재 클릭할 수 없는 상태임을 직관적으로 알려줄 수 있습니다.
opacity 값은 0부터 1 사이의 숫자로 지정하며, 값이 작아질수록 더욱 투명해집니다. 예를 들어 opacity: 0.8;은 약간 흐릿한 느낌을, opacity: 0.5;는 절반 정도의 투명도를 나타냅니다.
아래 코드를 실행하면 일반 버튼과 투명도가 적용된 버튼의 차이를 직접 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.btn1 {
color: black;
text-align: center;
font-size: 15px;
}
.btn2 {
color: black;
text-align: center;
font-size: 15px;
opacity: 0.8;
}
</style>
</head>
<body>
<h2>결과</h2>
<p>아래 버튼을 클릭해 결과를 확인해 보세요:</p>
<button class = "btn1">활성화됨</button>
<button class = "btn2">비활성화됨</button>
</body>
</html>추가 팁
실제로 버튼을 비활성화하려면 HTML의 disabled 속성을 함께 사용하는 것이 좋습니다. opacity만으로는 시각적인 효과일 뿐 클릭 동작 자체가 막히지 않기 때문입니다. 다음과 같이 조합하면 접근성과 사용자 경험을 모두 챙길 수 있습니다.
<button class = "btn2" disabled>비활성화됨</button>