웹 페이지에서 버튼이 클릭할 수 없는 상태임을 시각적으로 표현하고 싶다면, CSS의 opacity 속성을 활용하는 것이 가장 간단한 방법입니다.
비활성화 버튼의 원리
opacity 속성은 요소의 투명도를 조절합니다. 값을 0.5 정도로 낮추면 버튼이 흐릿하게 보여 마치 비활성화된 것처럼 느껴지게 됩니다. 실제 HTML의 disabled 속성과 함께 사용하면 기능적으로도 클릭이 차단되어 더욱 완벽한 UX를 제공할 수 있습니다.
예제 코드
아래 코드를 실행하면 활성화된 버튼과 비활성화된 모양의 버튼을 나란히 비교해 볼 수 있습니다.
<!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.5;
}
</style>
</head>
<body>
<h2>결과</h2>
<p>아래 버튼을 클릭해 결과를 확인해 보세요:</p>
<button class = "btn1">활성화됨</button>
<button class = "btn2">비활성화됨</button>
</body>
</html>추가 팁
비활성화 상태를 더욱 명확하게 전달하려면 cursor: not-allowed; 스타일을 함께 적용하는 것이 좋습니다. 이렇게 하면 마우스 커서가 금지 아이콘으로 변경되어 사용자에게 클릭이 불가능함을 직관적으로 알려줄 수 있습니다.