CSS pause-before 속성 – 요소 음성 출력 전 일시정지 시간 설정하기

CSS pause-before 속성이란?

pause-before 속성은 요소의 내용을 음성으로 읽기 전에 삽입할 일시정지(휴지) 시간을 지정하는 속성입니다. 주로 스크린 리더나 음성 브라우저처럼 웹 콘텐츠를 소리로 출력하는 환경에서 문장 사이의 호흡이나 강조 효과를 조절할 때 사용됩니다.

사용 가능한 값

• time − 초(s) 또는 밀리초(ms)와 같은 절대 시간 단위로 휴지 시간을 직접 표현합니다. 예를 들어 pause-before: 500ms;처럼 지정할 수 있습니다.
• percentage − speech-rate 속성 값의 역수를 기준으로 휴지 길이를 상대적으로 지정합니다.

백분율 값의 이해

백분율 값은 현재 설정된 발화 속도(speech-rate)에 따라 실제 휴지 시간이 달라집니다. 예를 들어 speech-rate가 분당 120단어라면 한 단어를 읽는 데 약 0.5초(500ms)가 걸립니다. 이 경우 pause-before: 100%는 500ms의 휴지를 의미하고, pause-before: 20%는 100ms의 휴지를 의미합니다.

사용 예제

/* 절대 시간 단위 사용 */
h1 {
  pause-before: 1s;
}

/* 백분율 사용 */
p {
  pause-before: 50%;
}

이처럼 pause-before 속성을 활용하면 음성 출력 시 요소 앞에 적절한 여유를 두어 청자가 내용을 더 명확하게 인식하도록 도울 수 있습니다.