차이

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

--- wiki:css:css_note:css_borders [2021/03/05 10:57]
emblim98 만듦
+++ wiki:css:css_note:css_borders [2023/01/13 18:44] (현재)
@@ 줄 9: / 줄 9: @@
 \\
 =====Source of the article====
-  * [[https://www.w3schools.com/css/css_background.asp|CSS Background Color]]
+  * [[https://www.w3schools.com/css/css_border.asp|CSS Borders]]
-  * [[https://www.w3schools.com/css/css_background_image.asp|CSS Background Image]]
+  * [[https://www.w3schools.com/css/css_border_width.asp|CSS Border Width]]
-  * [[https://www.w3schools.com/css/css_background_repeat.asp|CSS Background Repeat]]
+  * [[https://www.w3schools.com/css/css_border_color.asp|CSS Border Color]]
-  * [[https://www.w3schools.com/css/css_background_attachment.asp|CSS Background Attachment]]
+  * [[https://www.w3schools.com/css/css_border_sides.asp|CSS Bordr Sides]]
-  * [[https://www.w3schools.com/css/css_background_shorthand.asp|CSS Background Shorthand]]
+  * [[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 백그라운드 속성은 요소들을 위한 배경 효과를 추가하기 위해 사용됩니다.\\
 \\
+======CSS Borders(테두리)======
+CSS Border 속성은 요소의 테두리 스타일, 너비, 컬러를 지정합니다.\\
+\\
+=====CSS Border Style=====
+''border-style''속성은 표시되는 테두리의 종류를 지정합니다.\\
+\\
+  * ''dotted'' - 점선 테두리를 정의합니다.
+  * ''dashed'' - 파선 테두리를 정의합니다.
+  * ''solid''  - 실선 테두리를 정의합니다.
+  * ''double'' - 이중 테두리를 정의합니다.
+  * ''groove'' - 3D 그루브 테두리를 정의합니다.
+  * ''ridge''  - 3D 리지 테두리를 정의합니다.
+  * ''inset''  - 3D 인셋 테두리를 정의합니다.
+  * ''outset'' - 3D 아웃셋 테두리를 정의합니다.
+  * ''none''   - 테두리가 나타나지 않습니다.
+  * ''hidden'' - 숨겨진 테두리를 정의합니다.
+''border-style''속성은 1 ~ 4개 (top border, right border, bottom border, left border, 상우하좌)의 속성을 나타낼 수 있습니다.\\
 \\
-======CSS Background-color ======
-''background-color'' 속성은 요소의 배경 컬러를 지정합니다.\\
 ====예제====
 <code css>
-body {
+p.dotted {border-style: dotted;}
-  background-color: lightblue;
+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에서, 컬러는 아래와 같이 많이 지정됩니다.\\
+  * 다른 CSS 테두리 속성은 ''border-style''속성이 설정되어 있지 않으면 효과가 없습니다.\\
-  * 유효한 컬러 이름 - ex) red
+\\
-  * HEX 값 - ex) #ff0000
+======CSS Border Width======
-  * RGB 값 - ex) rgb(255, 0, 0)
+''border-width''속성은  4개 테두리의 너비를 지정합니다.\\
+너비는 특정 크기 (px, pt, cm, em 등)로 설정하거나, 미리 정해진 세 가지 값 (thin, medium, thick) 중 하나를 사용하여 설정할 수 있습니다.\\
 \\
-=====다른 요소들 (Other Elements)=====
-HTML 요소의 배경색을 설정할 수 있습니다.\\
 ====예제====
 <code css>
-h1 {
+p.one {
-  background-color: green;
+  border-style: solid;
+  border-width: 5px;
 }
-div {
+p.two {
-  background-color: lightblue;
+  border-style: solid;
+  border-width: medium;
 }
-p {
+p.three {
-  background-color: yellow;
+  border-style: dotted;
+  border-width: 2px;
+}
+p.four {
+  border-style: dotted;
+  border-width: thick;
 }
 </code>
 \\
 \\
-======불투명도 / 투명도 (Opacity / Transparency)======
+=====Specific Side Widths (특정 테두리의 너비)=====
-불투명도 (opacity) 속성은 요소의 불투명도/투명도를 지정합니다. 0.0 ~ 1.0 사이의 값을 가질 수 있습니다. 값이 더 낮을수록 더 투명합니다.\\
+''border-width''속성은 1 ~ 4개의 값 (위쪽 테두리, 우측 테두리, 아래쪽 테두리, 좌측 테두리. 상우하좌)을 가질 수 있습니다.\\
+\\
 ====예제====
 <code css>
-div {
+p.one {
-  background-color: green;
+  border-style: solid;
-  opacity: 0.3;
+  border-width: 5px 20px; /* 상하 - 5px, 좌우 - 20px */
 }
-</code>
-<code html>
+p.two {
-<!DOCTYPE html>
+  border-style: solid;
-<html>
+  border-width: 20px 5px; /* 상하 - 20px, 좌우 - 5px */
-<head>
-<style>
-div {
-  background-color: green;
 }
-div.first {
+p.three {
-  opacity: 0.1;
+  border-style: solid;
+  border-width: 25px 10px 4px 35px; /* 상 - 25px, 우 - 10px, 하 - 4px, 좌 - 35px */
 }
+</code>
+\\
+\\
+======CSS Border Color======
+  * ''border-color'' 속성은 4개의 테두리 컬러 지정에 사용됩니다.
+  * 컬러는 하기와 같이 지정할 수 있습니다.
-div.second {
+    * 컬러 이름 - "red"와 같은 컬러 이름을 지정합니다.
-  opacity: 0.3;
+    * HEX - "ff0000"과 같은 HEX 값을 지정합니다.
+    * RGB - "rgb(255, 0, 0)"과 같이 RGB 값을 지정합니다.
+    * HSL - "hsl(0, 100%, 50%)"처럼 HSL 값을 지정합니다.
+    * transparent - 투명
+      * ''border-color''를 설정하지 않는 경우, 요소의 컬러를 상속받습니다.\\
+\\
+====예제====
+<code css>
+p.one {
+  border-style: solid;
+  border-color: red;
 }
-div.third {
+p.two {
-  opacity: 0.6;
+  border-style: solid;
+  border-color: green;
 }
-</style>
-</head>
-<body>
-<h1>Transparent Box</h1>
-<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>
-<div class="first">
-  <h1>opacity 0.1</h1>
-</div>
-<div class="second">
-  <h1>opacity 0.3</h1>
-</div>
-<div class="third">
-  <h1>opacity 0.6</h1>
-</div>
-<div>
-  <h1>opacity 1 (default)</h1>
-</div>
-</body>
-</html>
+p.three {
+  border-style: dotted;
+  border-color: blue;
+}
 </code>
 \\
-Note: 요소의 배경에 투명도를 추가하기 위해 ''불투명도 (opacity)'' 속성을 사용할 때, 해당 요소의 모든 자식 요소들은 동일한 투명도를 상속받습니다. 이로 인하여 내부의 텍스트를 완전히 투명하게 만들어서 읽기 어렵게 할 수 있습니다.\\
 \\
+======Specific Side Colors======
+  * ''border-color''속성은 1 ~ 4개의 값 (위쪽 테두리, 우측 테두리, 아래쪽 테두리, 좌측 테두리. 상우하좌)을 가질 수 있습니다.\\
 \\
-======RGBA를 사용하는 투명도 (Transparency using RGBA)======
-상기 예제처럼 자식 요소들에게 불투명도를 적용시키지 않으려면, RGBA 컬러 값을 사용합니다.\\
-RGBA 컬러 값은 **rgba(rerd, green, blue, alpha)**로 지정합니다. 알파 매개변수는 0.0(완전 투명) ~ 1.0(완전 불투명) 사이의 숫자를 사용합니다.\\
 ====예제====
 <code css>
-div {
+p.one {
-  background: rgba(0, 128, 0, 0.3)   /* 30% 불투명도를 가진 green 배경 컬러 */
+  border-style: solid;
+  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
 }
 </code>
 \\
 \\
-======CSS Background Image======
+======HEX Values======
-''background-image''속성은 요소의 배경으로 사용할 이미지를 지정합니다.\\
+  * 테두리 컬러는 16진수 값(hexadecimal value, HEX)을 사용하여 지정할 수 있습니다.\\
-기본적으로 전체 요소를 덮도록 반복됩니다.\\
+\\
 ====예제====
 <code css>
-body {
+p.one {
-  background-image: url("paper.gif");
+  border-style: solid;
+  border-color: #ff0000; /* red */
+}
 </code>
+//
+//
+======RGB Values======
+  * 테두리 컬러는 RGB 값을 사용하여 지정할 수 있습니다.\\
 \\
-백그라운드 이미지는 특정 요소들을 위해 설정될 수 있습니다. (예: <p> 요소)\\
 ====예제====
 <code css>
-p {
+p.one {
-  background-image: url("paper.gif");
+  border-style: solid;
+  border-color: rgb(255, 0, 0); /* red */
 }
 </code>
+//
+//
+======HSL Values======
+  * 테두리 컬러는 HSL 값을 사용하여 지정할 수 있습니다.\\
 \\
-\\
-======CSS Background Repeat======
-기본적으로  ''background-image''속성은 이미지를 가로 및 세로로 반복합니다.\\
-일부 이미지들은 세로나 혹은 가로로만 반복되기 때문에 이상하게 보일 수 있습니다.\\
-\\
-이미지를 가로로만 반복해야 할 경우, ''background-repeat: repeat-x;''로 설정합니다.( X축 방향으로만 반복)\\
-\\
-이미지를 세로로만 반복해야 할 경우, ''background-repeat: repeat-y;''로 설정합니다.( y축 방향으로만 반복)\\
-\\
-\\
-======CSS Background-repeat: no-repeat======
-백그라운드 이미지를 오직 한번만 보여지게 하는 것은 ''background-repeat''속성으로 지정합니다.\\
 ====예제====
-백그라운드 이미지를 오직 한번만 나타냅니다.\\
 <code css>
-body {
+p.one {
-  background-image: url("img_tree.png");
+  border-style: solid;
-  background-repeat: no-repeat;
+  border-color: hsl(0, 100%, 50%); /* red */
 }
 </code>
+//
+//
+======CSS Border Sides======
+=====CSS Border - Individual Sides=====
+  * CSS에서, 각각의 4개 테두리의 속성을 지정할 수 있습니다.\\
 \\
-\\
-======CSS background-position======
-''background-position''속성은 백그라운드 이미지의 위치를 지정하기 위해 사용됩니다.\\
 ====예제====
 <code css>
-body {
+p {
-  background-image: url("img_tree.png");
+  border-top-style: dotted;
-  background-repeat: no-repeat;
+  border-right-style: solid;
-  background-position: right top;
+  border-bottom-style: dotted;
+  border-left-style: solid;
 }
 </code>
+\\
+상기 코드를 아래와 같이 작성할 수 있습니다.\\
+<code css>
+p {
+  border-style: dotted solid;
+}
+</code>
+\\
+작동 원리는 아래와 같습니다.\\
+\\
+  * ''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
 \\
 \\
-======CSS Background Attachment======
-''background-attachment''속성은 백그라운드 이미지가 스크롤 되는지 또는 고정되는지를 지정합니다.\\
 ====예제====
-백그라운드 이미지가 고정되도록 지정하기\\
 <code css>
-body {
+/* Four values */
-  background-image: url("img_tree.png");
+p {
-  background-repeat: no-repeat;
+  border-style: dotted solid double dashed;
-  background-position: right-top;
+}
-  background-attachment: fixed;
+/* 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>
-body {
+p {
-  background-image: url("img_tree.png");
+  border: 5px solid red;
-  background-repeat: no-repeat;
-  background-position: right-top;
-  background-attachment: scroll;
 }
 </code>
 \\
+또한 단 하나의 테두리에 대해서 테두리 속성을 지정할 수 있습니다.\\
+===left border===
+<code css>
+p {
+  border-left: 6px solid red;
+  background-color: lightgrey;
+</code>
 \\
-======CSS Background Shorthand======
+===Bottom border===
-코드를 단순화하기 위해, 단 하나의 속성에 모든 백그라운드 속성들은 지정하는 것도 가능하며, shorthand 속성이라고 합니다.\\
 <code css>
-body {
+p {
-  background-color: #ffffff;
+  border-bottom: 6px solid red;
-  background-image: url("img_tree.png");
+  background-color: lightgrey;
-  background-repeat: no-repeat;
+</code>
-  background-position: right top;
-}
-</code>
 \\
-상기 코드를 shorthand 속성 ''background''를 사용할 수 있습니다.\\
+\\
+======CSS Rounded Borders======
+''border-radius''속성은 요소에 둥근 테두리(rounded borders)를 추가하는데 사용됩니다.\\
 ====예제====
-하나의 선언(one declaration)에 백그라운드 속성들을 설정하기 위해 shorthand 속성을 사용합니다.\\
 <code css>
-body {
+p {
-  background: #ffffff url("img_tree.png") no-repeat right top;
+  border: 2px solid red;
+  border-radius: 5px;
 }
 </code>
 \\
-shorthand 속성 사용시, 속성의 순서는 아래와 같습니다.\\
+=====CSS Border Properties=====
-  * ''background-color''
+^ Property             ^ Description                              ^
-  * ''background-image''
+| border               | 하나의 선언에서 모든 테두리 속성들을 설정합니다.               |
-  * ''background-repeat''
+| border-bottom        | 하나의 선언에서 모든 아래쪽 테두리 속성들을 설정합니다.           |
-  * ''background-attachment''
+| border-bottom-color  | 아래쪽 테두리의 컬러를 설정한다                        |
-  * ''background-position''
+| border-bottom-style  | 아래쪽 테두리의 스타일을 설정한다.                      |
-다른 속성들이 상기 순서대로 shorthand에 기록되어 있는 한, 속성 값들 중 하나가 없어도 문제가 되지 않습니다. \\
+| 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개 테두리의 너비를 설정합니다.                       |
 \\
-=====All CSS Background Properties=====
-^ Property               ^ Description                                         ^
-| background             | 하나의 선언에 모든 백그라운드 속성들을 설정합니다.                        |
-| background-attachment  | 백그라운드 이미지가 고정되는지 혹은 페이지의 나머지 부분과 같이 스크롤 되는지 설정합니다.  |
-| background-clip        | 백그라운드의 페인팅 영역을 설정합니다.                               |
-| background-color       | 한 요소의 백그라운드 컬러를 설정합니다.                              |
-^ background-image       ^ 한 요소의 백그라운드 이미지를 설정합니다.                             ^
-| background-origin      | 백그라운드 이미지(들)의 위치를 지정합니다.                            |
-| background-position    | 백그라운드 이미지의 시작 위치를 설정합니다.                            |
-| background-repeat      | 하나의 백그라운드 이미지의 반복 방법을 설정합니다.                        |
-| background-size        | 백그라운드 이미지(들)의 크기를 지정합니다.                            |
 {{tag>오션 CSS background color, image, repeat, attachement, position,}}

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

사용자 도구

사이트 도구

차이

문서 도구