css border
■ HTML 웹 문서에서 강조하고 싶거나 보기 좋게 구분하기 위해서 그림이나 단락 등의 요소에 테두리를 그려줄 수 있는데요. css의 border 속성을 이용하면 됩니다. 이번 글에서는 테두리 속성인 css border에 대해서알아보겠습니다. 테두리 속성에는 일단 선의 종류가 있을 거고 선의 두께, 마지막으로 선의 색깔 정도를 설정해주면 되겠죠?
먼저 border-style에 해당하는 선의 종류부터 정리해볼게요.
none |
테두리 없음 |
hidden |
테두리가 나타나지 않음 |
dotted |
점선 |
dashed |
큰 점선 |
solid |
실선 |
double |
이중선 |
groove |
홈이 파인듯한 창틀 모양 |
ridge |
튀어 나온듯한 창틀 모양 |
■ 일반적으로 실선을 많이 사용하지만, 다른 선들은 속성값에 직접 넣어서 확인해보시구요. 여기서는 큰 점선(dashed)을 그려보겠습니다.
border 속성을 적용할 때는 테두리 선의 종류와 두께를 함께 입력해줘야 선이 나타납니다. 둘 중 하나만 입력하면 선이 안 보여요. 참고하시구요. 선의 두께는 border-width입니다. 이 두 가지 속성을 적용해서 테두리를 만들어보겠습니다.
▲ 예제는 본문에 박스(div)를 만들고 그 안에 텍스트를 입력했습니다. 먼저 이 상태로 브라우저에서 출력해볼게요.
▲ 지금은 테두리(border) 속성을 적용하지 않았기 때문에 테두리가 전혀 보이지 않습니다. 이제 하나씩 적용해보게요.
▲ 먼저 border-width 속성을 2px로 적용해봤는데요. 앞에서 잠깐 언급했지만, border의 두께(width)와 함께 선의 종류를 선택해줘야 선이 보입니다. 여기서는 실선(solid)를 적용해볼게요.
▲ border-style(테두리 선의 종류)에 dashed(큰 점선)을 적용해봤습니다. (나머지 선도 직접 입력해보셔요.)
▲ 이렇게 선의 두께와 종류를 입력해야 비로소 선이 타나나 게 됩니다. 이제 border-color 속성을 이용해서 이 선의 색을 바꿔보겠습니다.
▲ 테두리 선의 색깔을 빨간색으로 설정 해봤습니다.
▲ 이렇게 해서 2px 두께의 빨간색 큰 점선이 그려지게 되는데요. 예제에서 border의 속성 style, width, color를 따로 작성했지만, 이것들을 한 번에 묶어서 지정할 수 있구요. 순서는 어떤 걸 먼저 하던 관계없습니다.
[border : red dashed 2px;] 로 속성값을 지정해도 이 예제와 똑같은 결과를 보시게 됩니다. 참고하셔서 직접 입력해서 확인해보셔요. 수고하셨습니다.
