wiki:css:css_note:css_outline

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:css:css_note:css_outline [2021/03/08 10:51]
emblim98
+++ wiki:css:css_note:css_outline [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
 ====== CSS Outline ======
 <WRAP left notice 80%>
-  * description : CSS Height / Width
+  * description : CSS Outline width, color, shorthand, offset
   * author      : 오션
   * email       : shlim@repia.com
@@ 줄 202: / 줄 202: @@
 p.ex3 {outline: 5px solid yellow;}
 p.ex4 {outline: thick ridge pink;}
-</css>
+</code>
+\\
+\\
+======CSS Outline Offset======
+''outline-offset''속성은 아웃라인과 한 요소의 가장자리(edge)/테두리(border) 사이에 공간을 추가합니다. 요소와 아웃라인 사이의 공간은 투명합니다.\\
+====예제====
+<code css>
+p {
+  margin: 30px;
+  border: 1px solid black;
+  outline: 1px solid red;
+  outline-offset: 15px;
+}
+</code>
+\\
+<code css>
+p {
+  margin: 30px;
+  background: yellow;
+  border: 1px solid black;
+  outline: 1ps solid red;
+  outline-offset: 15px;
+}
+</code>
+\\
+=====All CSS Outline Properties=====
+^ Property        ^ Description                                                                 ^
+| outline         | 하나의 선언에서 outline-width, outline-style, outline-color를 설정하기 위한 shorthand 속성  |
+| outline-color   | 아웃라인의 컬러를 설정합니다.                                                            |
+| offline-offset  | 아웃라인과 한 요소의 가장자리 또는 테두리 사이의 공간을 설정합니다.                                      |
+| outline-style   | 아웃라인의 스타일을 설정합니다.                                                           |
+| outline-width   | 아웃라인의 너비를 설정합니다.                                                            |
 {{tag>오션, CSS outline }}

/var/services/web/dokuwiki/data/attic/wiki/css/css_note/css_outline.1615168301.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)