“disabled”라고 다 같은 게 아니다 – HTML 속성과 CSS 클래스의 결정적 차이

들어가며

웹페이지를 만들다 보면 이런 코드를 자주 만나게 됩니다.

<button disabled>저장</button>

그런데 조금 더 코드를 들여다보면 이런 것도 보입니다.

<button class="Button disabled">저장</button>

둘 다 화면에서는 비슷하게 회색으로 보일 수 있습니다.

그래서 처음 코드를 보는 사람이라면 자연스럽게 이런 생각을 하게 됩니다.

“둘 다 disabled인데 같은 기능 아닌가?”

결론부터 말하면 전혀 다릅니다.

하나는 브라우저가 이해하는 HTML 표준 속성(attribute)이고, 다른 하나는 개발자가 CSS나 JavaScript에서 사용하기 위해 붙여놓은 단순한 클래스(class)입니다.

이 차이를 알고 나면 왜 어떤 버튼은 정말 클릭이 안 되고, 어떤 버튼은 회색으로 보이는데도 클릭되는지 이해할 수 있습니다.

disabled 속성은 브라우저가 알아듣습니다

먼저 HTML의 disabled 속성부터 보겠습니다.

<button disabled>저장</button>

여기에서 disabled는 단순히 이름을 붙여놓은 것이 아닙니다.

HTML에서 정해진 표준 속성이기 때문에 브라우저가 그 의미를 알고 있습니다.

즉,

“이 버튼은 비활성화된 상태다.”

라고 브라우저에게 직접 알려주는 셈입니다.

그래서 브라우저는 해당 요소의 동작을 실제로 변경합니다.

대표적으로 버튼이 비활성화되면 일반적인 마우스 클릭을 통한 버튼 동작이 실행되지 않고, 키보드로 해당 버튼에 포커스를 이동하는 것도 제한됩니다.

또한 기본 브라우저 스타일에 따라 버튼이 흐릿하거나 회색으로 표시되기도 합니다.

그래서 별도의 CSS를 작성하지 않았는데도 이런 모습이 나타나는 경우가 있습니다.

<button disabled>저장</button>
<button>불러오기</button>

두 버튼을 나란히 놓으면 disabled가 붙은 버튼이 알아서 비활성화된 것처럼 보입니다.

이것이 바로 브라우저가 disabled를 실제 기능으로 인식하기 때문입니다.

그런데 disabled를 class에 넣으면 이야기가 달라집니다

이번에는 이런 코드를 보겠습니다.

<button class="Button disabled">저장</button>

겉으로 보기에는 아까 코드와 상당히 비슷합니다.

하지만 브라우저 입장에서는 완전히 다릅니다.

여기에서 disabled는 HTML 속성이 아니라 클래스 이름입니다.

즉 브라우저는 이것을 보고

“아, 이 버튼은 비활성화해야겠구나.”

라고 판단하지 않습니다.

그냥

“이 요소의 class에 disabled라는 이름이 들어 있구나.”

정도로 받아들입니다.

따라서 다음과 같은 코드가 있다고 해서

<button class="Button disabled">저장</button>

버튼이 자동으로 클릭되지 않는 것은 아닙니다.

오히려 JavaScript에서 별도의 클릭 방지 처리를 하지 않았다면 버튼의 클릭 이벤트가 정상적으로 발생할 수도 있습니다.

이 차이가 상당히 중요합니다.

그렇다면 .disabled 클래스는 왜 사용하는 걸까?

여기서 의문이 하나 생깁니다.

“브라우저가 알아듣지도 못하는데 왜 굳이 disabled라는 클래스를 붙일까?”

가장 흔한 이유는 화면 디자인과 상태 관리를 개발자가 직접 제어하기 위해서입니다.

예를 들어 CSS에서 이렇게 작성할 수 있습니다.

.button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

그러면 disabled 클래스가 붙은 요소를 흐리게 만들 수 있습니다.

중요한 것은 이 CSS가 버튼을 실제로 비활성화시키는 것은 아니라는 점입니다.

화면상으로는 비활성화된 것처럼 보이지만, 실제 클릭 동작까지 막으려면 JavaScript에서 별도의 처리가 필요합니다.

예를 들어 다음처럼 작성할 수 있습니다.

$(".button.disabled").on("click", function(e) {
    e.preventDefault();
    return false;
});

이런 방식으로 개발자가 직접 동작을 제어할 수 있습니다.

결국 .disabled는 상태를 표시하기 위한 개발자 측의 약속이라고 생각하면 이해하기 쉽습니다.

그래서 disabled 속성과 .disabled 클래스는 무엇이 다를까?

한눈에 비교해 보면 훨씬 명확합니다.

구분	disabled 속성	.disabled 클래스
정체	HTML 표준 속성	CSS 클래스 이름
브라우저 인식	O	X
클릭 동작	브라우저가 비활성화	기본적으로 그대로
키보드 포커스	비활성화 요소 특성 적용	그대로 가능
기본적인 비활성화 표시	브라우저 기본 스타일 적용 가능	직접 CSS 작성 필요
CSS 선택	:disabled	.disabled
동작 제어	브라우저가 일부 처리	JavaScript에서 직접 처리
관리 주체	브라우저 + HTML	개발자 코드

여기서 가장 중요한 차이는 역시 이것입니다.

disabled 속성은 기능이고, .disabled 클래스는 표시 또는 상태를 나타내는 이름표에 가깝습니다.

그런데 실제 프로젝트에서는 둘을 같이 쓰기도 합니다

여기서 개발하다 보면 조금 재미있는 상황을 만나게 됩니다.

다음처럼 두 가지를 동시에 사용하는 코드입니다.

<button disabled class="Button disabled">
    저장
</button>

처음 보면 굳이 같은 의미를 두 번 적는 것처럼 느껴집니다.

하지만 실제 프로젝트에서는 나름의 이유가 있습니다.

disabled 속성은 브라우저가 실제 동작을 막도록 합니다.

반면 .disabled 클래스는 프로젝트에서 사용하는 CSS가 해당 상태를 표현하도록 만들어줍니다.

즉,

HTML의 disabled = 실제 비활성화

CSS의 .disabled = 프로젝트에서 사용하는 비활성화 표시

이렇게 역할을 나눌 수 있습니다.

특히 오래 운영된 프로젝트나 여러 종류의 UI 컴포넌트가 섞여 있는 프로젝트에서는 이런 패턴을 쉽게 볼 수 있습니다.

<button>이 아닌 요소에서는 더 필요할 수도 있습니다

disabled 클래스가 사용되는 또 하나의 이유가 있습니다.

웹페이지에는 버튼만 있는 것이 아니기 때문입니다.

예를 들어 다음과 같은 요소가 있다고 해보겠습니다.

<div class="pick-btn disabled">선택</div>

이 경우 div 자체에는 일반적인 버튼처럼 사용할 수 있는 disabled 속성이 없습니다.

그래서 개발자가 CSS 클래스인 .disabled를 이용해 비활성 상태를 표현할 수 있습니다.

예를 들어

.pick-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}

처럼 처리할 수 있습니다.

이렇게 하면 버튼뿐만 아니라 다양한 UI 요소에 동일한 비활성화 디자인을 적용할 수 있습니다.

다만 여기에도 주의할 점이 있습니다.

pointer-events: none 같은 CSS 처리는 HTML의 disabled와 동일한 의미가 아닙니다.

마우스 클릭을 막는 것과 키보드 접근성, 폼 동작, 스크린리더가 인식하는 상태 등은 서로 다른 문제이기 때문입니다.

따라서 단순히 회색으로 보이게 만드는 것과 실제로 비활성화하는 것은 구분해서 생각하는 것이 좋습니다.

JavaScript에서는 둘을 함께 관리하기도 합니다

실제 프로젝트 코드에서는 이런 형태도 자주 볼 수 있습니다.

$("#btnReset, #btnSelect")
    .prop("disabled", true)
    .addClass("disabled");

이 코드가 실행되면 두 가지 일이 동시에 발생합니다.

먼저

.prop("disabled", true)

가 HTML 요소의 disabled 상태를 변경합니다.

따라서 브라우저가 버튼을 실제 비활성화 상태로 처리하게 됩니다.

그리고

.addClass("disabled")

가 disabled라는 CSS 클래스를 추가합니다.

이제 프로젝트에서 .disabled에 정의해 둔 스타일도 적용할 수 있습니다.

결국 하나의 코드에서

브라우저 기능 + 프로젝트 디자인

을 동시에 관리하는 것입니다.

반대로 활성화할 때도 둘 다 처리해야 합니다

그렇다면 버튼을 다시 활성화할 때는 어떻게 해야 할까요?

비활성화할 때 두 가지를 모두 적용했다면 해제할 때도 양쪽을 맞춰주는 것이 좋습니다.

예를 들면 다음과 같습니다.

$("#btnReset, #btnSelect")
    .prop("disabled", false)
    .removeClass("disabled");

disabled 속성을 해제하고,

동시에

disabled 클래스도 제거합니다.

만약 한쪽만 변경한다면 이상한 상황이 생길 수 있습니다.

예를 들어 disabled 속성은 제거했는데 .disabled 클래스가 남아 있다면 버튼은 실제로 클릭할 수 있지만 화면에서는 계속 비활성화된 것처럼 보일 수 있습니다.

반대로 클래스만 제거하고 disabled 속성을 그대로 두면 화면은 활성화된 것처럼 보이는데 실제 버튼은 눌리지 않을 수도 있습니다.

이런 문제가 현장에서 꽤 골치 아픈 버그가 됩니다.

결국 이름보다 ‘누가 그 이름을 해석하는가’가 중요합니다

프로그래밍을 하다 보면 이름이 같다는 이유만으로 같은 기능이라고 생각하기 쉽습니다.

하지만 웹에서는 누가 그 이름을 해석하느냐가 중요합니다.

disabled

라는 HTML 속성은 브라우저가 알고 있습니다.

반면

class="disabled"

에서 disabled는 개발자가 정한 이름일 뿐입니다.

브라우저가 특별한 의미를 부여하지 않습니다.

그래서 둘은 이름은 같아도 역할이 다릅니다.

쉽게 비유하면 이렇습니다.

disabled 속성은 브라우저가 알아듣는 공식 명령어이고, .disabled 클래스는 우리가 알아보기 쉽게 붙여놓은 이름표입니다.

이 차이를 알고 있으면 HTML과 CSS, JavaScript가 서로 어떻게 연결되는지도 조금 더 선명하게 보입니다.

마무리

웹페이지의 버튼 하나를 만드는 것도 자세히 들여다보면 생각보다 많은 요소가 연결되어 있습니다.

화면에서 버튼이 회색으로 보인다고 해서 반드시 실제로 비활성화된 것은 아닙니다.

반대로 화면에서는 평범해 보여도 HTML의 disabled 속성 때문에 실제 동작이 막혀 있을 수도 있습니다.

그래서 개발 중 버튼이 이상하게 동작한다면 단순히 CSS만 볼 것이 아니라 다음 세 가지를 함께 확인하는 것이 좋습니다.

① disabled 속성이 있는가?

② .disabled 클래스가 붙어 있는가?

③ JavaScript에서 클릭이나 상태를 별도로 제어하고 있는가?

특히 기존 프로젝트를 수정하다 보면 .disabled라는 클래스가 여러 UI 요소에 공통으로 사용되는 경우가 있습니다.

그럴 때는 무조건 클래스를 지우거나 추가하기보다 HTML 속성, CSS 규칙, JavaScript 이벤트를 함께 확인하는 것이 안전합니다.

결국 핵심은 하나입니다.

disabled라고 다 같은 disabled가 아닙니다.

브라우저가 이해하는 disabled와 우리가 코드에 붙여놓은 .disabled는 이름만 같을 뿐, 실제 역할은 다릅니다.

이 차이를 알아두면 버튼이 왜 눌리지 않는지, 왜 회색으로 보이는지, 그리고 왜 prop("disabled", true)와 addClass("disabled")를 함께 사용하는지까지 한 번에 이해할 수 있습니다.