CSS 사용법
CSS 문법
클래스와 아이디
주석
텍스트
color
direction
backgroud-color
line-height
letter-spacing
text-align
text-decoration
text-indent
word-spacing
배경
background-color
background-image
background-repeat
background-position
background-attachment
Font
크기 단위
Box Model
경계선(border)
리스트(list)
CSS Box Model - 경계선(border)

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 스타일의 경계선

Copyright © Homejjang.com All rights reserved.