7장에 이어서 border(테두리) 스타일을 자세히 알아보겠습니다.
p {
border: 5px solidred;}
span {
border: 1px dotted#0000ff;}
margin의 위쪽-오른쪽-아래쪽-왼쪽 순서는 고정값이므로 순서를 꼭 지켜야 합니다.
하지만 border 순서는 중요하지 않습니다.
그래도 전 세계적으로 약속된 coding convention(코딩 규칙)에 따라 순서를 맞춰주는 것이 좋습니다.
선 스타일의 종류입니다.
이 중에 거의 solid만 사용하지만, 다양한 스타일이 있다는 것만 알아두시면 좋겠습니다.
선 또한 윗 선, 오른쪽 선, 아래 선, 왼쪽 선 등 다양하게 스타일을 줄 수 있습니다.
blockquote {
border-top: 4px doublered; border-right: 2px solid#666666; border-bottom: 6px dasheddarkviolet; border-left: 1px dotted#00ee44;}
하지만, 이런식으로 다양하게 border 디자인을 하지 않습니다.
대신에 테두리를 분리하여 스타일할 경우는 많이 있습니다.
p {
text-decoration: underline;
}
위의 p태그에 밑줄을 쳐주는 스타일입니다.
그런데 밑줄의 두께나 색깔 등, 완벽하게 커스터마이징 하기가 어렵습니다.
이럴 때는 border-bottom으로 내가 원하는 스타일로 밑줄을 칠 수 있습니다.
css 문법으로 볼 때는 밑줄이 아니라 아래쪽 테두리이지만
내가 원하는대로 디자인할 수 있으니 대부분의 개발자는 border-bottom로 구현하는 것을 선호합니다.
출처 : wecode