aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/css/css_logical_properties/index.html
blob: e46148c67f6250047f07f82e6836f8b0694dbb9f (plain)
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
136
---
title: CSS Logical Properties and Values
slug: Web/CSS/CSS_Logical_Properties
tags:
  - CSS
  - CSS Logical Properties
  - Overview
  - Reference
translation_of: Web/CSS/CSS_Logical_Properties
---
<div>{{CSSRef}}</div>

<p><strong>CSS Logical Properties and Values</strong>는 레이아웃을 제어하는 물리 속성에 논리 맵핑을 정의하는 CSS 모듈입니다.</p>

<h3 id="블록과_인라인">블록과 인라인</h3>

<p>Logical properties and values use the abstract terms <em>block</em> and <em>inline</em> to describe the direction in which they flow. The physical meaning of these terms depends on the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes">writing mode</a>.</p>

<dl>
 <dt><a id="블록_치수" name="블록_치수">블록 치수</a></dt>
 <dd>The dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. For standard English text, it is the vertical dimension.</dd>
 <dt><a id="인라인_치수" name="인라인_치수">인라인 치수</a></dt>
 <dd>The dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. For standard English text, it is the horizontal dimension.</dd>
</dl>

<h2 id="참고서">참고서</h2>

<h3 id="크기_속성">크기 속성</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("block-size")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inline-size")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("max-block-size")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("max-inline-size")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("min-block-size")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("min-inline-size")}} {{Experimental_Inline}}</li>
</ul>
</div>

<h3 id="안팎_여백_테두리_속성">안팎 여백, 테두리 속성</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("border-block")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-color")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-start")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-style")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-width")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("border-inline")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-color")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-start")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-style")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-width")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("margin-block")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("margin-block-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("margin-block-start")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("margin-inline")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("padding-block")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("padding-block-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("padding-block-start")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("padding-inline")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}</li>
</ul>
</div>

<h3 id="플로트와_위치_속성">플로트와 위치 속성</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("clear")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} keywords)</span></li>
 <li>{{CSSxRef("float")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} keywords)</span></li>
 <li>{{CSSxRef("inset")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inset-block")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inset-block-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inset-block-start")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inset-inline")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}</li>
</ul>
</div>

<h3 id="기타_속성">기타 속성</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("caption-side")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} keywords)</span></li>
 <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (<code>block</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline</code> {{Experimental_Inline}} keywords)</span></li>
 <li>{{CSSxRef("text-align")}} (<code>end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>start</code> {{Experimental_Inline}} keywords)</span></li>
</ul>
</div>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">설명</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Logical Properties')}}</td>
   <td>{{Spec2('CSS Logical Properties')}}</td>
   <td>초기 정의</td>
  </tr>
 </tbody>
</table>