9. Border

1. Border

border(테두리)는 앞에 8장에서 잠깐 나온 스타일 입니다.

p {
  border: 5px solid red;
}

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

border: 두께 선스타일 선색깔;

 

위와 같이 코딩하시면 됩니다.

 

선 스타일의 종류입니다.

• 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 디자인을 하지 않습니다.

 

대신에 테두리를 분리하여 스타일할 경우는 많이 있습니다.

결과 화면을 보니 정말 못 생겼네요.

이런식으로 다양하게 border 디자인을 하지 않습니다.

 

대신에 테두리를 분리하여 스타일할 경우는 많이 있습니다.

p {
   text-decoration: underline;
}

위의 p태그에 밑줄을 쳐주는 스타일입니다.

그런데 밑줄의 두께나 색깔 등, 완벽하게 커스터마이징 하기가 어렵습니다.

이럴 때는 border-bottom으로 내가 원하는 스타일로 밑줄을 칠 수 있습니다.

css 문법으로 볼 때는 밑줄이 아니라 아래쪽 테두리이지만

내가 원하는대로 디자인할 수 있으니 대부분의 개발자는 border-bottom로 구현하는 것을 선호합니다.