테두리 속성
테두리에 관련된 속성은 block속성을 가진 모든 태그에 사용할 수 있다.
테두리 속성은 테두리 두께(border-width), 테두리 스타일(border-style),
테두리 색상(border-color)를 테두리 속성이라고 하며 이 중 하나라도 없으면
브라우저에 테두리가 나타나지 않는다.테두리 스타일
1. none★ : 테두리가 나타나지 않는다. 기본값.
2. hidden : 테두리를 나타내지 않는다. border-collapse가 collapse로 설정되어 있을 경우
다른 테두리도 표시하지 않는다.
3. dashed△ : 테두리를 직선형태의 점선으로 표시한다.
4. dotted△ : 테두리를 도트 형태의 점선으로 표시한다.
5. double : 이중 실선으로 테두리를 나타낸다.
6. groove : 테두리를 입체적으로 보여준다.
7. inset : 테두리를 안쪽으로 들어간 액자처럼 보여준다.(입체)
8. outset : inset의 반대 모양으로 나타낸다.(입체)
9. ridge : 테두리를 창에서 튀어나오는 것처럼 보여준다. groove의 반대모양.
10. solid★ : 테두리를 실선으로 나타낸다.[기본형]
1. border : 두께 스타일 색상;
-> 박스의 사방에 동일한 테두리를 적용한다.
2. border-top : 두께 스타일 색상;
-> 박스의 위쪽에 테두리를 적용한다.
3. border-bottom : 두께 스타일 색상;
-> 박스의 아래쪽에 테두리를 적용한다.
4. border-left : 두께 스타일 색상;
-> 박스의 왼쪽에 테두리를 적용한다.
5. border-right : 두께 스타일 색상;
-> 박스의 오른쪽에 테두리를 적용한다. border-radius : 박스를 둥글게 만드는 속성
UI요소를 디자인할 때 박스의 모서리를 둥글게 디자인하는 경우가 있다.
이때 border-radius속성을 이용하면 박스를 둥글게 만들 수 있다.
border-radius를 각 모서리마다 다른 값을 주고 싶을 때 값을 4개로 나눠 적용한다.
첫번째 값은 왼쪽 상단 모서리(top-left)를 시작으로 시계방향으로 적용된다.
border-radius의 값을 두 개로 나눠 적을 경우
앞에 있는 자리는 왼쪽상단-오른쪽 하단의 자리이고
두 번째 자리는 오른쪽상단-왼쪽 하단의 자리로, 대각선으로 둥글기가 적용된다.[기본형]
border-radius : 숫자px 또는 %;
border-radius : 값1 값2 값3 값4;
border-radius : 값1 값2;
Hi