버튼이 투명해지면 클릭도 사라지나요?
CSS는 웹페이지 요소의 모양과 배치를 정하는 언어입니다. 그중 opacity는 요소를 얼마나 불투명하게 그릴지 정합니다. 값이 1이면 온전히 보이고, 0이면 완전히 투명해집니다. 다른 설정이 그대로인 일반 버튼에 opacity:0만 적용하면 버튼이 차지하던 자리와 클릭 기능은 남습니다.
키보드의 Tab 키로 다음 조작 대상을 찾아갈 때도 그 버튼에 초점이 갈 수 있습니다. 초점은 키보드 입력을 받을 대상이 선택된 상태입니다. 눈에 보이는 모습과 실제 입력을 받는 상태를 따로 확인해야 투명한 버튼의 동작을 알 수 있습니다.
display:none과 visibility:hidden은 무엇을 바꾸나요?
display:none은 버튼을 그릴 상자 자체를 없애 문서 배치에서 제외합니다. 이 상태의 버튼은 마우스로 누르거나 Tab으로 찾아가는 대상에서 빠집니다. 버튼의 정보는 문서 안에 남아 있어 display 설정을 되돌리면 다시 표시할 수 있습니다.
visibility:hidden은 버튼이 차지하던 공간을 남겨 두면서 모습을 숨깁니다. 아래의 단순한 버튼에서는 마우스 클릭과 Tab 초점도 받지 않습니다. 두 설정을 번갈아 적용하면서 버튼 주변에 있던 내용이 어떻게 놓이는지 보세요. 공간이 남는지 여부가 두 설정을 구별하는 단서입니다.
pointer-events:none을 더하면 키보드도 멈추나요?
opacity:0에 pointer-events:none을 함께 주면 이 버튼은 마우스나 터치가 가리키는 대상에서 빠집니다. 같은 위치 아래에 다른 요소가 있다면 그 요소가 입력 대상이 될 수 있습니다. 그러나 pointer-events는 Tab으로 이동하는 순서를 그대로 두므로, 버튼에 키보드 초점이 갈 수 있습니다.
버튼에 disabled 속성을 주면 사용자가 누르는 동작과 키보드 초점을 함께 막습니다. 버튼의 모습과 자리는 남습니다. 아래 활동에서 투명한 상태와 disabled 상태를 비교해 보면, 요소를 보이는 방식과 조작을 허용하는 방식이 어떻게 다른지 확인할 수 있습니다.
화면에서 동작을 어떻게 직접 확인하나요?
먼저 보이는 버튼을 누르고 누른 횟수가 늘어나는지 확인해 보세요. 이어서 opacity:0을 선택하고 같은 자리를 눌러 봅니다. 버튼 밖에 있는 횟수와 초점 표시를 보면 투명한 상태에서도 일어난 동작을 읽을 수 있습니다. 키보드를 쓸 수 있다면 Tab으로 초점을 옮기며 결과를 함께 살펴보세요.
이 활동은 다른 요소에 가려지지 않은 일반 버튼에 설정을 하나씩 적용합니다. 복잡한 페이지에서는 부모 요소의 상태와 다른 요소의 겹침도 결과에 영향을 줄 수 있습니다. 여섯 상태를 비교하면서 화면 표시, 차지하는 공간, 포인터 입력, 키보드 초점을 각각 확인해 보세요.