03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자.
이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2
01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width border-right-width border-top-width 전체테두리의두께를지정테두리왼쪽의두께를지정테두리오른쪽의두께를지정테두리위쪽의두께를지정 테두리의두께지정 thin, medium, thick, 픽셀 border-bottom-width 테두리아래쪽의두께를지정 border-color border-left-color border-right-color border-top-color border-bottom-color border-style border-left-style border-right-style border-top-style border-bottom-style 전체테두리의색상을지정테두리왼쪽의색상을지정테두리오른쪽의색상을지정테두리위쪽의색상을지정테두리아래쪽의색상을지정전체테두리의모양을지정테두리왼쪽의모양을지정테두리오른쪽의모양을지정테두리위쪽의모양을지정테두리아래쪽의모양을지정 테두리의색상지정색이름, RGB값테두리의모양지정 none, dotted, dashed, solid, double, groove, ridge, inset, outset 3
[ 기본예제 ] 테두리스타일설정하기 01: <html> 02: <head> 03: <STYLE TYPE = "text/css"> 04: <!-- 05: P {width:320px; margin:5px; text-align:center} 06: P.TEST0 {border-style:none; float:left} 07: P.TEST1 {border-style:solid; float:left; 08: border-width:10px; border-color:red} 09: P.TEST2 {border-style:dotted; float:left; 10: border-width:10px; border-color:red} 11: P.TEST3 {border-style:dashed; float:left; 12: border-width:10px; border-color:red} 13: P.TEST4 {border-style:double; float:left; 14: border-width:10px; border-color:red} 15: P.TEST5 {border-style:ridge; float:left; 16: border-width:10px; border-color:pink} 17: P.TEST6 {border-style:groove; float:left; 18: border-width:10px; border-color:pink} 19: P.TEST7 {border-style:inset; float:left; 20: border-width:10px; border-color:skyblue} 21: P.TEST8 {border-style:outset; float:left; 22: border-width:10px; border-color:skyblue} 23: --> 24: </STYLE> 25: </HEAD>
[ 기본예제 ] 스타일로글꼴변경하기 26: <body> 27: <H1> 스타일시트적용하기 </H1> 28: <BR> 29: <P CLASS=TEST0> none : <br> 테두리가보이지않음 </P> 30: <br><br><br><br><br> 31: <P CLASS=TEST1> solid : <br> 테두리를직선으로표시함 </P> 32: <P CLASS=TEST2> dotted : <br> 테두리를점선으로표시함 </P> 33: <br><br><br><br><br> 34: <P CLASS=TEST3> dashed : <br> 테두리를좀더긴점선으로표시함 </P> 35: <P CLASS=TEST4> double : <br> 테두리를이중실선으로표시함 </P> 36: <br><br><br><br><br> 37: <P CLASS=TEST5> ridge : <br> 테두리를볼록한실선으로표시함 </P> 38: <P CLASS=TEST6> groove : <br> 테두리를오목한실선으로표시함 </P> 39: <br><br><br><br><br> 40: <P CLASS=TEST7> inset : <br> 테두리의내용을오목한모양으로표시함 </P> 41: <P CLASS=TEST8> outset : <br> 테두리의내용을볼록한모양으로표시함 </P> 42: </body> 43: </html>
02. 외부여백 (Margin) 과내부여백 (Padding) 관련속성 속성값설명 margin margin-left margin-right margin-top margin-bottom padding padding-left padding-right padding-top padding-bottom 모든방향의여백을지정왼쪽의여백을지정오른쪽의여백을지정위쪽의여백을지정아래쪽의여백을지정모든방향의여백을지정왼쪽의여백을지정오른쪽의여백을지정위쪽의여백을지정아래쪽의여백을지정 박스 ( 블럭, 문단 ) 의경계선과외부의다른요소의간격조절대표속성값 - 길이, 퍼센트, auto 박스 ( 블럭, 문단 ) 의경계선과내부의컨텐츠의간격조절대표속성값 - 길이, 퍼센트 6
[ 기본예제 ] margin 속성으로요소사이의여백지정하기 01: <html> 02: <head> 03: <STYLE TYPE = "text/css"> 04: <!-- 05: P {width:320px; text-align:center} 06: P.TEST1 {border-style:solid; float:left; 07: border-width:10px; border-color:red; 08: margin:100px;} 09: P.TEST2 {border-style:solid;float:left; 10: border-width:10px; border-color:red; 11: margin-left:200px;} 12: --> 13: </STYLE> 14: </head>
[ 기본예제 ] margin 속성으로요소사이의여백지정하기 15: <body> 16: <H1> 스타일시트적용하기 </H1> 17: <BR> 18: <hr> 19: <P CLASS=TEST1> margin:100px </P> 20: <hr> 21: <P CLASS=TEST2> margin-left:200px</p> 22: <hr> 23: </body> 24: </html>
[ 기본예제 ] margin 속성으로요소와내용사이의여백지정하기 01: <html> 02: <head> 03: <STYLE TYPE = "text/css"> 04: <!-- 05: P {width:320px; text-align:center; margin:10px} 06: P.TEST1 {border-style:solid; float:left; 07: border-width:10px; border-color:red; 08: padding:100px;} 09: P.TEST2 {border-style:solid; float:left; 10: border-width:10px; border-color:red; 11: padding-left:200px;} 12: --> 13: </STYLE> 14: </head> 15: <body> 16: <H1> 스타일시트적용하기 </H1> 17: <BR> 18: <P CLASS=TEST1> margin:100px </P> 19: <P CLASS=TEST2> margin-left:200px</p> 20: </body> 21: </html>
03. 위치관련속성 속성값설명 position float clear z-index static, fixed, absolute, relative ( 초기값은 static) none, left, right none, left, right, both auto, 숫자 위치를계산하는방법박스 ( 일반적으로이미지 ) 와글의위치지정한값의방향에떠다니는박스를허용하지않는다. 박스가겹쳐있을경우보여지는순서를결정 overflow visible, hidden, scroll, auto 컨텐츠가박스의범위를넘어 가는경우의처리 10
[ 기본예제 ] position:absolute 스타일속성으로 <DIV> 태그의위치설정하기 01: <html> 02: <style type="text/css"> 03: #layer1{ 04: position:absolute; 05: left:100; top:100; 06: width:200; height:100; 07: background-color:pink; 08: } 09: #layer2{ 10: position:absolute; 11: left:300; top:200; 12: width:200; height:100; 13: background-color:yellow; 14: } 15: </style>
[ 기본예제 ] position:absolute 스타일속성으로 <DIV> 태그의위치설정하기 16: <body> 17: <h1> 스타일시트적용하기 </h1> 18: <hr> 19: <div id=layer1> 20: 분홍색레이어 21: </div> 22: <div id=layer2> 23: 노란색레이어 24: </div> 25: </body> 26: </html>
[ 기본예제 ] 겹쳐진레이어에우선순위주기 01: <html> 02: <style type="text/css"> 03: #layer1{ 04: position:absolute; 05: left:100; top:100; 06: z-index:2; 07: } 08: #layer2{ 09: position:absolute; 10: left:102; top:102; 11: z-index:1; 12: } 13: </style>
[ 기본예제 ] 겹쳐진레이어에우선순위주기 14: <body> 15: <center> 16: <h3> [ 레이어우선순위 ] </h3><hr> 17: </center> 18: <div id=layer1> 19: <font size="7" color="purple"> 20: <b>f E S T I V A L!!!</b> 21: </font> 22: </div> 23: 24: <div id=layer2> 25: <font size="7" color="skyblue"> 26: <b>f E S T I V A L!!!</b> 27: </font> 28: </div> 29: </body> 30: </html>
www.drbook.co.kr 행복해지는 CSS 3 장