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

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_borders
wiki:css:css_note:css_borders

차이

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

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:css:css_note:css_borders [2021/03/05 14:14]
emblim98 		wiki:css:css_note:css_borders [2023/01/13 18:44] (현재)
줄 2: 줄 2:
 <WRAP left notice 80%> <WRAP left notice 80%>
   * description : CSS Borders   * 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      : 오션   * author      : 오션
   * email       : shlim@repia.com   * email       : shlim@repia.com
줄 79: 줄 27:
   * ''solid''  - 실선 테두리를 정의합니다.   * ''solid''  - 실선 테두리를 정의합니다.
   * ''double'' - 이중 테두리를 정의합니다.   * ''double'' - 이중 테두리를 정의합니다.
-  * ''groove'' - 그루브 테두리를 정의합니다. +  * ''groove'' - 3D 그루브 테두리를 정의합니다. 
-  * ''ridge''  - 리지 테두리를 정의합니다. +  * ''ridge''  - 3D 리지 테두리를 정의합니다. 
-  * ''inset''  - 인셋 테두리를 정의합니다. +  * ''inset''  - 3D 인셋 테두리를 정의합니다. 
-  * ''outset'' - 아웃셋 테두리를 정의합니다.+  * ''outset'' - 3D 아웃셋 테두리를 정의합니다.
   * ''none''   - 테두리가 나타나지 않습니다.   * ''none''   - 테두리가 나타나지 않습니다.
   * ''hidden'' - 숨겨진 테두리를 정의합니다.   * ''hidden'' - 숨겨진 테두리를 정의합니다.
줄 157: 줄 105:
   * ''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''를 설정하지 않는 경우, 요소의 컬러를 상속받습니다.\\
 \\ \\
 ====예제==== ====예제====
줄 318: 줄 267:
 \\ \\
 또한 단 하나의 테두리에 대해서 테두리 속성을 지정할 수 있습니다.\\ 또한 단 하나의 테두리에 대해서 테두리 속성을 지정할 수 있습니다.\\
-left border\\+===left border===
 <code css> <code css>
 p { p {
줄 325: 줄 274:
 </code>  </code> 
 \\ \\
-Bottom border\\+===Bottom border===
 <code css> <code css>
 p { p {
줄 342: 줄 291:
 } }
 </code> </code>
-\\ 
 \\ \\
 =====CSS Border Properties===== =====CSS Border Properties=====
줄 367: 줄 315:
 | border-top-width     | 위쪽 테두리의 너비를 설정합니다.                       | | border-top-width     | 위쪽 테두리의 너비를 설정합니다.                       |
 | border-width         | 4개 테두리의 너비를 설정합니다.                       | | border-width         | 4개 테두리의 너비를 설정합니다.                       |
 +\\
  
  
 {{tag>오션 CSS background color, image, repeat, attachement, position,}} {{tag>오션 CSS background color, image, repeat, attachement, position,}}
/var/services/web/dokuwiki/data/attic/wiki/css/css_note/css_borders.1614921265.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki