diff options
Diffstat (limited to 'files/ko/web/css/white-space')
| -rw-r--r-- | files/ko/web/css/white-space/index.html | 242 |
1 files changed, 242 insertions, 0 deletions
diff --git a/files/ko/web/css/white-space/index.html b/files/ko/web/css/white-space/index.html new file mode 100644 index 0000000000..21edd07317 --- /dev/null +++ b/files/ko/web/css/white-space/index.html @@ -0,0 +1,242 @@ +--- +title: white-space +slug: Web/CSS/white-space +tags: + - CSS + - CSS Property + - CSS Text + - Reference +translation_of: Web/CSS/white-space +--- +<div>{{CSSRef}}</div> + +<p>CSS <strong><code>white-space</code></strong> 속성은 요소가 공백 문자를 처리하는 법을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div> + + + +<div class="note"> +<p><strong>참고:</strong> 단어 안에서 줄이 바뀌기를 원하는 경우 {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}를 사용하세요.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush: css">/* Keyword values */ +white-space: normal; +white-space: nowrap; +white-space: pre; +white-space: pre-wrap; +white-space: pre-line; +white-space: break-spaces; + +/* Global values */ +white-space: inherit; +white-space: initial; +white-space: unset; +</pre> + +<p><code>white-space</code> 속성은 다음 목록의 키워드 값 중 하나를 사용해 설정합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리합니다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.</dd> + <dt><code>nowrap</code></dt> + <dd>연속 공백을 하나로 합침. 줄 바꿈은 {{htmlelement("br")}} 요소에서만 일어납니다.</dd> + <dt><code>pre</code></dt> + <dd>연속 공백 유지. 줄 바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서만 일어납니다.</dd> + <dt><code>pre-wrap</code></dt> + <dd>연속 공백 유지. 줄 바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.</dd> + <dt><code>pre-line</code></dt> + <dd>연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.</dd> + <dt><code>break-spaces</code></dt> + <dd>다음 차이점을 제외하면 <code>pre-wrap</code>과 동일합니다. + <ul> + <li>연속 공백이 줄의 끝에 위치하더라도 공간을 차지합니다.</li> + <li>연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있습니다.</li> + <li>유지한 연속 공백은 <code>pre-wrap</code>과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기(<code>min-content</code>, <code>max-content</code>)에 영향을 줍니다.</li> + </ul> + </dd> +</dl> + +<p>다음은 여러가지 <code>white-space</code> 값의 동작을 정리한 표입니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th></th> + <th>개행 문자</th> + <th>스페이스, 탭</th> + <th>자동 줄 바꿈</th> + <th>줄 끝의 공백</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>normal</code></th> + <td>병합</td> + <td>병합</td> + <td>예</td> + <td>제거</td> + </tr> + <tr> + <th><code>nowrap</code></th> + <td>병합</td> + <td>병합</td> + <td>아니오</td> + <td>제거</td> + </tr> + <tr> + <th><code>pre</code></th> + <td>유지</td> + <td>유지</td> + <td>아니오</td> + <td>유지</td> + </tr> + <tr> + <th><code>pre-wrap</code></th> + <td>유지</td> + <td>유지</td> + <td>예</td> + <td>넘침</td> + </tr> + <tr> + <th><code>pre-line</code></th> + <td>유지</td> + <td>병합</td> + <td>예</td> + <td>제거</td> + </tr> + <tr> + <th><code>break-spaces</code></th> + <td>유지</td> + <td>유지</td> + <td>예</td> + <td>줄 바꿈</td> + </tr> + </tbody> +</table> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<pre class="brush: css">code { + white-space: pre; +}</pre> + +<h3 id="HTMLElementpre_요소_내부의_줄_바꿈">{{HTMLElement("pre")}} 요소 내부의 줄 바꿈</h3> + +<pre class="brush: css">pre { + word-wrap: break-word; /* IE 5.5-7 */ + white-space: pre-wrap; /* current browsers */ +}</pre> + +<h2 id="실제로_보기">실제로 보기</h2> + +<div class="hidden" id="See_it_in_action_LiveSample"> +<pre class="brush: html"><div id="css-code" class="box"> + p { white-space: + <select> + <option>normal</option> + <option>nowrap</option> + <option>pre</option> + <option>pre-wrap</option> + <option>pre-line</option> + <option>break-spaces</option> + </select> } +</div> +<div id="results" class="box"> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +</div></pre> + +<pre class="brush: css">.box { + width: 300px; + padding: 16px; + border-radius: 10px; +} + +#css-code { + background-color: rgb(220,220,220); + font-size: 16px; +} + +#results { + background-color: rgb(230,230,230); + overflow-x: scroll; + height: 400px; + white-space: normal; + font-size: 14px; +}</pre> + +<pre class="brush: js">var select = document.querySelector("#css-code select"); +var results = document.querySelector("#results p"); +select.addEventListener("change", function(e) { + results.setAttribute("style", "white-space: "+e.target.value); +})</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +</pre> + +<h3 id="CSS_결과">CSS + 결과</h3> + +<p>{{EmbedLiveSample('See_it_in_action_LiveSample', '100%', 500)}}</p> + +<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', '#propdef-white-space', 'white-space')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Precises the breaking algorithms.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.white-space")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>단어 안에서의 자동 줄 바꿈 방식을 지정하는 속성: {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}</li> +</ul> |