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/letter-spacing/index.html | 135 +++++++++++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 files/ko/web/css/letter-spacing/index.html (limited to 'files/ko/web/css/letter-spacing/index.html') diff --git a/files/ko/web/css/letter-spacing/index.html b/files/ko/web/css/letter-spacing/index.html new file mode 100644 index 0000000000..4f7acc93f5 --- /dev/null +++ b/files/ko/web/css/letter-spacing/index.html @@ -0,0 +1,135 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - 글자 간격 +translation_of: Web/CSS/letter-spacing +--- +
{{CSSRef}}
+ +

letter-spacing CSS 속성은 글자 사이의 간격을 조절합니다.

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

구문

+ +
/* 키워드 값 */
+letter-spacing: normal;
+
+/* <length> 값 */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* 전역 값 */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+
+ +

값

+ +
+
normal
+
현재 글꼴의 기본 간격. 0과 달리, auto는 {{glossary("user agent", "사용자 에이전트")}}가 양쪽 정렬을 위해 간격을 임의로 조절할 수 있습니다.
+
{{cssxref("<length>")}}
+
기본 간격에 추가할 글자간 간격. 음수 값을 지정할 수 있지만 구현에 따라 한계가 있을 수 있습니다. 사용자 에이전트가 간격을 줄이거나 늘리지 않습니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<p class="normal">글자 간격</p>
+<p class="em-wide">글자 간격</p>
+<p class="em-wider">글자 간격</p>
+<p class="em-tight">글자 간격</p>
+<p class="px-wide">글자 간격</p>
+
+ +

CSS

+ +
.normal   { letter-spacing: normal; }
+.em-wide  { letter-spacing: 0.4em; }
+.em-wider { letter-spacing: 1em; }
+.em-tight { letter-spacing: -0.05em; }
+.px-wide  { letter-spacing: 6px; }
+
+ +

결과

+ +

{{ EmbedLiveSample('예제', 440, 185) }}

+ +

접근성 고려사항

+ +

letter-spacing 값의 절댓값이 너무 크면 스타일을 적용한 글을 읽기 힘들어집니다. 지나치게 큰 값으로는 글자 간격이 지나치게 넓어져 단어를 이루지 못하고 따로 따로 보입니다. 반대로 지나친 음숫값은 글자가 서로 겹쳐 알아볼 수 없습니다.

+ +

글꼴마다 문자의 너비가 다르므로 읽기에 용이한 간격은 상황에 따라 다릅니다. 모든 글꼴에 적합한 하나의 값은 존재하지 않습니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}{{Spec2('CSS3 Text')}}No change.
{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}{{Spec2('CSS3 Transitions')}}Defines letter-spacing as animatable.
{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}{{Spec2('SVG1.1')}}Initial SVG definition.
{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}{{Spec2('CSS1')}}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

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

+ +

같이 보기

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