[CSS] 테두리(border) 관련 속성 예시

안녕하세요. 박대리입니다.

 

이번 포스팅에서는 CSS 속성 중 테두리(경계선, border)와 관련된 몇 가지 값들에 대해 알아보겠습니다.

 

CSS 테두리 속성

 

예시로 아래 그림과 같이 티스토리 북클럽 스킨의 사이드바 영역에 테두리를 추가해보았습니다.

 

사이드바 영역 테두리 추가

 

.sidebar .category {

    margin-bottom: 36px;

    border: 2px solid black; }

 

border: 2px solid black; 의 의미는 두께 2px의 검은색 실선으로 테두리를 구성하는다는 의미입니다. 여기서 ‘solid’ 라고 표시한 두 번째 속성값으로 선의 종류들을 변경할 수 있습니다.

 

1. soild : 기본 실선으로 표시

- 상단의 예시처럼 기본 실선으로 표시됩니다.

 

2. dashed : 짧은 직선으로 구성된 점선으로 표시

 

짧은 직선 점선 테두리

 

.sidebar .category {

    margin-bottom: 36px;

    border: 2px dashed black; }

 

3. dotted: 점선으로 표시

 

점선 테두리

 

.sidebar .category {

    margin-bottom: 36px;

    border: 2px dotted black; }

 

4. groove : 액자 테두리처럼 입체적으로 표현

 

입체적 테두리

 

.sidebar .category {

    margin-bottom: 36px;

    border: 10px groove blue; }

 

화면상으로 구분이 될 수 있도록 선 두께와 컬러를 변경하였습니다.

 

5. double : 실선을 겹선으로 표시

 

겹선 테두리

 

.sidebar .category {

    margin-bottom: 36px;

    border: 10px double blue; }

 

이처럼 테두리 스타일 속성 값을 변경하면서 원하는 스타일로 웹사이트의 요소를 구성할 수 있습니다.

 

방문해 주셔서 감사합니다.

 

행복한 하루 보내세요 ^^