CSS nav-up 속성이란?
nav-up 속성은 키보드의 위쪽 방향 화살표(↑) 버튼을 눌렀을 때 포커스가 이동할 요소를 지정하는 CSS 탐색(navigation) 속성입니다. 이 속성은 주로 TV 리모컨이나 게임 컨트롤러처럼 방향키 기반으로 웹 페이지를 조작하는 환경에서 유용하게 사용됩니다.
아래 예제 코드를 실행하면 nav-up 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
nav-up 속성 사용 예제
다음 코드에서는 네 개의 버튼을 배치하고, 각 버튼에 nav-up, nav-down, 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>코드 설명
위 예제의 핵심 동작 방식은 다음과 같습니다.
1. 절대 위치 배치: 모든 버튼에 position: absolute;를 적용하고 top, left 값으로 화면상의 위치를 지정합니다.
2. 탐색 순서 정의: nav-index 속성으로 각 버튼의 논리적 탐색 순서를 부여합니다.
3. 방향별 이동 대상 지정: 예를 들어 btn1에 포커스가 있을 때 위쪽 화살표를 누르면 nav-up: #btn4;에 따라 btn4로 포커스가 이동합니다. 마찬가지로 아래쪽(nav-down), 왼쪽(nav-left), 오른쪽(nav-right) 방향키에도 각각 이동할 대상 요소가 지정되어 있습니다.
참고 사항
nav-up 속성은 CSS3 UI 모듈에 정의된 속성으로, 값으로는 특정 요소의 ID 선택자(#id), auto(기본값, 브라우저가 자동 결정), 또는 root(문서 루트로 이동)를 사용할 수 있습니다. 다만 현재 대부분의 주요 브라우저에서 이 속성을 지원하지 않으므로, 실무에서는 JavaScript를 활용한 키보드 이벤트 처리로 대체하는 경우가 많습니다.