Learn HTML & CSS. 9.Borders

Review what I learned

1. 각 태그들을 감싸는 박스의 테두리도 style 할 수 있다.


2. 테두리의 두께는 border-width 속성으로 바꿀 수 있다. pixels 단위를 사용하여 설정하거나 thin, medium, thick 중 한가지를 설정해도 된다. 
   (예. border-width: 5px;    border-width: thick;)
   
   
3. 위와 같이 설정하면 모든 테두리의 두께를 한번에 설정하게 된다. 네 방향 각각의 테두리의 두께를 다르게 하고 싶다면 4개를 설정해주면 된다. (border-width: 3px 1px 2px 1px;) 이는 각각 위, 오른쪽, 아래, 왼쪽 을 가리키며, 위에부터 시계방향으로 알면 된다. 
   
   
4. border-width 를 개별로 설정 할 수 있다. border-방향-width 로 원하는 테두리만 개별로 설정할 수 있다.
   (예. border-top-width: 3px;) ( top, right, bottom, left)


5. 테두리의 style은 border-style 속성으로 바꿀 수 있다. 다음 들 중 한가지를 선택하면 된다.
   solid, dashed, dotted, double, groove, inset, outset, ridge, hidden or none


6. 테두리의 색은 border-color 속성으로 바꿀 수 있다.


7. 테두리의 두께, style, 색을 각각 설정하는 것은 코드량을 늘린다. 그래서 border 속성을 이용해 효율적으로 속성을 한번에 설정할 수 있다.


8. 박스들의 테두리가 꼭 직사각형일 필요는 없다. border-radius 속성을 통해 각 꼭지점들을 둥글게 할 수 있다. (또한 100% 로 설정시 완전한 원 이 된다.
   

출처 : codecademy(HTML & CSS)