Css #6 - border

테두리를 만드는 border

테두리 관련 css속성은 사각 형태를 가진 모든 요소에 다양하게 적용할 수 있다.
테두리 두께(border-width), 테두리 스타일(border-style),테두리 색상(border-color)를 테두리 속성이라고 한다.

border-style

    1. none ★ : 테두리가 나타나지 않는다. 기본 설정.
    2. hidden : 테두리가 나타나지 않는다. border-collapese : collapes ; 일 때 
        다른 테두리도 모두 표시되지 않는다.
    3. dashed △ : 테두리를 직선 형태의 점선으로 표시함.
    4. dotted △: 테두리를 도트 점선으로 표시함.
    5. double : 테두리를 이중 실선으로 표시함.
    6. groove : 테두리를 입체적으로 표시함.
    7. inset  : 테두리를 안쪽 형태로 굵게 표시함. 입체적으로 보인다.
    8. outset : 테두리를 바깥쪽 형태로 굵게 표시함. 입체적으로 보인다.
    9. ridge  : 테두리를 창에서 튀어나오는 것처럼 표시함.
    10. solid ★ : 테두리를 실선으로 표시한다. 제일 많이 쓰는 속성!!! 

★ border에 동일한 두께와 색상, 스타일을 사방에 적용하고 싶을 때

    border : 두께 스타일 색상;
    ex) borer: 3px solid #000 ;

★ 박스의 일부분에 border를 적용할 경우

    1. border-top : 두께 스타일 색상 ;      - 박스의 위에만 border를 적용한다.
    2. border-left :  두께 스타일 색상 ;    - 박스의 왼쪽에만 border를 적용한다.
    3. border-bottom : 두께 스타일 색상 ;   - 박스의 아래에만 border를 적용한다.
    4. border-right : 두께 스타일 색상 ;    - 박스의 오른쪽에만 border를 적용한다.              
    

박스를 둥글게 만드는 border-radius

• 박스의 모서리 부분을 둥글게 만들어주는 속성.
• border-radius는 값을 적용할 때 1개만 선언하면 모든 둥글기가 동일하게 적용된고, 2개로 구분하여 선언하면 대각선으로 적용된다. 또한 값을 4개로 구분하면 각 모서리마다 다른 둥글기를 적용할 수 있다.
  1. 값이 한 개 일 때 : border-radius : 값;
  2. 값이 두 개 일 때 : border-radius : top-left/bottom-right top-right/bottom-left ;
  3. 값이 네 개 일 때 : border-radius : top-left top-right bottom-right bottom-left ;