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/text-align/index.html | 234 +++++++++++++++++++++++++++++++++ 1 file changed, 234 insertions(+) create mode 100644 files/ko/web/css/text-align/index.html (limited to 'files/ko/web/css/text-align') diff --git a/files/ko/web/css/text-align/index.html b/files/ko/web/css/text-align/index.html new file mode 100644 index 0000000000..630a0c0881 --- /dev/null +++ b/files/ko/web/css/text-align/index.html @@ -0,0 +1,234 @@ +--- +title: text-align +slug: Web/CSS/text-align +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/text-align +--- +
{{CSSRef}}
+ +

CSS text-align 속성은 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다. 즉 {{cssxref("vertical-align")}}과 동일하나 세로가 아닌 가로 방향으로 동작합니다.

+ +
{{EmbedInteractiveExample("pages/css/text-align.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+text-align: start;
+text-align: end;
+text-align: match-parent;
+
+/* 표 열의 문자 기반 정렬 */
+text-align: ".";
+text-align: "." center;
+
+/* 블록 정렬 값 (비표준 구문) */
+text-align: -moz-center;
+text-align: -webkit-center;
+
+/* 전역 값 */
+text-align: inherit;
+text-align: initial;
+text-align: unset;
+
+ +

text-align 속성은 다음 방법 중 하나를 사용해 지정합니다.

+ + + +

값

+ +
+
start {{experimental_inline}}
+
쓰기 방식이 좌횡서면 left와 같고, 우횡서면 right과 같습니다.
+
end {{experimental_inline}}
+
쓰기 방식이 좌횡서면 right과 같고, 우횡서면 left와 같습니다.
+
left
+
인라인 콘텐츠를 줄 상자의 왼쪽 모서리로 정렬합니다.
+ +
인라인 콘텐츠를 줄 상자의 오른쪽 모서리로 정렬합니다.
+
center
+
인라인 콘텐츠를 줄 상자의 가운데로 정렬합니다.
+
justify
+
인라인 콘텐츠를 양쪽 정렬합니다. 마지막 줄을 제외하고, 줄 상자의 왼쪽과 오른쪽 끝에 텍스트를 맞추기 위해 사이 공간을 띄웁니다.
+
justify-all {{experimental_inline}}
+
justify와 같지만 마지막 줄에도 적용합니다.
+
match-parent {{experimental_inline}}
+
inherit과 비슷하지만, start와 end 값을 부모의 {{cssxref("direction")}}에 맞춰 적절한 left와 right 값으로 치환합니다.
+
{{cssxref("<string>")}} {{experimental_inline}}
+
표 칸에 적용할 경우, 칸의 콘텐츠를 해당 문자에 맞춰 정렬합니다.
+
+ +

접근성 고려사항

+ +

양쪽 정렬 적용 시 생기는 불규칙한 여백은 난독증 등 인지력 저하를 겪고 있는 사용자에게 문제가 될 수 있습니다.

+ + + +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

왼쪽 정렬

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: left;
+  border: solid;
+}
+ +

결과

+ +

{{EmbedLiveSample("왼쪽_정렬","100%","100%")}}

+ +

가운데 정렬

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: center;
+  border: solid;
+}
+ +

결과

+ +

{{EmbedLiveSample("가운데_정렬","100%","100%")}}

+ +

양쪽 정렬

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: justify;
+  border: solid;
+}
+ +

결과

+ +

{{EmbedLiveSample("양쪽_정렬","100%","100%")}}

+ +

참고

+ +

인라인 콘텐츠를 가운데 정렬하지 않고 자신을 정렬하는 법은 {{cssxref("margin")}}을 auto로 설정하는 것입니다.

+ +
.something {
+  margin: auto;
+}
+
+ +
.something {
+  margin: 0 auto;
+}
+
+ +
.something {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}{{Spec2('CSS Logical Properties')}}No changes
{{SpecName('CSS4 Text', '#alignment', 'text-align')}}{{Spec2('CSS4 Text')}}Added the <string> value.
{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}{{Spec2('CSS3 Text')}}Added the start, end, and match-parent values. Changed the unnamed initial value to start (which it was).
{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}{{Spec2('CSS2.1')}}No changes
{{SpecName('CSS1', '#text-align', 'text-align')}}{{Spec2('CSS1')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.text-align")}}

+ +

같이 보기

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