From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/word-spacing/index.html | 127 +++++++++++++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 files/ko/web/css/word-spacing/index.html (limited to 'files/ko/web/css/word-spacing/index.html') diff --git a/files/ko/web/css/word-spacing/index.html b/files/ko/web/css/word-spacing/index.html new file mode 100644 index 0000000000..f81c96a0b9 --- /dev/null +++ b/files/ko/web/css/word-spacing/index.html @@ -0,0 +1,127 @@ +--- +title: word-spacing +slug: Web/CSS/word-spacing +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/word-spacing +--- +
{{CSSRef}}
+ +

CSS word-spacing 속성은 단어와 단어 사이, 태그와 태그 사이의 거리를 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/word-spacing.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+word-spacing: normal;
+
+/* <length> 값 */
+word-spacing: 3px;
+word-spacing: 0.3em;
+
+/* <percentage> 값 */
+word-spacing: 50%;
+word-spacing: 200%;
+
+/* 전역 값 */
+word-spacing: inherit;
+word-spacing: initial;
+word-spacing: unset;
+
+ +

값

+ +
+
normal
+
현재 글씨체와 브라우저가 결정한 일반적인 단어 간격을 사용합니다.
+
{{cssxref("length")}}
+
지정한 길이를 기본 단어 간격에 더합니다.
+
{{cssxref("percentage")}}
+
영향 받는 문자 최대 폭의 백분율만큼을 기본 단어 간격에 더합니다.
+
+ +

예제

+ +

HTML

+ +
<div id="mozdiv1">다양한 단어...</div>
+<div id="mozdiv2">...더 많은 단어</div>
+ +

CSS

+ +
#mozdiv1 {
+  word-spacing: 15px;
+}
+
+#mozdiv2 {
+  word-spacing: 5em;
+}
+ +

{{ EmbedLiveSample('예제') }}

+ +

접근성 고려사항

+ +

큰 절댓값의 word-spacing을 적용한 문장은 거의 읽기 힘들어집니다. 큰 양의 값을 적용하면 단어의 사이가 너무나도 멀어져서 문장처럼 보이지 않습니다. 반면 지나친 음의 값을 적용하면 단어끼리 서로 겹쳐서 어느 단어의 시작과 끝을 알아차리지 못하게 됩니다.

+ +

글씨체마다 문자 너비가 다르므로, 가독성을 확보하는 수준의 word-spacing 역시 상황에 맞춰 결정해야 합니다. 모든 글씨체에서 가독성을 유지하는 단 하나의 값은 존재하지 않습니다.

+ + + +

형식 정의

+ +

{{CSSInfo}}

+ +

형식 구문

+ +
{{CSSSyntax}}
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}{{Spec2('CSS3 Text')}}Replaces the previous values with a <spacing-limit> value that defines the same thing, plus the <percentage> value. Allows up to three values describing the optimum, minimum, and maximum value.
{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}{{Spec2('CSS1')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.word-spacing")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf