차이

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

--- wiki:css:css_note:css_outline [2021/03/08 09:14]
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
@@ 줄 53: / 줄 53: @@
 p.outset {outline-style: outset;}
 </code>
+\\
+**Note**: ''outline-style''속성이 설정되어 있지 않으면 다른 아웃라인 속성들은 어떤 영향돌 미치지 않습니다.\\
+\\
+\\
+======CSS Outline Width======
+''outline-width'' 속성은 아웃라인의 너비를 지정하고, 하기의 값들 중 하나를 가질 수 있습니다\\
+  * thin (일반적으로 1px)
+  * medium (일반적으로 3px)
+  * thick (일반적으로 5px)
+  * 특정 크기 (px, pt, cm, em 등)
+====예제====
+<code css>
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+p.ex1 {
+  border: 1px solid green;
+  outline-style: solid;
+  outline-color: red;
+  outline-width: thin;
+}
+p.ex2 {
+  border: 1px solid black;
+  outline-style: solid;
+  outline-color: dodgerblue;
+  outline-width: medium;
+}
+p.ex3 {
+  border: 1px solid orange;
+  outline-style: solid;
+  outline-color: blue;
+  outline-width: thick;
+}
+p.ex4 {
+  border: 1px solid Turquoise;
+  outline-style: solid;
+  outline-color: yellow;
+  outline-width: 4px;
+}
+</style>
+</head>
+<body>
+<h2>The outline-width Property</h2>
+<p class="ex1">A thin outline.</p>
+<p class="ex2">A medium outline.</p>
+<p class="ex3">A thick outline.</p>
+<p class="ex4">A 4px thick outline.</p>
+</body>
+</html>
+</code>
+\\
+\\
+======CSS Outline Color======
+''outline-color''속성은 아웃라인의 컬러를 지정하기 위해 사용합니다.\\
+컬러는 하기에 의해 설정될 수 있습니다.\\
+* 컬러 이름 - "red"와 같은 컬러 이름을 지정합니다.
+    * HEX - "ff0000"과 같은 HEX 값을 지정합니다.
+    * RGB - "rgb(255, 0, 0)"과 같이 RGB 값을 지정합니다.
+    * HSL - "hsl(0, 100%, 50%)"처럼 HSL 값을 지정합니다.
+    * invert - 컬러 배경에 상관없이 아웃라인이 보여지는 것을 보장하는 **색상 반전(color inversion)**을 수행합니다.
+====예제====
+<code css>
+p.ex1 {
+  border: 2px solid black;
+  outline-style: solid;
+  outline-color: red;
+}
+p.ex2 {
+  border: 2px solid black;
+  outline-style: dotted;
+  outline-color: blue;
+ {
+p.ex3 {
+  border: 2px solid black;
+  outline-style: outset;
+  outline-color: grey;
+}
+</code>
+\\
+======HEX Values======
+  * 테두리 컬러는 16진수 값(hexadecimal value, HEX)을 사용하여 지정할 수 있습니다.\\
+\\
+====예제====
+<code css>
+p.ex1 {
+  outline-style: solid;
+  outline-color: #ff0000; /* red */
+}
+</code>
+//
+//
+======RGB Values======
+  * 테두리 컬러는 RGB 값을 사용하여 지정할 수 있습니다.\\
+\\
+====예제====
+<code css>
+p.ex1 {
+  outline-style: solid;
+  outline-color: rgb(255, 0, 0); /* red */
+}
+</code>
+//
+//
+======HSL Values======
+  * 테두리 컬러는 HSL 값을 사용하여 지정할 수 있습니다.\\
+\\
+====예제====
+<code css>
+p.ex1 {
+  outline-style: solid;
+  outline-color: hsl(0, 100%, 50%); /* red */
+}
+</code>
+//
+//
+======Invert Color======
+하기의 예제는 ''outline-color: invert''를 사용하고, 이것은 **색상 반전 (color inversion)**을 수행합니다. 이 속성은 배경 컬러에 상관없이 아웃라인이 보여지게 합니다.\\
+\\
+====예제====
+<code css>
+p.ex1 {
+  border: 1px solid yellow;
+  outline-style: solid;
+  outline-color: invert;
+}
+</code>
+//
+//
+======CSS Outline Shorthand======
+''outline''속성은 하기와 같은 개별 아웃라인 속성을 설정하기 위한 shorthand 속성입니다.\\
+  * ''outline-width''
+  * ''outline-style'' (꼭 필요)
+  * ''outline-color''
+''outline''속성은 상기 목록처럼 지정할 수 있습니다. 순서는 중요하지 않습니다.
+\\
+<code css>
+p.ex1 {outline: dashed;}
+p.ex2 {outline: dotted red;}
+p.ex3 {outline: 5px solid yellow;}
+p.ex4 {outline: thick ridge pink;}
+</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   | 아웃라인의 너비를 설정합니다.                                                            |

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구