스타일 시트(테두리) 오산대학 컴퓨터정보과 김 영 권
테두리 형태를 지정하는 속성(border-style) (4-27.htm) <HTML> <HEAD> <TITLE> List Style </TITLE> <style type="text/css"> <!-- p.none {border-style:none} p.dotted {border-style:dotted} p.dashed {border-style:dashed} p.solid {border-style:solid} p.double {border-style:double} p.groove {border-style:groove} p.ridge {border-style:ridge} p.inset {border-style:inset} p.outset {border-style:outset} p{background-color:#FFFF99 ;color:#000066;font-size:15pt; width:300px; height:20px} --> </style> </HEAD>
테두리 형태를 지정하는 속성(border-style) (4-27.htm) <BODY> <CENTER> <p class="none" align=center>none</p> <p class="dotted" align=center>dotted</p> <p class="dashed" align=center>dashed</p> <p class="solid" align=center>solid</p> <p class="double" align=center>double</p> <p class="groove" align=center>groove</p> <p class="ridge" align=center>ridge</p> <p class="inset" align=center>inset</p> <p class="outset" align=center>outset</p> </CENTER> </BODY> </HTML>
테두리 형태를 지정하는 속성(border-style) (4-27.htm) 실행결과
테두리의 색상을 지정하는 속성(border-color) (4-28.htm) <HTML> <HEAD> <TITLE> List Style </TITLE> <style type="text/css"> <!-- p.border1 {border-color:blue} p.border2 {border-color:yellow green} p.border3 {border-color:blue gray green yellow} p {border-style:solid ;background-color:pink;font-size:15pt;} --> </style> </HEAD>
테두리의 색상을 지정하는 속성(border-color) (4-28.htm) <BODY> <p class="border1"> border color 에 하나의 색만 지정했을 경우입니다. 4방향의 외곽선 모두가 한가지 색으로 적용됩니다. </p> <br> <p class="border2"> border color 에 2개의 색을 지정했을 경우입니다. 4방향의 외곽선 중 첫 번째 색은 상하에 두 번째 색은 값은 좌우에 적용됩니다. <p class="border3"> 4방향의 외곽선 중 top, right, bottom, left 순으로 색이 적용됩니다. </BODY> </HTML>
테두리의 색상을 지정하는 속성(border-color) (4-28.htm) 실행결과
테두리의 두께를 지정하는 속성(border-방향-width) (4-29.htm) <HTML> <HEAD> <TITLE> List Style </TITLE> <style type="text/css"> <!-- p.border {background-color:green ; border-style:outset ; border-color:blue ; border-top-width:thin ; border-right-width:medium ; border-bottom-width:thick ; border-left-width:10px; } p {color:white;font-size:15pt} --> </style> </HEAD>
테두리의 두께를 지정하는 속성(border-방향-width) (4-29.htm) <BODY> <p class="border"> border style이 적용된 예제입니다.<br> border-top-width:thin은 위쪽 외곽선의 두께가 얇은 선으로 지정되고<br> border-right-width:medium은 오른쪽 외곽선의 두께가 중간 굵기로 지정되고<br> border-bottom-width:thick은 아래쪽 외곽선의 두께가 두꺼운 굵기로 지정되고<br> border-left-width:1px;는 왼쪽 외곽선의 굵기가 10px로 지정된 예입니다.<br> </p> </BODY> </HTML>
테두리의 두께를 지정하는 속성(border-방향-width) (4-29.htm) 실행결과
테두리의 두께를 한번에 지정하는 속성(border-width) (4-30.htm) HTML> <HEAD> <TITLE> List Style </TITLE> <style type="text/css"> <!-- p.border1 {background-color:green ; border-style:outset ; border-color:blue ;border-width:thick} p.border2 {background-color:blue ; border-style:outset ; border-color:red ;border-width:thick thin} p.border3 {background-color:red ; border-style:outset ; border-color:blue ;border-width:thick thin medium thin} p {color:white;font-size:15pt} --> </style> </HEAD>
테두리의 두께를 한번에 지정하는 속성(border-width) (4-30.htm) <BODY> <p class="border1"> border width에 하나의 두께가 하나만 지정했을 경우입니다. 4방향의 외곽선 두께가 모두 같게 적용됩니다. </p> <br> <p class="border2"> border width에 두 개의 두께를 지정했을 경우입니다. 4방향의 외곽선 중 첫 번째 두께는 상하에 두 번째 두께는 좌우에 적용됩니다. <p class="border3"> border width에 4개의 두께를 지정하였을 경우입니다. 4방향의 외곽선 중 top, right, bottom, left 순으로 두께가 적용됩니다. </BODY> </HTML>
테두리의 두께를 한번에 지정하는 속성(border-width) (4-30.htm) 실행결과