html & css/개념

Border 스타일링

Doo Hee 2023. 11. 18. 19:21 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* border */
      /* border-top, border-right, border-bottom, border-left */
      /* border: 5px -> 4면 모두 5px */
      /* border: 5px 10px -> top, bottom은 5px, right, left는 10px */
      /* border 5px 10px 7px -> top은 5px, right, left는 10px, bottom은 7px */
      /* border 5px 10px 7px 8px -> top, right, bottom, left 순으로 지정*/

      div {
        /* border: 3px solid red; */
        border-width: 3px;
        /* border-style: solid; */
        border-color: red;
        width: 50px;
        height: 50px;
        margin: 10px;
      }

      .dashed {
        border-style: dashed;
      }

      .dotted {
        border-style: dotted;
      }

      .solid {
        border-style: solid;
      }

      .double {
        border-style: double;
      }

      .groove {
        border-style: groove;
        /* 테두리가 파인 것처럼 보인다. */
      }

      .ridge {
        border-style: ridge;
        /* 테두리가 튀어나온 것처럼 보인다. */
      }

      .inset {
        border-style: inset;
        /* 요소가 파인 것처럼 보인다. */
      }

      .outset {
        border-style: outset;
        /* 요소가 튀어나온 것처럼 보인다. */
      }

      /* 두께 */
      .thin {
        border-width: thin;
      }

      .medium {
        border-width: medium;
      }

      .thick {
        border-width: thick;
      }

      .radius {
        border-radius: 10px;
        /* 4개의 모서리에 대해서 둥근 모양을 만들 수 있게 해준다. */
      }

      /* border: border-width, border-style, border-color */
    </style>
  </head>
  <body>
    <div class="dashed"></div>
    <div class="dotted"></div>
    <div class="solid radius"></div>
    <div class="double"></div>
    <div class="groove"></div>
    <div class="ridge"></div>
    <div class="inset"></div>
    <div class="outset"></div>
    <div class="solid thin"></div>
    <div class="solid medium"></div>
    <div class="solid thick"></div>
  </body>
</html>