코딩스쿨

▶ CSS References

CSS Reference Aural

CSS Aural (음성) : 음성 스타일을 위한 CSS 속성

CSS Aural 스타일은 문서나 웹 페이지가 스크린 리더와 같은 장치를 통해 음성으로 읽힐 때 적용되는 스타일을 정의합니다. 이 스타일은 주로 시각 장애인을 위한 웹 접근성 향상을 목표로 하며, 스크린 리더가 웹 콘텐츠를 읽을 때 더 자연스럽고 쉽게 이해할 수 있도록 돕습니다.

CSS2에서 도입된 Aural 스타일 속성은 음성 합성 시스템(텍스트를 음성으로 변환하는 시스템)과 관련된 요소를 제어하는 데 사용되지만, 현재는 잘 사용되지 않습니다. 대신 ARIA(Accessible Rich Internet Applications)와 같은 접근성 표준이 대체되었으나, Aural CSS 속성에 대해 알아두는 것이 중요할 수 있습니다.

이 가이드는 CSS Aural 스타일 속성의 기본적인 개념과 사용법을 설명합니다.

1. `azimuth`: 소리의 방향

azimuth 속성은 가상 사운드의 방향을 지정합니다. 이 속성은 주로 입체적인 사운드를 제공하기 위해 사용되며, 소리가 왼쪽, 오른쪽, 중앙에서 나오는 위치를 설정할 수 있습니다.

구문:

azimuth: angle | left-side | far-left | left | center-left | center | center-right | right | far-right | right-side | behind;

예시:

p {
    azimuth: left;  /* 왼쪽에서 소리가 들림 */
}

h1 {
    azimuth: 90deg;  /* 소리의 각도 설정 (오른쪽에서 들림) */
}

2. `elevation`: 소리의 고도

elevation 속성은 소리의 높낮이를 정의합니다. 이 속성은 음성 소리가 어느 방향(위, 아래)에서 들려야 하는지를 설정할 수 있습니다.

구문:
```
elevation: angle | below | level | above | higher | lower;
```
- angle: 소리의 높이 각도 (예: 30deg).
- below, level, above: 각각 소리가 아래, 수평, 위에서 들리는 것을 의미합니다.

예시:

blockquote {
    elevation: above;  /* 소리가 위에서 들림 */
}

.quote {
    elevation: 45deg;  /* 특정 각도에서 소리가 들림 */
}

3. `volume`: 음량 조절

volume 속성은 음성 출력의 볼륨(음량)을 설정합니다.

구문:
```
volume: number | silent | x-soft | soft | medium | loud | x-loud;
```
- number: 0.0에서 1.0 사이의 숫자로 음량을 설정합니다.
- silent, x-soft, soft, medium, loud, x-loud: 볼륨의 단계별 설정을 의미합니다.

예시:

p {
    volume: 0.5;  /* 중간 볼륨 */
}

h1 {
    volume: loud;  /* 소리 크기를 높게 설정 */
}

4. `speech-rate`: 말하는 속도

speech-rate 속성은 음성 합성기의 말하는 속도를 제어합니다.

구문:
```
speech-rate: number | x-slow | slow | medium | fast | x-fast | faster | slower;
```
- number: 말하는 속도를 50에서 200 사이의 값으로 설정합니다.
- x-slow, slow, medium, fast, x-fast: 각 단계에 맞춰 속도를 설정합니다.
- faster, slower: 상대적인 속도 변경.

예시:

p {
    speech-rate: fast;  /* 빠른 속도로 말함 */
}

h2 {
    speech-rate: 120;  /* 말하는 속도를 120으로 설정 */
}

5. `pitch`와 `pitch-range`: 음성의 높낮이 조절

5.1 `pitch`: 음성의 기본 톤

pitch 속성은 음성의 기본 톤(음의 높낮이)을 설정합니다.

구문:
```
pitch: frequency | x-low | low | medium | high | x-high;
```
- frequency: 음의 주파수를 Hz로 설정 (예: 100Hz).
- x-low, low, medium, high, x-high: 기본 톤 단계.

예시:

h1 {
    pitch: high;  /* 높은 톤의 음성 */
}

p {
    pitch: 200Hz;  /* 200Hz의 톤 */
}

5.2 `pitch-range`: 음성의 변동 범위

pitch-range 속성은 음성의 변동할 수 있는 톤 범위를 설정합니다.

구문:
```
pitch-range: number;
```
- number: 음의 범위를 설정하는 값 (0~100).

예시:

p {
    pitch-range: 50;  /* 기본 톤에서 약간의 변화 범위를 허용 */
}

6. `stress`: 음성의 강세

stress 속성은 음성 합성 시스템이 말하는 단어의 강세를 조절합니다.

구문:
```
stress: number;
```
- number: 0(강세 없음)에서 100(가장 강한 강세) 사이의 값.

예시:

p {
    stress: 80;  /* 강한 강세로 말함 */
}

7. `richness`: 음성의 품질

richness 속성은 음성의 품질을 제어하며, 음성이 얼마나 "풍부한"지(세밀한 뉘앙스)를 설정할 수 있습니다.

구문:
```
richness: number;
```
- number: 0에서 100 사이의 값으로 품질을 설정합니다. 0은 단조롭고, 100은 매우 풍부한 소리를 나타냅니다.

예시:

blockquote {
    richness: 70;  /* 풍부한 음성 */
}

8. `pause-before`와 `pause-after`: 음성의 일시 중지

이 속성은 음성 출력 전후에 일시 중지 시간을 설정합니다.

8.1 `pause-before`

음성을 시작하기 전에 일시 중지 시간을 설정합니다.

구문:
```
pause-before: time | percentage;
```
- time: 시간 값 (예: 2s, 500ms).
- percentage: 일시 중지 시간을 백분율로 설정.

예시:

h1 {
    pause-before: 1s;  /* 1초 동안 일시 중지 후 시작 */
}

8.2 `pause-after`

음성을 끝낸 후 일시 중지 시간을 설정합니다.

구문:
```
pause-after: time | percentage;
```
- time: 시간 값.
- percentage: 백분율 값.

예시:

h2 {
    pause-after: 500ms;  /* 음성을 끝낸 후 500밀리초 일시 중지 */
}

9. `cue-before`와 `cue-after`: 음성 신호

이 속성은 음성 출력 전후에 소리 신호를 추가할 수 있습니다. cue-before는 음성 시작 전에, cue-after는 음성 종료 후 소리 신호를 넣습니다.

9.1 `cue-before`

구문:
```
cue-before: url(soundfile);
```

예시:

h1 {
    cue-before: url('start-sound.wav');  /* 음성 시작 전 신호음 재생 */
}

9.2 `cue-after`

구문:
```
cue-after: url(soundfile);
```

예시:

h2 {
    cue-after: url('end-sound.wav');  /* 음성 종료 후 신호음 재생 */
}

10. `voice-family`: 음성 종류 설정

voice-family 속성은 음성 합성기에서 사용할 목소리의 종류를 지정합니다. 여러 목소리 중 선택하거나, 특정 음성을 요청할 수 있습니다.

구문:
```
voice-family: specific-voice [, generic-voice];
```
- specific-voice: 특정 목소리 이름.
- generic-voice: 기본 목소리 유형 (male, female, child).
예시:
```
p {
    voice-family: "Alex", male;
}
```

요약

CSS Aural 스타일 속성은 텍스트가 음성으로 출력될 때 이를 제어하는 데 사용됩니다. 현재는 접근성 기술에서 주로 사용되며, azimuth, elevation, volume, pitch, speech-rate와 같은 속성을 통해 음성 출력의 방향, 속도, 강도 등을 제어할 수 있습니다. 이러한 속성들은 스크린 리더와 같은 음성 합성 장치를 사용하는 사용자에게 더 나은 경험을 제공하는 데 도움을 줄 수 있습니다.

코딩 스쿨 CSS

CSS Reference Aural

CSS Aural (음성) : 음성 스타일을 위한 CSS 속성

1. azimuth: 소리의 방향

2. elevation: 소리의 고도

3. volume: 음량 조절

4. speech-rate: 말하는 속도

5. pitch와 pitch-range: 음성의 높낮이 조절

5.1 pitch: 음성의 기본 톤

5.2 pitch-range: 음성의 변동 범위

6. stress: 음성의 강세

7. richness: 음성의 품질

8. pause-before와 pause-after: 음성의 일시 중지

8.1 pause-before

8.2 pause-after

9. cue-before와 cue-after: 음성 신호

9.1 cue-before

9.2 cue-after

10. voice-family: 음성 종류 설정

요약