CSS pause 속성 완벽 정리: 음성 출력 시 일시 중지 시간 설정하기

pause 속성이란?

CSS의 pause 속성은 pause-before와 pause-after를 한 번에 지정할 수 있는 단축 속성(shorthand)입니다. 이 속성은 주로 음성 합성(TTS)이나 스크린 리더처럼 텍스트를 소리로 읽어주는 환경에서, 특정 요소 앞과 뒤에 삽입될 일시 중지(pause) 시간을 조절하는 데 사용됩니다.

값의 지정 규칙은 다음과 같습니다.

• 값 1개를 지정하면 요소 앞뒤 모두 동일한 시간만큼 일시 중지됩니다.
• 값 2개를 지정하면 첫 번째 값은 pause-before(요소 앞), 두 번째 값은 pause-after(요소 뒤)에 각각 적용됩니다.

사용 가능한 값

• 시간 단위: ms(밀리초), s(초) 등 절대적인 시간 값
• 백분율(%): 발화 속도(speech rate)에 따라 상대적으로 계산되는 값

작성 예시

다음은 CSS에서 pause 속성을 활용한 예제입니다.

<style>
  <!--
    /* pause-before: 20ms; pause-after: 20ms */
    h1 { pause : 20ms }

    /* pause-before: 30ms; pause-after: 40ms */
    h2 { pause : 30ms 40ms }

    /* pause-before: ?; pause-after: 10ms */
    h3 { pause-after : 10ms }
  -->
</style>

예제 코드 해설

• h1 { pause: 20ms }: h1 요소의 앞과 뒤에 각각 20ms씩 일시 중지가 삽입됩니다.
• h2 { pause: 30ms 40ms }: h2 요소의 앞에는 30ms, 뒤에는 40ms가 각각 적용됩니다.
• h3 { pause-after: 10ms }: 개별 속성인 pause-after를 사용해 h3 요소의 뒤에만 10ms 일시 중지를 지정합니다.

이처럼 pause 속성을 활용하면 문단 사이의 호흡이나 제목 강조 등, 듣는 사람이 내용을 더 자연스럽게 이해할 수 있도록 음성 출력의 리듬을 세밀하게 조정할 수 있습니다.