HTML 스타일 지정: CSS 테두리

3634 단어
CSS 테두리 소개

CSS 테두리는 색상, 너비 및 유형과 같은 HTML 요소의 가장자리 스타일을 지정할 수 있는 속성입니다.

테두리 스타일

테두리 스타일 속성을 사용하면 원하는 테두리 유형을 선택할 수 있습니다. 다음은 사용할 수 있는 스타일입니다.
  • 점선 - 점선 테두리를 정의합니다
  • .
  • dashed - 파선 테두리를 정의합니다
  • .
  • solid - 솔리드 테두리를 정의합니다
  • .
  • double - 이중 테두리를 정의합니다
  • .
  • 그루브 - 3D 그루브 테두리를 정의합니다.
  • 능선 - 3D 능선 테두리를 정의합니다.
  • 삽입 - 3D 삽입 테두리를 정의합니다.
  • outset - 3D outset 테두리를 정의합니다.
  • 없음 - 테두리를 정의하지 않습니다
  • .
  • hidden - 숨겨진 테두리를 정의합니다
  • .

    테두리 스타일의 예

    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;}
    


    테두리 색상

    Border-color는 HTML 요소 테두리의 색상을 지정할 수 있는 CSS 속성입니다.

    테두리 색상은 다음 4가지 방법으로 설정할 수 있습니다.
  • 색상 이름: 색상 이름을 지정합니다. 예: "그린"
  • 16진수 값: 16진수 값을 지정합니다. "#f4f4f4"
  • RGB: RGB 값을 지정합니다. 예: "rgb(255, 99, 71)"
  • transparent : 투명하게 설정하여

  • 국경 쪽

    일반적으로 테두리는 왼쪽, 오른쪽, 위, 아래 4면으로 설정할 수 있습니다.
    그러나 CSS는 HTML 요소의 개별 테두리 측면의 스타일을 지정하는 데 사용할 수 있는 속성을 제공합니다.

    의 예

    p {
           border-color : blue;
               border-top-style: dotted;
        }
    
        p {
           border-color : blue;
           border-right-style: solid;
        }
    
        p {
           border-color : blue;
           border-bottom-style: dotted;
        }
    
        p {
           border-color : blue;
           border-left-style: solid;
        }
    


    *국경 속기 *

    모든 주요 언어와 마찬가지로 CSS를 사용하면 테두리 속성을 사용할 때 속기를 사용할 수 있습니다.
    보시다시피 테두리를 사용할 때 고려해야 할 많은 속성이 있습니다. 그러나 코드가 단축되면 "border"속성을 사용하여 하나의 속성에서 테두리 스타일을 지정할 수 있습니다.
    "border-left", "border-right", "border-top"또는 "border-bottom"을 사용하여 한 면의 스타일을 지정할 수도 있습니다.

    예시

    p {
           border: 3px dotted blue;
          }
    
        p {
           border-left: 5px solid blue;
          }
    
        p {
           border-right: 5px solid blue;
          }
    
         p {
            border-top: 5px solid blue;
           }
    
         p {
            border-bottom: 5px solid blue;
           }
    


    둥근 테두리

    테두리에 둥근 모서리를 추가하기 위해 CSS에는 "border-radius"를 사용하여 수행할 수 있는 속성이 있습니다.

    예시

    p {
            border: 3px solid blue;
            border-radius : 7px
          }
    


    모든 CSS 테두리 속성
  • border : 하나의 선언에서 모든 테두리 속성을 설정합니다
  • .
  • border-bottom : 하나의 선언에서 모든 아래쪽 테두리 속성을 설정합니다
  • .
  • border-bottom-color : 아래쪽 테두리의 색상을 설정합니다
  • .
  • border-bottom-style : 아래쪽 테두리의 스타일을 설정합니다
  • .
  • border-bottom-width : 아래쪽 테두리의 너비를 설정합니다
  • .
  • border-color : 네 개의 테두리 색상을 설정합니다
  • .
  • 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 : 네 개의 테두리 너비를 설정합니다
  • .

    좋은 웹페이지 즐겨찾기