files/ko/web/css/position_value/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
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>&lt;position&gt;</code></strong> (또는 <strong><code>&lt;bg-position&gt;</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>&lt;position&gt;</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>&lt;position&gt;</code> 자료형은 하나 혹은 두 개의 키워드와 함께 선택적인 오프셋을 사용해 지정합니다.</p>

<p>키워드에는 <code>center</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>가 있으며, 각각 요소 박스의 해당하는 방향 모서리 또는 마주보는 두 모서리의 가운데 지점을 의미합니다. 맥락에 따라, <code>center</code>는 좌우 모서리의 중간점일 수도 있고, 상하 모서리의 중간점일 수도 있습니다.</p>

<p>오프셋은 상대적인 {{cssxref("&lt;percentage&gt;")}} 값 또는 절대적인 {{cssxref("&lt;length&gt;")}} 값으로 지정할 수 있습니다. 양수는 오른쪽과 아래쪽 중 적합한 방향으로 이동하며, 음수는 그 반대입니다.</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 | &lt;length&gt; | &lt;percentage&gt; ]
 [ top | center | bottom | &lt;length&gt; | &lt;percentage&gt; ]?
|
 [ [ left | right ] [ &lt;length&gt; | &lt;percentage&gt; ] ] &amp;&amp;
 [ [ top | bottom ] [ &lt;length&gt; | &lt;percentage&gt; ] ]
]
</pre>

<div class="blockIndicator note">
<p><strong>참고</strong>: {{cssxref("background-position")}} 속성은 세 값 구문도 허용하나, <code>&lt;position&gt;</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', '&lt;position&gt;')}}</td>
   <td>{{Spec2('CSS3 Values')}}</td>
   <td>Relists links to both definitions: if {{SpecName('CSS3 Backgrounds')}} is supported, its definition of <code>&lt;position&gt;</code> must also be used.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#typedef-bg-position', '&lt;bg-position&gt;')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>Defines <code>&lt;position&gt;</code> explicitly and extends it to support offsets from any edge.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '&lt;position&gt;')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Allows combination of a keyword with a {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} value.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#background-position', '&lt;position&gt;')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Defines <code>&lt;position&gt;</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>