border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다.
| <p style="border:1px gray solid;">border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다.</p> |
위와 같이 지정하면 1px의 gray 색상을 가진 경계선이 표시됩니다.
|
border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다. |
border:1px gray solid 에서 1px은 경계선을 굵기를 지정하고, gray는 경계선의 색상을 지정합니다. 마지막에 있는 solid는 경계선을 스타일을 지정합니다.
이를 하나씩 분리하여 지정할 수도 있습니다.
| <p style="border-width:1px; border-color:gray; border-style:solid;">border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다.</p> |
border-style 속성값으로는 solid 외에 dotted, dashed, double 등이 있습니다.
화면상에 구분이 잘되게끔 border-width를 2픽셀로 지정해보겠습니다.
<p style="border-width:2px; border-color:gray; border-style:solid;">solid 스타일의 경계선</p> <p style="border-width:2px; border-color:gray; border-style:dotted;">dotted 스타일의 경계선</p> <p style="border-width:2px; border-color:gray; border-style:dashed;">dashed 스타일의 경계선</p> <p style="border-width:2px; border-color:gray; border-style:double;">double 스타일의 경계선</p> |
|
solid 스타일의 경계선
dotted 스타일의 경계선
dashed 스타일의 경계선
double 스타일의 경계선 |