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/white-space/index.html | 242 ++++++++++++++++++++++++++++++++ 1 file changed, 242 insertions(+) create mode 100644 files/ko/web/css/white-space/index.html (limited to 'files/ko/web/css/white-space/index.html') 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 +--- +
{{CSSRef}}
+ +

CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/white-space.html")}}
+ + + +
+

참고: 단어 안에서 줄이 바뀌기를 원하는 경우 {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}를 사용하세요.

+
+ +

구문

+ +
/* 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;
+
+ +

white-space 속성은 다음 목록의 키워드 값 중 하나를 사용해 설정합니다.

+ +

값

+ +
+
normal
+
연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리합니다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.
+
nowrap
+
연속 공백을 하나로 합침. 줄 바꿈은 {{htmlelement("br")}} 요소에서만 일어납니다.
+
pre
+
연속 공백 유지. 줄 바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서만 일어납니다.
+
pre-wrap
+
연속 공백 유지. 줄 바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.
+
pre-line
+
연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.
+
break-spaces
+
다음 차이점을 제외하면 pre-wrap과 동일합니다. +
    +
  • 연속 공백이 줄의 끝에 위치하더라도 공간을 차지합니다.
    • +
  • 연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있습니다.
    • +
  • 유지한 연속 공백은 pre-wrap과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기(min-content, max-content)에 영향을 줍니다.
    • +
+
+
+ +

다음은 여러가지 white-space 값의 동작을 정리한 표입니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
개행 문자스페이스, 탭자동 줄 바꿈줄 끝의 공백
normal병합병합예제거
nowrap병합병합아니오제거
pre유지유지아니오유지
pre-wrap유지유지예넘침
pre-line유지병합예제거
break-spaces유지유지예줄 바꿈
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

기본 예제

+ +
code {
+  white-space: pre;
+}
+ +

{{HTMLElement("pre")}} 요소 내부의 줄 바꿈

+ +
pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: pre-wrap;      /* current browsers */
+}
+ +

실제로 보기

+ + + +

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>
+
+ +

CSS + 결과

+ +

{{EmbedLiveSample('See_it_in_action_LiveSample', '100%', 500)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}{{Spec2('CSS3 Text')}}Precises the breaking algorithms.
{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}{{Spec2('CSS2.1')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.white-space")}}

+ +

같이 보기

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