From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/outline-style/index.html | 256 ++++++++++++++++++++++++++++++ 1 file changed, 256 insertions(+) create mode 100644 files/ko/web/css/outline-style/index.html (limited to 'files/ko/web/css/outline-style/index.html') diff --git a/files/ko/web/css/outline-style/index.html b/files/ko/web/css/outline-style/index.html new file mode 100644 index 0000000000..cc483e5010 --- /dev/null +++ b/files/ko/web/css/outline-style/index.html @@ -0,0 +1,256 @@ +--- +title: outline-style +slug: Web/CSS/outline-style +tags: + - CSS + - CSS Outline + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/outline-style +--- +
{{CSSRef}}
+ +

CSS outline-style 속성은 요소 외곽선의 스타일을 설정합니다. 외곽선은 요소의 테두리 바깥에 그려지는 선입니다.

+ +
{{EmbedInteractiveExample("pages/css/outline-style.html")}}
+ + + +

외곽선 외형을 설정할 땐 {{cssxref("outline")}} 단축 속성을 사용하는게 편리한 상황이 많습니다.

+ +

구문

+ +
/* 키워드 값 */
+outline-style: auto;
+outline-style: none;
+outline-style: dotted;
+outline-style: dashed;
+outline-style: solid;
+outline-style: double;
+outline-style: groove;
+outline-style: ridge;
+outline-style: inset;
+outline-style: outset;
+
+/* 전역 값 */
+outline-style: inherit;
+outline-style: initial;
+outline-style: unset;
+
+ +

outline-style 속성은 다음 값 중 하나를 사용해 지정합니다.

+ +

값

+ +
+
+

auto

+
+
사용자 에이전트가 사용자 지정 외곽선을 그릴 수 있도록 허용합니다.
+
+

none

+
+
외곽선을 제거합니다. {{cssxref("outline-width")}}가 0입니다.
+
+

dotted

+
+
외곽선을 점 여러 개로 그립니다.
+
+

dashed

+
+
외곽선을 짧은 선 여러 개로 그립니다.
+
+

solid

+
+
외곽선을 하나의 선으로 그립니다.
+
+

double

+
+
외곽선을 두 개의 선으로 그립니다. {{cssxref("outline-width")}}는 두 선과 그 사이의 간격을 합친 값입니다.
+
+

groove

+
+
외곽선을 마치 파낸 것처럼 그립니다.
+
+

ridge

+
+
groove의 반대입니다. 외곽선을 마치 튀어나온 것처럼 그립니다.
+
+

inset

+
+
요소가 페이지 안에 박힌 것처럼 외곽선을 그립니다.
+
+

outset

+
+
inset의 반대입니다. 요소가 페이지 밖으로 나온 것처럼 그립니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

외곽선 스타일을 auto로 설정하기

+ +

auto 값은 사용자 지정 스타일을 의미합니다. 일반적으로 플랫폼 기본 사용자 인터페이스 스타일이거나, CSS에서 나타낼 수 있는 것보다 더 풍부한 스타일 (예컨대 둥근 꼭짓점에 바깥쪽 픽셀은 반투명하여 빛나는 것처럼 보이는 외곽선)입니다.

+ +

HTML

+ +
<div>
+  <p class="auto">Outline Demo</p>
+</div>
+ +

CSS

+ +
.auto {
+  outline-style: auto; /* same result as "outline: auto" */
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

결과

+ +

{{ EmbedLiveSample('외곽선_스타일을_auto로_설정하기') }}

+ +

외곽선 스타일을 dashed, dotted로 설정하기

+ +

HTML

+ +
<div>
+  <div class="dotted">
+    <p class="dashed">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.dotted {
+  outline-style: dotted; /* same result as "outline: dotted" */
+}
+.dashed {
+  outline-style: dashed;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

결과

+ +

{{ EmbedLiveSample('외곽선_스타일을_dashed_dotted로_설정하기') }}

+ +

외곽선 스타일을 solid, double로 설정하기

+ +

HTML

+ +
<div>
+  <div class="solid">
+    <p class="double">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.solid {
+  outline-style: solid;
+}
+.double {
+  outline-style: double;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

결과

+ +

{{ EmbedLiveSample('외곽선_스타일을_solid_double로_설정하기') }}

+ +

외곽선 스타일을 groove, ridge로 설정하기

+ +

HTML

+ +
<div>
+  <div class="groove">
+    <p class="ridge">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.groove {
+  outline-style: groove;
+}
+.ridge {
+  outline-style: ridge;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

결과

+ +

{{ EmbedLiveSample('외곽선_스타일을_groove_ridge로_설정하기') }}

+ +

외곽선 스타일을 inset, outset으로 설정하기

+ +

HTML

+ +
<div>
+  <div class="inset">
+    <p class="outset">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.inset {
+  outline-style: inset;
+}
+.outset {
+  outline-style: outset;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

결과

+ +

{{ EmbedLiveSample('외곽선_스타일을_inset_outset으로_설정하기') }}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}{{Spec2('CSS3 Basic UI')}}Added auto value.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.properties.outline-style")}}

+
-- cgit v1.2.3-54-g00ecf