CSS volume 속성이란?
CSS의 volume 속성은 음성(speech) 기반 출력 환경, 즉 스크린 리더나 텍스트 음성 변환(TTS) 브라우저에서 재생되는 목소리의 중간 크기(median volume)를 지정하는 속성입니다. 일반적인 화면 출력에는 영향을 주지 않으며, 청각 중심의 접근성 환경에서 유용하게 활용됩니다.
volume 속성에 사용할 수 있는 값
- 숫자(number) —
0부터100사이의 임의의 숫자를 지정합니다.0은 들을 수 있는 최소 음량 수준을,100은 편안하게 들을 수 있는 최대 음량 수준을 의미합니다. - 백분율(percentage) — 부모 요소로부터 상속받은 값을 기준으로 계산되며, 그 결과는 다시
0에서100범위로 잘려(clipped) 적용됩니다. - silent — 소리를 전혀 내지 않습니다. 주의할 점은
0값과silent가 동일한 의미가 아니라는 것입니다.0은 '최소로 들리는 수준'일 뿐 완전한 무음이 아닙니다. - x-soft —
0과 동일한 음량입니다. - soft —
25와 동일한 음량입니다. - medium —
50과 동일하며, 기본값에 해당하는 보통 음량입니다. - loud —
75와 동일한 음량입니다. - x-loud —
100과 동일한 최대 음량입니다.
예제 코드
다음은 특정 문단의 음량을 아주 작게(x-soft) 설정하는 예제입니다.
<style>
<!--
P.goat {
volume: x-soft;
}
-->
</style>
위 코드에서는 클래스명이 goat인 <p> 요소에 x-soft(즉, 음량 0 수준)를 적용하여 해당 문단이 음성으로 읽힐 때 거의 들리지 않도록 설정합니다.
참고 사항
volume 속성은 CSS 2.1의 음성 미디어(aural/speech media) 규격에 포함된 속성으로, 현재 대부분의 일반 웹 브라우저에서는 지원되지 않습니다. 주로 접근성(a11y) 향상을 위한 음성 인터페이스나 전용 스크린 리더 환경에서 고려되며, 실무에서는 CSS Speech 모듈이나 ARIA 관련 기술과 함께 검토하는 것이 좋습니다.