HTML 10강 - border(테두리 설정)

🔆border(테두리)

테두리에는 기본적으로 3가지 종류가 있다.

1. 바깥쪽 여백 - margin
해당 속성이 차지하고 있는 공간의 외부 테두리

2. 테두리
해당 속성의 외곽선

3. 테두리 안쪽 여백 - padding
해당 속성이 차지하고 있는 공간의 내부 테두리


🔆border의 속성

📌두께(width)
테두리의 두께로, 주로 px단위를 사용한다.
📌스타일(style)
테두리의 스타일로 실선,점선, 이중선 등 다양한 옵션이 존재한다.
📌색상(color)
테두리의 색상으로, 값은 color속성의 포맷을 사용한다.
📌방향(top bottom left right)
border : 1px(모든 방향에 1px씩)
border : 1px(상하) 1px(좌우) 각각 1px씩 적용
border : 1px(상) 1px(우) 1px(하) 2px(좌) 시계방향으로 스타일이 적용된다.

예시를 보고 어느 스타일에 어떤게 적용되어있는지 참고해보세요

See the Pen Untitled by 이선로 (@ttxvrsis-the-animator) on CodePen.