CSS - 8. Border

1. Border

border(테두리) 스타일

p {
  border: 5px solid red;
}

span {
  border: 1px dotted #0000ff;
}

위 코드의 뜻은 

border: 두께 선스타일 선색깔;이다. 앞서 봤던 margin의 순서는, 순서대로 확정이지만 border순서는 중요하지 않다. 그래도 전 세계적으로 약속된 coding convention(코딩 규칙)에 따라 순서를 맞춰주는 것이 좋다. 

선 스타일의 종류는 dotted / dashed / solid / double / groove / ridge / inset / outset 등이 있다.

이 중에 거의 solid를 사용한다.

선 또한 윗 선, 오른쪽 선, 아래 선, 왼쪽 선 등 다양하게 스타일을 줄 수 있다.

blockquote {
  border-top: 4px double red;
  border-right: 2px solid #666666;
  border-bottom: 6px dashed darkviolet;
  border-left: 1px dotted #00ee44;
}

하지만 이런식으로 다양하게 border 디자인하지 않는다. 대신 테두리를 분리하여 스타일할 경우는 많이 있다.

p {
   text-decoration: underline;
}

위 코드는 밑줄을 쳐주는 스타일이다. 그런데 밑줄의 두께나 색깔 등, 완벽하게 커스터마이징이 하기가 어렵다. 이럴 때는 border-bottom으로 내가 원하는 스타일로 밑줄을 칠 수가 있다. css 문법상으로는 밑줄이 아니라 아래쪽 테두리지만 내가 원하는 대로 디자인할 수 있으니 대부분의 개발자는 border-bottom으로 구현하는 것을 선호한다.