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

vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다.

+ +
/* keyword values */
+vertical-align: baseline;
+vertical-align: sub;
+vertical-align: super;
+vertical-align: text-top;
+vertical-align: text-bottom;
+vertical-align: middle;
+vertical-align: top;
+vertical-align: bottom;
+
+/* <length> values */
+vertical-align: 10em;
+vertical-align: 4px;
+
+/* <percentage> values */
+vertical-align: 20%;
+
+/* Global values */
+vertical-align: inherit;
+vertical-align: initial;
+vertical-align: unset;
+
+ +

vertical-align 속성은 두 컨텍스트에서 사용될 수 있습니다:

+ + + +
+ + + +
+ +

{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}

+ + + +
+ + + +
+ +

{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}

+ +

vertical-align은 오로지 inline과 table-cell 엘리먼트에만 적용된다는 것에 주의하세요: 이 속성을 block level 엘리먼트에 사용할 수 없습니다.

+ +

{{cssinfo}}

+ +

구문

+ +

이 속성은 아래의 키워드들로 지정됩니다.

+ +

Values (inline elements에서)

+ +

주로 부모 엘리먼트에 대하여 상대적으로 수직정렬하는 값들:

+ +
+
baseline
+
부모의 baseline에 맞추어 해당 엘리먼트의 baseline 을 정렬합니다.  몇몇 replaced elements의 베이스라인은 예를들면{{HTMLElement("textarea")}}은 HTML 명세에 정의되어 있지 않으므로, 이 키워드는 브라우저마다 다른 결과를 보여줍니다.
+
sub
+
해당 엘리먼트의 baseline을 부모의 subscript-baseline으로 정렬합니다.
+
super
+
해당 엘리먼트의 baseline을 부모의 superscript-baseline으로 정렬합니다.
+
text-top
+
해당 엘리먼트의 top을 부모 엘리먼트 폰트의 top으로 정렬합니다.
+
text-bottom
+
해당 엘리먼트의 bottom을 부모 엘리먼트 폰트의 bottom으로 정렬합니다.
+
middle
+
해당 엘리먼트의 middle을 부모의 baseline + x-height / 2 로 정렬합니다.
+
{{cssxref("<length>")}}
+
해당 엘리먼트의 baseline을 부모의 baseline에서 주어진 길이만큼 위로 정렬합니다.
+
{{cssxref("<percentage>")}}
+
<length> value와 마찬가지로 해당 엘리먼트의 baseline을 부모의 baseline에서 {{Cssxref("line-height")}}의 퍼센트로 주어진 퍼센트만큼 위로 정렬합니다.
+
+ +

(<length> 와 <percentage>에 대해서 음수 값이 허용됩니다.)

+ +

다음 두 value는 부모가 아닌 전체 라인에 대해,수직정렬하는 값입니다:

+ +
+
top
+
해당 엘리먼트의 top과 이것의 자손들의 top을 전체 라인의 top으로 정렬합니다.
+
bottom
+
해당 엘리먼트의 bottom과 이것의 자손들의 bottom을 전체 라인의 bottom으로 정렬합니다.
+
+ +

Baseline이 없는 엘리먼트에 대해서는 bottom margin edge가 baseline을 대신하여 사용됩니다.

+ +

Values (table cells에서)

+ +
+
baseline (sub, super, text-top, text-bottom, <length>, <percentage>)
+
 셀의 baseline을 같은 행의 다른 cell들의 baseline과 정렬합니다. 
+
top
+
셀의 top padding edge를 행의 top으로 정렬합니다.
+
middle
+
셀의  padding box의 중심을 행에서 중앙 정렬합니다.
+
bottom
+
셀의 bottom padding edge를 행의 bottom으로 정렬합니다.
+
+ +

음수 값이 허용됩니다.

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div>
+<div>An <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div>
+<div>An <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div>
+<div>An <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>
+
+ +

CSS

+ +
img.top { vertical-align: text-top; }
+img.bottom { vertical-align: text-bottom; }
+img.middle { vertical-align: middle; }
+
+ +

결과

+ +

{{EmbedLiveSample("Example")}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}}{{Spec2('CSS3 Transitions')}}Defines vertical-align as animatable.
{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}{{Spec2('CSS2.1')}}Add the {{cssxref("<length>")}} value and allows it to be applied to element with a {{cssxref("display")}} type of table-cell.
{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}{{Spec2('CSS1')}}Initial definition
+ +

브라우저 호환성

+ +

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

+ +

같이 보기

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