차이

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

--- wiki:css:css_note:css_borders [2021/03/05 12:32]
emblim98
+++ wiki:css:css_note:css_borders [2023/01/13 18:44] (현재)
@@ 줄 2: / 줄 2: @@
 <WRAP left notice 80%>
   * description : CSS Borders
-  * author      : 오션
-  * email       : shlim@repia.com
-  * lastupdate  : 2021-03-05
-</WRAP>
-<WRAP clear></WRAP>
-\\
-=====Source of the article====
-  * [[https://www.w3schools.com/css/css_border.asp|CSS Borders]]
-  * [[https://www.w3schools.com/css/css_border_width.asp|CSS Border Width]]
-  * [[https://www.w3schools.com/css/css_border_color.asp|CSS Border Color]]
-  * [[https://www.w3schools.com/css/css_border_sides.asp|CSS Bordr Sides]]
-  * [[https://www.w3schools.com/css/css_border_shorthand.asp|CSS Shorthand Border Property]]
-  * [[https://www.w3schools.com/css/css_border_rounded.asp|CSS Rounded Borders]]
-\\
-\\
-======CSS Borders(테두리)======
-CSS Border 속성은 요소의 보더 스타일, 너비, 컬러를 지정합니다.\\
-\\
-=====CSS Border Style=====
-''border-style''속성은 표시되는 보더의 종류를 지정합니다.\\
-\\
-  * ''dotted'' - 점선 테두리를 정의합니다.
-  * ''dashed'' - 파선 테두리를 정의합니다.
-  * ''solid''  - 실선 테두리를 정의합니다.
-  * ''double'' - 이중 테두리를 정의합니다.
-  * ''groove'' - 그루브 테두리를 정의합니다.
-  * ''ridge''  - 리지 테두리를 정의합니다.
-  * ''inset''  - 인셋 테두리를 정의합니다.
-  * ''outset'' - 아웃셋 테두리를 정의합니다.
-  * ''none''   - 테두리가 나타나지 않습니다.
-  * ''hidden'' - 숨겨진 테두리를 정의합니다.
-''border-style''속성은 1 ~ 4개 (top border, right border, bottom border, left border, 상우하좌)의 속성을 나타낼 수 있습니다.\\
-\\
-====예제====
-<code css>
-p.dotted {border-style: dotted;}
-p.dashed {border-style: dashed;}
-p.solid {border-style: solid;}
-p.double {border-style: double;}
-p.groove {border-style: groove;}
-p.ridge {border-style: ridge;}
-p.inset {border-style: inset;}
-p.outset {border-style: outset;}
-p.none {border-style: none;}
-p.hidden {border-style: hidden;}
-p.mix {border-style: dotted dashed solid double;}
-</code>
-\\
-  * 다른 CSS 테두리 속성은 ''border-style''속성이 설정되어 있지 않으면 효과가 없습니다.\\
-\\
-======CSS Border Width======
-''border-width''속성은  4개CSS Borders
   * author      : 오션
   * email       : shlim@repia.com
@@ 줄 79: / 줄 27: @@
   * ''solid''  - 실선 테두리를 정의합니다.
   * ''double'' - 이중 테두리를 정의합니다.
-  * ''groove'' - 그루브 테두리를 정의합니다.
+  * ''groove'' - 3D 그루브 테두리를 정의합니다.
-  * ''ridge''  - 리지 테두리를 정의합니다.
+  * ''ridge''  - 3D 리지 테두리를 정의합니다.
-  * ''inset''  - 인셋 테두리를 정의합니다.
+  * ''inset''  - 3D 인셋 테두리를 정의합니다.
-  * ''outset'' - 아웃셋 테두리를 정의합니다.
+  * ''outset'' - 3D 아웃셋 테두리를 정의합니다.
   * ''none''   - 테두리가 나타나지 않습니다.
   * ''hidden'' - 숨겨진 테두리를 정의합니다.
@@ 줄 133: / 줄 81: @@
 \\
 =====Specific Side Widths (특정 테두리의 너비)=====
-''border-width''속성은 1 ~ 4개의 값 (위쪽 테두리, 우측 테두리, 아래쪽 테두리, 좌측 테두리 / 상우하좌)을 가질 수 있습니다.\\
+''border-width''속성은 1 ~ 4개의 값 (위쪽 테두리, 우측 테두리, 아래쪽 테두리, 좌측 테두리. 상우하좌)을 가질 수 있습니다.\\
 \\
 ====예제====
@@ 줄 155: / 줄 103: @@
 \\
 ======CSS Border Color======
-''border-color'' 속성은 4개의 테두리 컬러 지정에 사용됩니다.\\
+  * ''border-color'' 속성은 4개의 테두리 컬러 지정에 사용됩니다.
-컬러는 하기와 같이 지정할 수 있습니다.\\
+  * 컬러는 하기와 같이 지정할 수 있습니다.
-  * 컬러 이름 - "red"와 같은 컬러 이름을 지정합니다.
-  * HEX - "ff0000"과 같은 HEX 값을 지정합니다.
+    * 컬러 이름 - "red"와 같은 컬러 이름을 지정합니다.
-  * RGB - "rgb(255, 0, 0)"과 같이 RGB 값을 지정합니다.
+    * HEX - "ff0000"과 같은 HEX 값을 지정합니다.
-  * HSL - "hsl(0, 100%, 50%)"처럼 HSL 값을 지정합니다.
+    * RGB - "rgb(255, 0, 0)"과 같이 RGB 값을 지정합니다.
-  * transparent - 투명
+    * HSL - "hsl(0, 100%, 50%)"처럼 HSL 값을 지정합니다.
-***''border-color''를 설정하지 않는 경우, 요소의 컬러를 상속받습니다.\\
+    * transparent - 투명
+      * ''border-color''를 설정하지 않는 경우, 요소의 컬러를 상속받습니다.\\
+\\
 ====예제====
 <code css>
@@ 줄 180: / 줄 130: @@
 }
 </code>
+\\
 \\
 ======Specific Side Colors======
-''border-color''속성은 1 ~ 4개의 값 (위쪽 테두리, 우측 테두리, 아래쪽 테두리, 좌측 테두리 / 상우하좌)을 가질 수 있습니다.\\
+  * ''border-color''속성은 1 ~ 4개의 값 (위쪽 테두리, 우측 테두리, 아래쪽 테두리, 좌측 테두리. 상우하좌)을 가질 수 있습니다.\\
 \\
 ====예제====
@@ 줄 194: / 줄 145: @@
 \\
 ======HEX Values======
-테두리 컬러는 16진수 값(hexadecimal value, HEX)을 사용하여 지정할 수 있습니다.\\
+  * 테두리 컬러는 16진수 값(hexadecimal value, HEX)을 사용하여 지정할 수 있습니다.\\
 \\
 ====예제====
@@ 줄 206: / 줄 157: @@
 //
 ======RGB Values======
-테두리 컬러는 RGB 값을 사용하여 지정할 수 있습니다.\\
+  * 테두리 컬러는 RGB 값을 사용하여 지정할 수 있습니다.\\
 \\
 ====예제====
@@ 줄 218: / 줄 169: @@
 //
 ======HSL Values======
-테두리 컬러는 HSL 값을 사용하여 지정할 수 있습니다.\\
+  * 테두리 컬러는 HSL 값을 사용하여 지정할 수 있습니다.\\
 \\
 ====예제====
@@ 줄 231: / 줄 182: @@
 ======CSS Border Sides======
 =====CSS Border - Individual Sides=====
-CSS에서, 각각의 4개 테두리의 속성을 지정할 수 있습니다.\\
+  * CSS에서, 각각의 4개 테두리의 속성을 지정할 수 있습니다.\\
 \\
 ====예제====
@@ 줄 243: / 줄 194: @@
 </code>
 \\
-상시 코드를 아래와 같이 작성할 수 있습니다.
+상기 코드를 아래와 같이 작성할 수 있습니다.\\
 <code css>
 p {
@@ 줄 251: / 줄 202: @@
 \\
 작동 원리는 아래와 같습니다.\\
-''border-style''속성이 4개의 값을 가지는 경우,\\
+\\
-  * **border-style:dotted solid double dashed;**
+  * ''border-style''속성이 4개의 값을 가지는 경우,\\
-    *
+    * **border-style:dotted solid double dashed;**
+      * top border : dotted
+      * right border : solid
+      * bottom border : double
+      * left border : dashed
+\\
+\\
+  * ''border-style''속성이 3개의 값을 가지는 경우,\\
+    * **border-style:dotted solid double;**
+      * top border : dotted
+      * right and left border : solid
+      * bottom border : double
+\\
+\\
+  * ''border-style''속성이 2개의 값을 가지는 경우,\\
+    * **border-style:dotted solid;**
+      * top and bottom border : dotted
+      * right and left border : solid
+\\
+\\
+  * ''border-style''속성이 1개의 값을 가지는 경우,\\
+    * **border-style:dotted;**
+      * 4개 테두리 모두 : dotted
+\\
+\\
+====예제====
+<code css>
+/* Four values */
+p {
+  border-style: dotted solid double dashed;
+}
+/* Three values */
+p {
+  border-style: dotted solid double;
+}
+/* Two values */
+p {
+  border-style: dotted solid;
+}
+/* One value */
+p {
+  border-style: dotted;
+}
+</code>
+\\
+\\
+======CSS Shorthand Border Property======
+코드 양을 줄이기 위해, 하나의 속성 안에 모든 각각의 테두리 속성들을 지정하는 것도 가능하다.\\
+''border''속성은 하기 테두리 속성들에 대한 shorthand 속성입니다.
+  * border-width
+  * border-style
+  * border-color
+====예제====
+<code css>
+p {
+  border: 5px solid red;
+}
+</code>
+\\
+또한 단 하나의 테두리에 대해서 테두리 속성을 지정할 수 있습니다.\\
+===left border===
+<code css>
+p {
+  border-left: 6px solid red;
+  background-color: lightgrey;
+</code>
+\\
+===Bottom border===
+<code css>
+p {
+  border-bottom: 6px solid red;
+  background-color: lightgrey;
+</code>
+\\
+\\
+======CSS Rounded Borders======
+''border-radius''속성은 요소에 둥근 테두리(rounded borders)를 추가하는데 사용됩니다.\\
+====예제====
+<code css>
+p {
+  border: 2px solid red;
+  border-radius: 5px;
+}
+</code>
+\\
+=====CSS Border Properties=====
+^ Property             ^ Description                              ^
+| border               | 하나의 선언에서 모든 테두리 속성들을 설정합니다.               |
+| border-bottom        | 하나의 선언에서 모든 아래쪽 테두리 속성들을 설정합니다.           |
+| border-bottom-color  | 아래쪽 테두리의 컬러를 설정한다                        |
+| border-bottom-style  | 아래쪽 테두리의 스타일을 설정한다.                      |
+| border-bottom-width  | 아래쪽 테두리의 너비를 설정한다.                       |
+| border-color         | 4개 테두리의 컬러를 설정한다.                        |
+| border-left          | 하나의 선언에서 모든 좌측 테두리 속성을 설정합니다.             |
+| border-left-color    | 좌측 테두리의 컬러를 설정한다.                        |
+| border-left-style    | 좌측 테두리의 스타일을 설정한다.                       |
+| border-left-width    | 좌측 테두리의 너비를 설정한다.                        |
+| border-radius        | 둥근 모서리에 대한 모든 4개의 border-radius 속성을 설정합니다.  |
+| border-right         | 하나의 선언에서 모든 우측 테두리 속성을 설정합니다.             |
+| border-right-color   | 우측 테두리의 컬러를 설정합니다.                       |
+| border-right-style   | 우측 테두리의 스타일을 설정합니다.                      |
+| border-right-width   | 우측 테두리의 너비를 설정합니다.                       |
+| border-style         | 4개 테두리의 스타일을 설정합니다.                      |
+| border-top           | 하나의 선언에서 모든 위쪽 테두리 속성을 설정합니다.           |
+| border-top-color     | 위쪽 테두리의 컬러를 설정합니다.                       |
+| border-top-style     | 위쪽 테두리의 스타일을 설정합니다.                      |
+| border-top-width     | 위쪽 테두리의 너비를 설정합니다.                       |
+| border-width         | 4개 테두리의 너비를 설정합니다.                       |
+\\
 {{tag>오션 CSS background color, image, repeat, attachement, position,}}

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

사용자 도구

사이트 도구

차이

문서 도구