CSS의 elevation(고도) 속성은 소리가 청취자를 기준으로 수직 방향의 어느 위치에서 들려오는지를 설정하는 속성입니다. 이 속성은 주로 화면 낭독기나 음성 브라우저처럼 오디오 중심으로 동작하는 환경에서 활용되며, CSS Aural(Speech) 스타일 모듈에 속합니다.
elevation 속성에 사용할 수 있는 값
- angle(각도) − 고도를 각도 값으로 직접 지정합니다. 지정 가능한 범위는 -90deg부터 90deg까지입니다. 0deg는 전방 수평선, 즉 청취자와 같은 높이를 의미하며, 90deg는 머리 바로 위, -90deg는 바로 아래쪽을 나타냅니다.
- below − '-90deg'와 동일한 효과를 냅니다.
- level − '0deg'와 동일하며, 청취자와 같은 높이를 의미합니다.
- above − '90deg'와 동일하며, 머리 위쪽에서 소리가 들려옵니다.
- higher − 현재 설정된 고도에 10도를 더합니다.
- lower − 현재 설정된 고도에서 10도를 뺍니다.
elevation 속성 사용 예제
아래 코드를 실행하면 CSS elevation 속성이 실제로 어떻게 적용되는지 확인할 수 있습니다.
<style>
<!--
h1 { elevation: above }
tr.a { elevation: 60deg }
tr.b { elevation: 30deg }
tr.c { elevation: level }
-->
</style>
참고로 elevation 속성은 최신 웹 브라우저에서 널리 지원되지 않으므로, 실무에서는 주로 접근성 향상을 위한 보조적인 용도로 이해하는 것이 좋습니다.