diff options
Diffstat (limited to 'files/ko/web/css/border/index.html')
| -rw-r--r-- | files/ko/web/css/border/index.html | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/files/ko/web/css/border/index.html b/files/ko/web/css/border/index.html new file mode 100644 index 0000000000..405ccfb05c --- /dev/null +++ b/files/ko/web/css/border/index.html @@ -0,0 +1,151 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS + - CSS Borders + - CSS Property + - Layout + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border +--- +<div>{{CSSRef("CSS Borders")}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border</code></strong> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 테두리를 설정합니다. {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}의 값을 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div> + + + +<h2 id="구성_속성">구성 속성</h2> + +<p><code>border</code>는 단축 속성으로서 다음의 하위 속성을 포함합니다.</p> + +<ul> + <li>{{cssxref("border-color")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-width")}}</li> +</ul> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers notranslate">/* 스타일 */ +border: solid; + +/* 너비 | 스타일 */ +border: 2px dotted; + +/* 스타일 | 색 */ +border: outset #f33; + +/* 너비 | 스타일 | 색 */ +border: medium dashed green; + +/* 전역 값 */ +border: inherit; +border: initial; +border: unset; +</pre> + +<p><code>border</code> 속성은 다음의 값 중 한 개에서 세 개를 선택해서 지정할 수 있습니다. 순서는 영향을 주지 않습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 스타일을 지정하지 않으면 기본값인 <code>none</code>이 사용돼 테두리가 보이지 않습니다.</p> +</div> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt id="<line-width>"><code><line-width></code></dt> + <dd>테두리의 굵기로 기본값은 <code>medium</code>입니다. {{Cssxref("border-width")}}를 참고하세요.</dd> + <dt id="<line-style>"><code><line-style></code></dt> + <dd>테두리의 스타일로 기본값은 <code>none</code>입니다. {{Cssxref("border-style")}}을 참고하세요.</dd> + <dt id="<color>">{{cssxref("<color>")}}</dt> + <dd>테두리의 색상으로 기본값은 <code>currentcolor</code>입니다. {{Cssxref("border-color")}}를 참고하세요.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>다른 단축 속성과 마찬가지로, 생략한 속성은 <a href="/ko/docs/Web/CSS/initial_value">초깃값</a>으로 설정됩니다. 한 가지 중요한 점은, <code>border</code>를 사용해서는 {{cssxref("border-image")}}에 원하는 값을 지정할 수는 없고 대신 초깃값인 <code>none</code>이 자동으로 설정됩니다.</p> + +<p><code>border</code> 단축 속성은 요소의 테두리를 모두 동일하게 설정하고 싶을 때 특히 유용합니다. 그러나 서로의 테두리를 다르게 하고 싶다면 네 면을 각각 설정할 수 있는 본디 속성 {{Cssxref("border-width")}}, {{Cssxref("border-style")}},{{Cssxref("border-color")}}를 사용하면 됩니다. 아니면 한 면의 테두리를 절대 기준({{Cssxref("border-top")}} 등)이나 상대 기준({{Cssxref("border-block-start")}} 등) 속성을 사용해서 따로 정해줄 수도 있습니다.</p> + +<h3 id="테두리_vs외곽선">테두리 vs외곽선</h3> + +<p>테두리와 <a href="/ko/docs/Web/CSS/outline">외곽선</a>은 매우 유사하지만, 다음의 두 가지 차이점이 존재합니다.</p> + +<ul> + <li>외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다.</li> + <li>명세에 따르면 외곽선은 직사각형일 필요가 없습니다. 보통 직사각형으로 그리기는 합니다.</li> +</ul> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate"><code>{{csssyntax}}</code></pre> + +<h2 id="예제">예제</h2> + +<h3 id="튀어나오는_듯한_분홍색_테두리_추가하기">튀어나오는 듯한 분홍색 테두리 추가하기</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>테두리와 외곽선에 더해 그림자까지, 정말 멋지지 않나요?</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + border: 0.5rem outset pink; + outline: 0.5rem solid khaki; + box-shadow: 0 0 0 2rem skyblue; + border-radius: 12px; + font: bold 1rem sans-serif; + margin: 2rem; + padding: 1rem; + outline-offset: 0.5rem; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('튀어나오는_듯한_분홍색_테두리_추가하기')}}</p> + +<h2 id="Specifications" name="Specifications">명세</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 Backgrounds', '#the-border-shorthands', 'border')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Removes <em>specific</em> support for <code>transparent</code>, as it is now a valid {{cssxref("<color>")}}; this has no practical impact.<br> + Though it cannot be set to a custom value using the shorthand, <code>border</code> now resets {{cssxref("border-image")}} to its initial value (<code>none</code>).</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Accepts the <code>inherit</code> keyword. Also accepts <code>transparent</code> as a valid color.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border', 'border')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border")}}</p> |