diff options
Diffstat (limited to 'files/ko/web/css/position_value/index.html')
| -rw-r--r-- | files/ko/web/css/position_value/index.html | 135 |
1 files changed, 135 insertions, 0 deletions
diff --git a/files/ko/web/css/position_value/index.html b/files/ko/web/css/position_value/index.html new file mode 100644 index 0000000000..7e03f38e2f --- /dev/null +++ b/files/ko/web/css/position_value/index.html @@ -0,0 +1,135 @@ +--- +title: <position> +slug: Web/CSS/position_value +tags: + - CSS + - CSS Data Type + - Layout + - Reference + - Web +translation_of: Web/CSS/position_value +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code><position></code></strong> (또는 <strong><code><bg-position></code></strong>) <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표입니다. {{cssxref("background-position")}}, {{cssxref("offset-anchor")}} 속성에서 사용합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> <code><position></code> 값이 설명하는 최종 위치가 요소 박스 내에 위치해야 할 필요는 없습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12215/position_type.png" style="float: left; height: 230px; width: 362px;"><code><position></code> 자료형은 하나 혹은 두 개의 키워드와 함께 선택적인 오프셋을 사용해 지정합니다.</p> + +<p>키워드에는 <code>center</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>가 있으며, 각각 요소 박스의 해당하는 방향 모서리 또는 마주보는 두 모서리의 가운데 지점을 의미합니다. 맥락에 따라, <code>center</code>는 좌우 모서리의 중간점일 수도 있고, 상하 모서리의 중간점일 수도 있습니다.</p> + +<p>오프셋은 상대적인 {{cssxref("<percentage>")}} 값 또는 절대적인 {{cssxref("<length>")}} 값으로 지정할 수 있습니다. 양수는 오른쪽과 아래쪽 중 적합한 방향으로 이동하며, 음수는 그 반대입니다.</p> + +<p>하나의 오프셋 값만 지정할 경우 x 좌표를 정의하는 것이며, 다른 축의 값은 기본값으로 <code>center</code>를 사용합니다.</p> + +<pre class="brush:css notranslate">/* 1-value syntax */ +<var>keyword</var> /* Either the horizontal or vertical position; the other axis defaults to center */ +<var>value</var> /* The position on the x-axis; the y-axis defaults to 50% */ + +/* 2-value syntax */ +<var>keyword</var> <var>keyword</var> /* A keyword for each direction (the order is irrelevant) */ +<var>keyword</var> <var>value</var> /* A keyword for horizontal position, value for vertical position */ +<var>value</var> <var>keyword</var> /* A value for horizontal position, keyword for vertical position */ +<var>value</var> <var>value</var> /* A value for each direction (horizontal then vertical) */ + +/* 4-value syntax */ +<var>keyword</var> <var>value</var> <var>keyword</var> <var>value</var> /* Each value is an offset from the keyword that preceeds it */ +</pre> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox notranslate">[ + [ left | center | right ] || [ top | center | bottom ] +| + [ left | center | right | <length> | <percentage> ] + [ top | center | bottom | <length> | <percentage> ]? +| + [ [ left | right ] [ <length> | <percentage> ] ] && + [ [ top | bottom ] [ <length> | <percentage> ] ] +] +</pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: {{cssxref("background-position")}} 속성은 세 값 구문도 허용하나, <code><position></code>을 사용하는 다른 속성에서는 허용하지 않습니다.</p> +</div> + +<h2 id="보간">보간</h2> + +<p>애니메이션에서 점의 가로 값과 세로 값은 각각 따로 보간됩니다. 그러나 두 좌표 모두에 대한 보간 속도는 하나의 <a href="/ko/docs/Web/CSS/single-transition-timing-function">타이밍 함수</a>가 결정하므로, 점은 직선을 따라 이동하게 됩니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="유효한_위치">유효한 위치</h3> + +<pre class="notranslate">center +left +center top + +right 8.5% +bottom 12vmin right -6px + +10% 20% +8rem 14px +</pre> + +<h3 id="유효하지_않은_위치">유효하지 않은 위치</h3> + +<pre class="example-bad notranslate">left right +bottom top +10px 15px 20px 15px +</pre> + +<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 Values', '#position', '<position>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Relists links to both definitions: if {{SpecName('CSS3 Backgrounds')}} is supported, its definition of <code><position></code> must also be used.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#typedef-bg-position', '<bg-position>')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Defines <code><position></code> explicitly and extends it to support offsets from any edge.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Allows combination of a keyword with a {{cssxref("<length>")}} or {{cssxref("<percentage>")}} value.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-position', '<position>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Defines <code><position></code> anonymously as the value of {{cssxref("background-position")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.position")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Values_and_Units">CSS 값과 단위</a></li> + <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 값과 단위 소개</a></li> + <li>{{cssxref("background-position")}}</li> + <li>{{cssxref("radial-gradient()")}}</li> + <li>{{cssxref("conic-gradient()")}}</li> +</ul> |