CSS cue 속성 완벽 정리: cue-before와 cue-after를 한 번에 설정하기

CSS cue 속성이란?

CSS의 cue 속성은 cue-before와 cue-after 속성을 한 번에 설정할 수 있는 단축 속성(shorthand)입니다. 이 속성들은 주로 음성 브라우저나 스크린 리더가 문서를 읽어 줄 때, 특정 요소 앞뒤에 청각적 신호(소리)를 재생하도록 지정하는 데 사용됩니다.

값을 지정하는 방식은 다음과 같습니다.

• 두 개의 값을 지정하면, 첫 번째 값은 cue-before에 적용되고 두 번째 값은 cue-after에 적용됩니다.
• 하나의 값만 지정하면, 해당 값이 두 속성 모두에 동일하게 적용됩니다.

예제

예를 들어, 아래의 두 규칙은 서로 완전히 동일한 결과를 냅니다.

<style>
    <!--
        h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
        h1 {cue: url("pop.au") }
    -->
</style>

위 예제에서 볼 수 있듯이, cue-before와 cue-after에 같은 소리 파일을 적용할 경우 두 번째 규칙처럼 cue 속성 하나만 사용하면 코드를 훨씬 간결하게 작성할 수 있습니다.