diff options
Diffstat (limited to 'files/ko/web/css/border-style/index.html')
| -rw-r--r-- | files/ko/web/css/border-style/index.html | 241 |
1 files changed, 241 insertions, 0 deletions
diff --git a/files/ko/web/css/border-style/index.html b/files/ko/web/css/border-style/index.html new file mode 100644 index 0000000000..70bf9b180d --- /dev/null +++ b/files/ko/web/css/border-style/index.html @@ -0,0 +1,241 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-style +--- +<div>{{CSSRef}}</div> + +<p><strong><code>border-style</code> </strong><a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소 테두리 네 면의 스타일을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers">/* 키워드 값 */ +border-style: none; +border-style: hidden; +border-style: dotted; +border-style: dashed; +border-style: solid; +border-style: double; +border-style: groove; +border-style: ridge; +border-style: inset; +border-style: outset; + +/* 세로방향 | 가로방향 */ +border-style: dotted solid; + +/* 위 | 가로방향 | 아래 */ +border-style: hidden double dashed; + +/* 위 | 오른쪽 | 아래 | 왼쪽 */ +border-style: none solid dotted dashed; + +/* 전역 값 */ +border-style: inherit; +border-style: initial; +border-style: unset; +</pre> + +<p><code>border-style</code> 속성은 한 개에서 네 개의 값을 사용해 지정할 수 있습니다.</p> + +<ul> + <li><strong>한 개의 값</strong>은 모든 네 면의 테두리 스타일을 설정합니다.</li> + <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 테두리 스타일을 설정합니다.</li> + <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 테두리 스타일을 설정합니다.</li> + <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 테두리 스타일을 지정합니다. (시계방향)</li> +</ul> + +<p>각각의 값은 아래 목록 중 하나로 지정합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code><line-style></code></dt> + <dd>테두리의 스타일을 설명합니다. 다음 표의 값을 사용할 수 있습니다. + <table class="standard-table"> + <tbody> + <tr> + <td style="vertical-align: middle;"><code>none</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-style: none; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;"><code>hidden</code> 키워드와 마찬가지로 테두리를 표시하지 않습니다. {{cssxref("background-image")}}를 지정하지 않았으면 해당 면의 {{cssxref("border-width")}} 계산값은 지정값을 무시하고 <code>0</code>이 됩니다. 표에서, 칸의 테두리 상쇄 시 <code>none</code>은 제일 낮은 우선순위를 가집니다. 따라서 주변 칸이 테두리를 가진다면 테두리를 그립니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>hidden</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: hidden; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;"><code>none</code> 키워드와 마찬가지로 테두리를 표시하지 않습니다. Unless a {{cssxref("background-image")}}를 지정하지 않았으면 해당 면의 {{cssxref("border-width")}} 계산값은 지정값을 무시하고 <code>0</code>이 됩니다. 표에서, 칸의 테두리 상쇄 시 <code>hidden</code>은 제일 높은 우선순위를 가집니다. 따라서 주변 칸이 테두리를 가지더라도 그리지 않습니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dotted</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dotted; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;">테두리를 둥근 점 여러개로 그립니다. 점 간격은 명세에서 지정하지 않으며 구현마다 다릅니다. 점의 반지름은 해당 면 {{cssxref("border-width")}}의 절반입니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dashed</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dashed; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;">테두리를 직사각형 여러개로 그립니다. 사각형의 크기와 길이는 명세에서 지정하지 않으며 구현마다 다릅니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>solid</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: solid; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;">테두리를 하나의 직선으로 그립니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>double</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: double; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;">테두리를 두 개의 평행한 직선으로 그립니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>groove</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: groove; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;">테두리가 파인 것처럼 그립니다.<code>ridge</code>의 반대입니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>ridge</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: ridge; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;">테두리가 튀어나온 것처럼 그립니다. <code>groove</code>의 반대입니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>inset</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: inset; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;">요소가 파인 것처럼 테두리를 그립니다.<code>outset</code>의 반대입니다. {{cssxref("border-collapse")}}가 <code>collapsed</code>인 칸에서는 <code>groove</code>와 동일합니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>outset</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: outset; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;"> + <p>요소가 튀어나온 것처럼 그립니다. <code>inset</code>의 반대입니다. {{cssxref("border-collapse")}}가 <code>collapsed</code>인 칸에서는 <code>ridge</code>와 동일합니다.</p> + </td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="속성_값의_예시_표">속성 값의 예시 표</h3> + +<p>가능한 모든 값을 나열한 표입니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* 테이블 스타일 */ +table { + border-width: 3px; + background-color: #52E396; +} +tr, td { + padding: 2px; +} + +/* border-style 예제 클래스 */ +.b1 {border-style:none;} +.b2 {border-style:hidden;} +.b3 {border-style:dotted;} +.b4 {border-style:dashed;} +.b5 {border-style:solid;} +.b6 {border-style:double;} +.b7 {border-style:groove;} +.b8 {border-style:ridge;} +.b9 {border-style:inset;} +.b10 {border-style:outset;}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('속성_값의_예시_표', 300, 200)}}</p> + +<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 Backgrounds', '#border-style', 'border-style')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Adds <code>hidden</code> keyword value.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-style', 'border-style')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-style")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>테두리 관련 CSS 단축 속성: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}}</li> +</ul> |