HTML5 웹프로그래밍입문 5 장. 고급표현을위한 CSS3 활용 1
목차 5.1 박스모델설정하기 5.2 레이아웃설정하기 5.3 다양한효과설정하기 5.4 움직임설정하기 2
5.1 박스모델설정하기 5.1.1 영역설정을위한박스모델 5.1.2 박스모델유형의지정 3
영역설정을위한박스모델 배경영역 <h3>, <p>, <div> : 해당하는줄만큼배경 <strong>, <span> : 해당하는글자들만 <table>, <img> : 자신의영역이미리결정 <head> <style type="text/css"> p {font-size: 10pt} h3 { color: red; background-color: #90ff90 } h3:after { content: " (csblim)"; font-size:10pt; background-color: yellow } strong,.red1 { background-color: silver } #next { text-align: center; background-color: #B0ffff } </style> </head> <body> <h3> <strong> 스타일시트 </strong> 이해하기 </h3> <p> 이예제는 <strong> 박스모델 </strong> 의개념을설명합니다. <br><span class="red1"> 클래스 </span> 와 ID 로스타일을지정합니다.</p> <p id="next"> 다음예제로이어집니다.</p> </body> 4
[ 그림 5-2] 박스공간의구성 박스공간의구성 HTML의모든요소들은네모박스모양의공간을차지 요소가차지하는공간개념 => 박스모델 (box model) 내부여백 (padding), 테두리 (border), 외부공백 (margin) 지정 5
박스공간을위한속성 외부공백 : margin, margin-top, margin-right, margin-left, 내부여백 : padding, padding-top, 테두리 / 경계선의두께 : border-width, border-top-width, 테두리의모양 : border-style ( 실선, 점선, 이중선등 ) 테두리의색상 : border-color 테두리지정줄여쓰기 (shorthand) : border: <width> <style> <color> 6
박스모델확인예제 <head> <style type="text/css"> p {font-size: 10pt; line-height: 24pt} h3 { color: red; background-color:#90ff90; margin-left: 60px; margin-right: 60px } h3:after { content: " (csblim)"; font-size:10pt;} p { background-color: #ffff80; padding: 10px; border: medium dotted red } #next { line-height: 2pt; margin-left:30%; padding:8px; border: 4px double blue } strong,.red1 { background-color: silver; margin: 10px; padding: 6px; border: 1px solid black } </style> </head> <body> <h3> <strong> 스타일시트 </strong> 이해하기 </h3> <p> 이예제는 <strong> 박스모델 </strong> 의개념을설명합니다. <br><span class="red1"> 클래스 </span> 와 ID 로스타일을지정합니다.</p> <p id="next"> 다음예제로이어집니다.</p> </body> 7
박스모델유형의지정 display 속성값 block, inline, table, list-item, none head> <style type="text/css"> /* 생략 */ p { display: inline; background-color: #ffff80; padding: 10px; border: thin dotted red } #next { display: inline; line-height: 12pt; margin-left: 30%; padding: 8px; border: 4px inset green } strong { display: none; background-color: silver; margin: 10px; padding: 6px; border: 1px solid black }.red1 { display: block; background-color: silver; padding: 6px; border: 1px solid black } </style> </head> <body> <h3> <strong> 스타일시트 </strong> 이해하기 </h3> <p> 이예제는 <strong> 박스모델 </strong> 의개념을설명합니다. <br><span class="red1"> 클래스 </span> 와 ID 로스타일을지정합니다.</p> <p id="next"> 다음예제로이어집니다.</p> </body> 8
5.2 레이아웃설정하기 5.2.1 콘텐츠의위치지정방법 5.2.2 플로팅박스배치하기 5.2.3 콘텐츠박스의크기조정하기 9
콘텐츠의위치지정방법 위치및크기지정 top, right, bottom, left, width, height 속성 위치값의유형지정 : position 속성 static ( 기본값, 순서대로 ), absolute, relative, fixed 10
위치값유형에따른위치지정 <head> <style type="text/css"> #w3c_static { position: static; } #h5_static { position: static; top: 100px; left: 300px; } #css_relative { position: relative; left: 80px; } #h5_absolute { position: absolute; top: 205px; left: 100px; } #css_fixed { position: fixed; top: 20px; right: 30px; } </style> </head> <body> <h3>5.5 새로운문서표준 HTML5 <img src="w3c_logo.gif" id="w3c_static" width="72" height="40"> </h3> <p> <img src="h5_logo.gif" id="h5_static" width="54" height="66"> 현재 W3C 에서표준안개발을하고있는 HTML5 는차세대웹문서표준안으로...( 중략 )... </p> <h3> 5.5.1 HTML5 의탄생배경및특징 <img src="css3_logo.gif" id="css_relative" width="54" height="66"> <img src="h5_logo.gif" id="h5_absolute" width="54" height="66"> </h3> <img src="css3_ad.gif" id="css_fixed" width="166" height="70"> <p>html 4.0 이 1997 년발표된이후벌써 10 년이상이경과되었는데, IT 업계...( 중략 )... </p> 11 위로스크롤하였을때
앞뒤순서지정 : z-index 여러개의콘텐츠를겹쳐서배치할때앞뒤순서를결정 z 축상의좌표는아니고순서만을지정 : 큰수가앞쪽 <style type="text/css"> #w3c_z1 { z-index: 1; position: relative; top: -20px; left: 80px;} #h5_z2 { z-index: 2; position: relative; top: -5px; left: 45px; } #css_z3 { z-index: 3; position: relative; top: 5px; left: 10px; } #w3c_z9 { z-index: 9; position: relative; top: -20px; left: 80px; } #h5_z8 { z-index: 8; position: relative; top: -5px; left: 45px; } #css_z7 { z-index: 7; position: relative; top: 5px; left: 10px; } </style>... <h3>5.5 새로운문서표준 HTML5 </h3> <img src="w3c_l.gif" id="w3c_z1" width="72" height="40"> <img src="h5_l.gif" id="h5_z2" width="54" height="66"> <img src="css3_l.gif" id="css_z3" width="54" height="66"> <img src="w3c_l.gif" id="w3c_z9" width="72" height="40"> <img src="h5_l.gif" id="h5_z8" width="54" height="66"> <img src="css3_l.gif" id="css_z7" width="54" height="66"> 12
플로팅박스배치하기 플로팅박스의지정 : float 특정콘텐츠를주변콘텐츠와별도로분리하여배치하고싶을때 float 속성은플로팅박스와주변콘텐츠와배치방법을지정 left, right, none <style type="text/css"> #w3c_float { float:left; border: thin solid black; } #h5_float { float:left; top: 100px; left: 300px; } #css_float { float:right; border: thin solid black;} </style>... <h3>5.5 새로운문서표준 HTML5 </h3> <img src="w3c_logo.gif" id="w3c_float" width="72" height="40"> <img src="h5_logo.gif" id="h5_float" width="54" height="66"> <img src="css3_logo.gif" id="css_float" width="54" height="66"> <p> 현재 W3C 에서표준안개발을하고있는 HTML5 는차세대웹문서...( 생략 )... 브라우저크기조정 13
콘텐츠박스의크기조정하기 콘텐츠의크기조정 : width, height 속성 특정콘텐츠에서차지하는공간크기를임의로조정 width, height / min-width, min-height / max-width, max-height <style type="text/css"> #intro_text { width: 50%; min-width: 180px; height: 110px; border: medium double black;} </style>... <p id="intro_text"> 표준안개발에대다수웹브라우저개발사가참여하고있고, 그동안의웹기술의발전을많이반영하여...( 생략 )... 브라우저크기조정 14
오버플로우 : overflow 속성 콘텐츠의분량이요소의박스크기를초과할때의처리방법 visible ( 기본값 ), hidden, scroll, auto <style type="text/css"> #intro1 { overflow: visible; float:left; width: 24%; height: 140px; border: medium double black;} #intro2 { overflow: hidden; float:left; width: 24%; height: 140px; border: medium double black;} #intro3 { overflow: scroll; float:left; width: 24%; height: 140px; border: medium double black;} #intro4 { overflow: auto; float:left; width: 24%; height: 140px; border: medium double black; } </style>... <p id="intro1">[visible] 표준안개발에대다수웹브라우저개발사가...( 중략 )... </p> <p id="intro2">[hidden] 표준안개발에대다수웹브라우저개발사가...( 중략 )... </p> <p id="intro3">[scroll] 표준안개발에대다수웹브라우저개발사가...( 중략 )... </p> <p id="intro4">[auto] 표준안개발에대다수웹브라우저개발사가...( 중략 )... </p> 브라우저크기조정 15
5.3 다양한효과설정하기 5.3.1 박스에효과주기 5.3.2 객체의투명도및가시성설정 16
박스에효과주기 둥근모서리 : border-radius 속성 사각형의모서리의둥근정도를달리지정 border-radius border-top-left-radius, border-top-right-radius, <style type="text/css"> #intro_text { position: relative; left: 10%; width: 60%; padding: 5px; border: medium double black; border-radius: 10px; } #w3c_float { float: right; border: thin solid black; padding: 5px; border-top-left-radius:8px; border-bottom-right-radius:8px; } </style>... <h3>5.5 새로운문서표준 HTML5 </h3> <img src="w3c_logo.gif" id="w3c_float" width="72" height="40"> <p id="intro_text"> 현재 W3C 에서표준안개발을하고있는 HTML5 는차세대웹문서표준안으로많은관심이집중되고있다. 특히, 표준안개발에...( 중략 )... 17
박스그림자 box-shadow: <hoffset><voffset><blur><spread><color><inset/outset> 가로 / 세로시작위치, 번짐정도와크기, 색상, 그림자진행방향 <style type="text/css"> #intro_text { position: relative; left: 10%; width: 60%; padding: 5px; border: medium double black; border-radius: 10px; box-shadow: 8px 8px 20px 2px blue; } #w3c_float { float:right; border: thin solid black; padding: 5px; border-top-left-radius:8px; border-bottom-right-radius:8px; box-shadow: 2px 2px 20px 4px green inset; } </style> 18
투명도 : opacity 속성 0.0 일때투명 (fully transparent), 1.0 일때불투명 (fully opaque) 가시성 : visibility visible ( 기본값 ), hidden, collapse( 표에서열이나행 ) <style type="text/css"> #h5_op2 { opacity: 0.2; position: relative; top: -80px; left: 20px; } #h5_op3 { opacity: 0.3; position: relative; top: -80px; left: 50px; } #h5_op5 { opacity: 0.5; position: relative; top: -80px; left: 80px; } #h5_op7 { opacity: 0.7; position: relative; top: -80px; left: 110px; } #h5_op9 { opacity: 0.9; position: relative; top: -80px; left: 140px; } </style>...( 중략 )... <img src="h5_logo.gif" id="h5_op2" width="54" height="66"> <img src="h5_logo.gif" id="h5_op3" width="54" height="66"> <img src="h5_logo.gif" id="h5_op5" width="54" height="66"> <img src="h5_logo.gif" id="h5_op7" width="54" height="66"> <img src="h5_logo.gif" id="h5_op9" width="54" height="66"> 19
5.4 움직임설정하기 5.4.1 전환효과 5.4.2 좌표변환 20
전환효과 transition: <property> <duration> 변화될속성이름과전환시간을지정 객체모양의변화는 CSS 속성값의변화 : 예, width/height 값 <head> <style type="text/css"> #title:hover { border: thick double blue; padding:4px; background-color: yellow; font-size: xx-large; } #h5_logo { position: absolute; top: 10px; right: 60px; } #h5_logo:hover { border: thin solid red; width: 108px; height: 132px; } </style> </head> <body> <h3>5.5 새로운문서표준 <span id="title">html5</span></h3> <img src="h5_logo.gif" id="h5_logo" width="54" height="66"> <p> 현재 W3C 에서표준안개발을하고있는 HTML5 는차세대웹문서...( 중략 )... </p> </body> mouseover mouseover 21
점진적으로변하는전환효과 <style type="text/css"> #title:hover { border: thick double blue; padding:4px; background-color: yellow; font-size: xx-large; transition: border 4s, background-color 8s; } #h5_logo { position: absolute; top: 10px; right: 60px; } #h5_logo:hover { border: thin solid red; width: 108px; height: 132px; transition: width 4s; } </style> mouseover mouseover 22
좌표변환 transform: < 함수 > translate(x,y), scale(x,y), rotate(angle), skew(x-angle,y-angle) 이동변환, 크기변환, 회전변환, 기울임변환 <style type="text/css"> #h5_trans { transform: translate(30px,30px); border: thin solid; } #h5_scale { transform: scale(3, 1.5); border: thin solid; } #h5_rotate { transform: rotate(45deg); border: thin solid; } #h5_skew { transform: skew(30deg, 5deg); border: thin solid; } td { width: 160px; height: 160px; vertical-align: top; border: thin solid; } </style>... <table border="1"> <tr> <td><p>translate(40px,40px);</p> <img src="h5_logo.gif" id="h5_trans" width="54" height="66"> </td> <td><p>scale(3, 1.5);</p> <img src="h5_logo.gif" id="h5_scale" width="54" height="66"> </td> 23