[CSS] 테두리 스타일 지정

테두리 스타일은 점선인지 실선인지 뿐만 아니라 테두리 두께와 색상을 지정할 수 있다. 또한 네 방향 모두 각각 다르게 사용하는 등의 다양한 스타일을 지정할 수 있다.

 

박스 모델의 방향

박스 모델은 상하좌우 4개의 방향이 있어서 테두리나 마진, 패딩 등을 지정할 때 모두 한번에 똑같이 지정하거나, 다르게 지정할 수 있다. 

맨 윗부분은 top, 오른쪽은 right, 아랫부분은 bottom, 왼쪽은 left 라고 부른다.

 

---

 

border-style : 테두리 스타일 지정

기본값이 none이므로 속성값을 따로 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않는다.

만약 테두리 스타일을 4개 방향 모두 다르게 지정하고 싶다면 border와 style 사이에 상하좌우 방향을 넣고 하이픈( - )으로 연결하면 된다. ex) border-top-style

• none : 테두리가 없다. (기본값)
• hidden : 테두리를 감춘다. 표에서 border-collapse: collapse일 경우 다른 테두리도 표시되지 않는다.
• solid : 테두리를 실선으로 표시한다.
• dotted : 테두리를 점선으로 표시한다.
• dashed : 테두리를 짧은 직선으로 표시한다.
• double : 테두리를 이중선으로 표시한다. 두 선 사이의 간격이 border-width값이 된다.
• groove : 테두리를 창에 조각한 것처럼 표시한다. 홈이 파인 듯 입체 느낌이 난다.
• ridge : 테두리를 창에서 취어나온 것처럼 표시한다.
• inset : 표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에 박혀 있는 것처럼 표시되고,
  표에서 border-collapse: collapse일 경우 groove와 똑같이 표시된다.
• outset : 표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에서 튀어나온 것처럼 표시되고,
  표에서 border-collapse: collapse일 경우 ridge와 똑같이 표시된다.

 

 

border-width : 테두리 두께 지정

border-width: <크기> | thin | medium | thick

 

테두리 두께를 지정할 때는 1px이나 5px처럼 크기를 직접 입력할 수도 있고 thin이나 medium, thick 같은 예약어 중에서 선택할 수도 있으며 thin < medium < thick 순으로 두꺼워진다. 

만약 테두리 두께를 4개 방향 모두 다르게 지정하고 싶다면 border와 width 사이에 상하좌우 방향을 넣고 하이픈( - )으로 연결하면 된다.

border-width 속성을 사용해서 상하좌우 4개 방향의 테두리 두께를 한꺼번에 지정할 수 있는데, 이때 값을 1개에서 4개까지 각각 다르게 지정할 수 있다.

 

  <style>
    #box1 { border-width:2px; }
    #box2 { border-width:thick thin; }
    #box3 { border-width:thick thin thin; }
    #box4 { border-width:10px 5px 5px 10px; }
  </style>

• box1 : 속성값이 1개일 경우 4개 방향 테두리 모두 같은 값이 적용된다.
• box2 : 속성값이 2개일 경우 첫 번째 값(thick)이 top, bottom 테두리의 값이 되고,
  두 번째 값(thin)이 left, right 테두리의 값이 적용된다.
• box3 : 속성값이 3개일 경우 순서대로 top → right → bottom의 속성값이 되고,
  마지막 left의 속성값은 마주보는 right 속성값과 똑같이 적용된다.
• box4 : 속성값이 4개일 경우 순서대로 top → right→ bottom→ left의 값이 적용된다.

 

 

border-color : 테두리 색상 지정

4개 방향의 테두리 색상을 한꺼번에 지정할 수도 있고, border와 color사이에 상하좌우 방향을 넣고 하이픈( - )으로 연결하여 하나씩 지정할 수도 있다.

 

<style>
  #box1 { border-color:red; }  
  #box2 { 
    border-top-color:blue; 
    border-left-color:red;  
  } 
</style>

 

 

boder : 테두리 스타일 묶어서 지정 

테두리의 스타일, 두께, 색상을 한꺼번에 표현한다.

border속성만을 사용해서 4개 방향의 테두리 스타일을 같게 지정할 수도 있고, border뒤에 하이픈( - ) 을 넣고 상하좌우 방향을 입력하여 다르게 지정할 수도 있다.

 

<style>
  h1 {
    padding-bottom: 5px;
    border-bottom: 3px solid rgb(75, 70, 70);
  }
  p {
    padding: 10px;
    border: 3px dotted blue; 
  }
</style>
...

 

 

border-radius : 둥근 테두리 만들기

border-radius: <크기> | <백분율>

 

테두리의 꼭짓점 부분에 원이 있다고 가정해서 둥글게 처리하는 속성으로, 원의 반지름(radius)을 이용하여 둥근 정도를 나타낼 수 있다.

테두리를 원 형태로 만들고 싶을 때는 너비와 높이를 똑같이 만든 후 border-radius의 반지름 값을 너비나 높이의 50%로 지정하면 된다.

• 크기 : 반지름 크기를 px, em의 단위와 함께 수치로 표시
• 백분율 : 현재 요소의 크기를 기준으로 비율(%)로 지정

꼭짓점 4개를 모두 다르게 지정하고 싶다면 border와 radius 사이에 위치를 나타내는 예약어를 넣어 사용할 수 있다.

윗부분 왼쪽은 top-left, 윗부분 오른쪽은 top-right, 아랫부분 왼쪽은 bottom-left, 아랫부분 오른쪽은 bottom-right 라고 한다.

<style>
  #round1 {
    border:2px solid blue;
    border-top-left-radius:20px;  
    border-top-right-radius:20px;  
  }    
</style>

 

타원형의 테두리를 만들고 싶다면 반지름 대신 타원의 가로 반지름값과 세로 반지름값을 넣어주면 된다.

이때 가로 반지름과 세로 반지름 사이에 슬래시( / )를 넣어 구분하고, 특정한 꼭짓점만 타원 형태로 만들고 싶다면 슬래시 없이 지정한다.

 

border-radius: <가로 반지름> / <세로 반지름> ;

border-위치-radius: <가로 반지름> <세로 반지름> ;

 

<style>
  .round1{
    border-radius : 50px/30px; 
  }
  .round2{
    border-bottom-right-radius : 50% 30%; 
  }
  .round3{
    border-top-left-radius: 50px 30px; 
  }
  .round4{
    border-bottom-left-radius: 30px;  
  }
</style>

• .round1 : 네 군데 꼭짓점을 똑같은 크기로 라운딩
• .round2 : 오른쪽 아래 꼭짓점을 가로 50%, 세로 30% 크기로 라운딩
• .round3 : 왼쪽 위 꼭짓점을 가로 50px, 세로 30px 크기로 라운딩
• .round4 : 값이 하나 뿐이면 가로 세로 똑같이 30px 크기로 라운딩