CSS rest-before 속성 – 음성 미디어에서 요소 앞 휴식 시간 설정하기

CSS의 rest-before 속성은 음성(speech) 미디어에서 특정 요소가 음성으로 출력되기 전에 일시 정지(휴식) 시간을 지정하는 데 사용되는 속성입니다.

이 속성은 스크린 리더나 TTS(Text-To-Speech, 텍스트 음성 변환) 환경에서 콘텐츠를 더 자연스럽고 명확하게 전달하는 데 매우 유용합니다. 예를 들어, 중요한 제목이나 문단 사이에 적절한 간격을 두면 청취자가 내용을 인지하고 이해할 시간을 확보할 수 있습니다.

rest-before 속성 사용 예시

다음은 h1 요소 앞에 15밀리초(ms)의 휴식 시간을 설정하는 예제입니다.

h1 {
    rest-before: 15ms;
}

시간 값의 의미

속성에 지정된 시간 값은 해당 요소가 음성으로 출력되기 전에 멈추는 길이를 의미하며, 기본 단위는 밀리초(ms)입니다. 위 예제에서는 h1 제목이 읽히기 직전에 15ms 동안 잠시 멈추게 됩니다.

참고로 짝을 이루는 속성인 rest-after는 요소가 출력된 후의 휴식 시간을 설정하며, 두 속성을 함께 활용하면 음성 콘텐츠의 흐름을 더욱 세밀하게 조절할 수 있습니다.