CSS의 nav-down 속성은 키패드나 리모컨의 아래쪽 방향키를 눌렀을 때 포커스가 이동할 대상 요소를 지정하는 탐색(navigation) 속성입니다. 일반적인 마우스 환경보다는 TV 인터페이스, 셋톱박스, 게임 콘솔처럼 방향키 중심으로 조작하는 환경에서 특히 유용합니다.
아래 예제 코드를 실행하면 화면에 네 개의 버튼이 배치되며, 각 버튼에는 nav-down을 비롯해 nav-up, nav-left, nav-right 속성이 설정되어 있습니다. 덕분에 방향키만으로 버튼 사이를 자유롭게 이동하며 포커스를 옮길 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
button {
position: absolute;
}
button#btn1 {
top: 10%;
left: 15%;
nav-index: 1;
nav-right: #btn2;
nav-left: #btn4;
nav-down: #btn2;
nav-up: #btn4;
}
button#btn2 {
top: 30%;
left: 30%;
nav-index: 2;
nav-right: #btn3;
nav-left: #btn1;
nav-down: #btn3;
nav-up: #btn1;
}
button#btn3 {
top: 50%;
left: 15%;
nav-index: 3;
nav-right: #btn4;
nav-left: #btn2;
nav-down: #btn4;
nav-up: #btn2;
}
button#btn4 {
top: 30%;
left: 0%;
nav-index: 4;
nav-right: #btn1;
nav-left: #btn3;
nav-down: #btn1;
nav-up: #btn3;
}
</style>
</head>
<body>
<button id = "btn1">Result1</button>
<button id = "btn2">Result2</button>
<button id = "btn3">Result3</button>
<button id = "btn4">Result4</button>
</body>
</html>핵심 포인트 정리
- nav-down: 아래쪽 방향키를 눌렀을 때 포커스가 이동할 대상을 지정합니다.
- nav-up / nav-left / nav-right: 위쪽, 왼쪽, 오른쪽 방향키에 대한 이동 대상을 각각 지정합니다.
- nav-index: 순차적 탐색 시의 순서를 결정합니다.
- 속성 값으로는 이동할 요소의 ID 선택자(예:
#btn2)를 사용합니다.
브라우저 호환성 참고 사항
nav-down 속성은 CSS3 Basic User Interface 모듈에 포함된 사양이지만, 현재 대부분의 주요 웹 브라우저에서는 지원되지 않습니다. 따라서 실제 프로젝트에 적용하기 전에 반드시 대상 환경에서의 동작 여부를 확인해야 하며, 특수 디바이스나 실험적인 목적으로 활용하는 것이 좋습니다.