diff options
Diffstat (limited to 'files/ko/web/css/hyphens')
| -rw-r--r-- | files/ko/web/css/hyphens/index.html | 159 |
1 files changed, 159 insertions, 0 deletions
diff --git a/files/ko/web/css/hyphens/index.html b/files/ko/web/css/hyphens/index.html new file mode 100644 index 0000000000..82f963023f --- /dev/null +++ b/files/ko/web/css/hyphens/index.html @@ -0,0 +1,159 @@ +--- +title: hyphens +slug: Web/CSS/hyphens +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/hyphens +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>hyphens</code></strong> 속성은 여러 줄에 걸치는 텍스트에서 단어에 붙임표를 추가하는 방식을 설정합니다.</span> 붙임표를 아예 방지할 수도 있고, 수동으로 지정한 곳에서만 발생하도록 나타낼 수도 있으며, 브라우저가 자동으로 적절한 곳에 붙임표를 삽입하도록 허용할 수도 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>붙임표 규칙은 언어별로 다릅니다. HTML의 언어는 <code><a href="/ko/docs/Web/HTML/Global_attributes/lang">lang</a></code> 특성으로 알아낼 수 있으며, 브라우저는 lang 특성과 해당 언어에 적합한 붙임표 규칙이 모두 사용 가능할 때에만 붙임표를 추가합니다. XML에서는 <code><a href="/ko/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code> 특성을 사용해야 합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 명세는 붙임표 규칙을 명시하지 않고 있으므로 동작 방식이 브라우저마다 다를 수 있습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */ +hyphens: none; +hyphens: manual; +hyphens: auto; + +/* 전역 값 */ +hyphens: inherit; +hyphens: initial; +hyphens: unset; +</pre> + +<p><code>hyphens</code> 속성은 아래 목록 중 하나의 키워드를 사용해 지정할 수 있습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code>none</code></dt> + <dd>단어 내의 문자가 줄 바꿈 위치를 나타내더라도 단어를 내에서 줄을 바꾸지 않습니다. 줄 바꿈은 공백 문자에서만 발생합니다.</dd> + <dt><code>manual</code></dt> + <dd>단어 내의 줄 바꿈 위치를 나타내는 문자에서는 줄을 바꿀 수 있습니다. 아래의 {{anch("줄 바꿈 위치 제안")}}에서 자세한 정보를 알아보세요.</dd> + <dt><code>auto</code></dt> + <dd>브라우저가 단어 내의 적합한 붙임표 위치를 자유롭게 골라서 줄을 바꿀 수 있습니다. 단, 줄 바꿈 위치를 제안(아래의 {{anch("줄 바꿈 위치 제안")}} 을 보세요)한 경우에는 해당 위치를 사용합니다.</dd> +</dl> + +<div class="note"> +<p><strong>참고:</strong> 적합한 붙임표 규칙을 선택할 수 있도록 언어를 제대로 명시해야 <code>auto</code> 값의 동작도 정확해집니다. HTML <code>lang</code> 특성을 사용해 해당 언어의 붙임표 규칙을 사용할 것을 확실하게 지정하세요.</p> +</div> + +<h2 id="줄_바꿈_위치_제안">줄 바꿈 위치 제안</h2> + +<p>아래의 두 가지 Unicode 문자를 사용해서 수동으로 줄 바꿈 위치를 제안할 수 있습니다.</p> + +<dl> + <dt>U+2010 (HYPHEN)</dt> + <dd>붙임표, "하드" 하이픈 문자는 눈에 보이는 줄 바꿈 위치를 나타냅니다. 실제로 줄이 바뀌지는 않더라도 붙임표를 볼 수 있습니다.</dd> + <dt>U+00AD (SHY)</dt> + <dd>투명한 "소프트" 하이픈("<strong>s</strong>oft" <strong>hy</strong>phen)입니다. 눈에 보이지 않으며, 브라우저가 붙임표를 사용해 단어를 끊을 위치로 선택합니다. HTML에서는 <code>&shy;</code>를 사용해 입력하세요.</dd> +</dl> + +<div class="blockIndicator note"> +<p>HTML {{htmlelement("wbr")}} 요소로 인한 줄 바꿈으로는 붙임표가 추가되지 않습니다.</p> +</div> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="붙임표_줄_바꿈_지정하기">붙임표 줄 바꿈 지정하기</h3> + +<p>다음 예제는 <code>hyphens</code> 속성에 사용할 수 있는 세 개 값을 시연합니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><dl> + <dt><code>none</code>: no hyphen; overflow if needed</dt> + <dd lang="en" class="none">An extreme&shy;ly long English word</dd> + <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt> + <dd lang="en" class="manual">An extreme&shy;ly long English word</dd> + <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt> + <dd lang="en" class="auto">An extreme&shy;ly long English word</dd> +</dl> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">dd { + width: 55px; + border: 1px solid black; + } +dd.none { + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} +dd.manual { + -webkit-hyphens: manual; + -ms-hyphens: manual; + hyphens: manual; +} +dd.auto { + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +} +</pre> + +<h4 id="결과">결과</h4> + +<figure> +<p>{{EmbedLiveSample("붙임표_줄_바꿈_지정하기", "100%", 490)}}</p> +</figure> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}</td> + <td>{{Spec2("CSS3 Text")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.properties.hyphens")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{Cssxref("content")}}</li> + <li>{{cssxref("overflow-wrap")}} (이전 이름 <code>word-wrap</code>)</li> + <li>{{cssxref("word-break")}}</li> +</ul> |