diff options
Diffstat (limited to 'files/ko/web/css/css_logical_properties/index.html')
| -rw-r--r-- | files/ko/web/css/css_logical_properties/index.html | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/files/ko/web/css/css_logical_properties/index.html b/files/ko/web/css/css_logical_properties/index.html new file mode 100644 index 0000000000..e46148c67f --- /dev/null +++ b/files/ko/web/css/css_logical_properties/index.html @@ -0,0 +1,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> |