CSS 테두리 종류 (border-style)의 종류에 대하여 알아보겠습니다.
:nth-of-type(n){} 등의 태그를 통하면 간단하게 여러 태그에 CSS 테두리 종류 border-style 속성을 이용하여 테두리를 적용시켜볼 수 있습니다.
일단 태그 적용 전 기본적으로 쓰이는 간단한 속성 8가지를 간단히 확인해보고html과 css로 적용해 보겠습니다.
css 테두리 종류 속성(border-style)
solid, dotted, groove, double, inset, outset, dashed, ridge 등이 있습니다.
<body>
<div>
<p>solid</p>
<p>dotted</p>
<p>groove</p>
<p>double</p>
<p>inset</p>
<p>outset</p>
<p>dashed</p>
<p>ridge</p>
</div>
</body>Code language: HTML, XML (xml)위 코드처럼 간단히 구현해 css를 적용해 보겠습니다.
아래 코드를 html문서에서 조회하면 아래와 같은 형태입니다.
solid
dotted
groove
double
inset
outset
dashed
ridge
div에 속해있는 p태그 전체에게 테두리와 크기를 기본적으로 주고,
p태그 각각을 선택하여 border-style 속성만 다르게 주어 css로 적용할 수 있는 CSS 테두리 종류를 확인해 보겠습니다.
div p{
width:100px; height:50px;
border-width:5px;
border-color:#f00;
/* 안에 들어있는 스타일명 가운데 정렬*/
text-align: center;
line-height: 50px;
}
div p:nth-of-type(1){border-style:solid;}
div p:nth-of-type(2){border-style:dotted;}
div p:nth-of-type(3){border-style:groove;}
div p:nth-of-type(4){border-style:double;}
div p:nth-of-type(5){border-style:inset;}
div p:nth-of-type(6){border-style:outset;}
div p:nth-of-type(7){border-style:dashed;}
div p:nth-of-type(8){border-style:ridge;}Code language: CSS (css)div의 자식 요소인 p태그를 순서대로 선택해 준 뒤 border-style만 입력합니다.
만약 CSS 테두리 종류를 확인하고 싶을 경우, 아래 border-style을 기재하지 않고 위 태그만 입력한 경우 아무것도 보이지 않습니다.
테두리 스타일(border-style)을 지정하지 않았을 경우 border-color, border-width을 지정했음에도 아무것도 보이지 않게 됩니다.
CSS 테두리 종류를 확인하려고 할 때, border-style이 정상적으로 적용되었을 경우 아래와 같은 화면을 볼 수 있습니다.
CSS 테두리 종류 설명
border-style:solid; 기본 선
border-style:dotted; 도트 선(동그라미로 이루어진 점선)
border-style:dashed; 점선
부터
border-style:ridge; 액자 모양 그림자 선, groove와 서로 반대됩니다. 튀어나온 것처럼 보이는 것이 특징입니다.