border 스타일링

border 스타일의 종류를 알아보자

일단 앞에서 내가 배웠던 solid(직선)으로 border를 만들어 보겠다

<style>

      div {

        border: 3px solid red;

        width: 50px;

        height: 50px;

        margin: 10px;

      }

    </style>

3px 두께의 solid(직선)인 red(빨간색)의 border선이

넓이 50px

높이 50px

margin 값은 10px 로 적용해보면

그러면 내가 지정한 값으로 border 가 만들어진걸 볼 수 있다

 

  border: 3px solid red;

이 border란 속성을 세분화 하면

/* border: border-width, border-style, border-color */

이 순서대로 세분화가 되어있다

 border-width: 3px;

        border-style: solid;

        border-color: red;

이것이

  border: 3px solid red;

이것과 같은 것이다

 

이제 각종 border 스타일들을 보자

 

 

dashed 스타일

  div {

        /* border: 3px solid red; */

        border-width: 3px;

        border-style: solid;

        border-color: red;

        width: 50px;

        height: 50px;

        margin: 10px;

      }

      .dashed {

        border-style: dashed;

      }

dashed 스타일을 확인해 보자

이렇게 점선이 나온다

 

 

dotted 스타일

 .dotted {

        border-style: dotted;

      }

 

solid 스타일

 .solid {

        border-style: solid;

      }

double 스타일

.double {

        border-style: double;

      }

groove 스타일

.groove {

        border-style: groove;

      }

ridge 스타일

.ridge {

        border-style: ridge;

      }

inset 스타일

.inset {

        border-style: inset;

      }

outset 스타일

.outset {

        border-style: outset;

      }

이렇게 종류가 다양하다고 한다

 

요기서 나는 border-width : 값에 px로만 지정해서 두께를 지정해 줬었는데

두께를 정해주는 값이 있다고 한다

/* 두께 */

      .thin {

        border-width: thin;

      }

      .medium {

        border-width: medium;

      }

      .thick {

        border-width: thick;

      }

thin = 얇은

medium = 중간

thick = 두꺼운

뜻이다 각각 브라우저마다 정해진 값에따라 간다고 한다

 

예를 들어서

<div class="solid thick"></div>

solid 이면서 thick 이라는 값을 줬다 

그러면 직선이면서 두꺼운 border가 나올것이다

 <div class="solid thin"></div>

    <div class="solid medium"></div>

    <div class="solid thick"></div>

이렇게 크기 순서대로 태그를 작성해 봤다

위에서 아래로 순서대로 thin, medium, thick 이다

이렇게 px단위가 아닌 정해진 단어로도 크기를 지정할 수 있다

 

 

border-radius 값

radius 는 반지름,반경 이라는 뜻이다

 .radius {

        border-radius: 10px;

      }

이렇게 border-radius: 값을 10px로 주면

 <div class="solid radius"></div>

이렇게 모서리부분(꼭지점)이 둥글게 변하는걸 볼 수 있다