CSS의 rest 속성은 rest-before와 rest-after 속성을 한 번에 지정할 수 있는 단축 속성(shorthand)입니다. 이 속성을 활용하면 화면 낭독기(screen reader)나 음성 합성 기술이 요소를 읽어줄 때, 해당 요소의 앞 또는 뒤에 일시 정지(pause)를 설정할 수 있습니다.
문법(Syntax)
rest 속성의 기본 문법은 다음과 같습니다.
rest: rest-before rest-after
각 값의 의미는 아래와 같습니다.
- rest-before: 요소를 읽기 전에 일정 시간 동안 일시 정지를 설정합니다.
- rest-after: 요소를 읽은 후에 일정 시간 동안 일시 정지를 설정합니다.
사용 예제
다음은 rest 음성 미디어 속성을 활용한 예제입니다.
h1 {
rest: 15ms 20ms;
}위 예제에서는 h1 요소가 음성으로 낭독되기 전에 15밀리초(ms), 낭독된 후에 20밀리초(ms)의 일시 정지가 적용됩니다. 이처럼 rest 속성을 사용하면 개별적으로 rest-before와 rest-after를 선언하지 않고도 한 줄로 간결하게 작성할 수 있어 코드의 가독성과 유지보수성이 향상됩니다.