HTML5 웹 프로그래밍 입문 (개정판) 5장. 고급 표현을 위한 CSS3 활용
목차 5.1 박스모델 설정하기 5.2 레이아웃 설정하기 5.3 다양한 효과 설정하기 5.4 움직임 설정하기 소스코드 실행 사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch13/에 각 장의 예제가 있어서 실행결과 확인 및 소스보기가 가능합니다. 고급 표현을 위한 CSS3 활용
5.1 박스모델 설정하기 5.1.1 영역설정을 위한 박스모델 5.1.2 박스모델 유형의 지정 고급 표현을 위한 CSS3 활용
영역설정을 위한 박스모델 배경 영역 <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: " (ⓒsblim)"; 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> 고급 표현을 위한 CSS3 활용
박스공간의 구성 HTML의 모든 요소들은 네모 박스 모양의 공간을 차지 요소가 차지하는 공간 개념 => 박스모델(box model) 내부여백(padding), 테두리(border), 외부공백(margin) 지정 고급 표현을 위한 CSS3 활용
박스공간을 위한 속성 외부공백 : margin, margin-top, margin-right, margin-left, … 내부여백 : padding, padding-top, … 테두리/경계선의 두께 : border-width, border-top-width, … 테두리의 모양 : border-style (실선, 점선, 이중선 등) 테두리의 색상 : border-color 테두리 지정 줄여쓰기(shorthand) : border: <width> <style> <color> 고급 표현을 위한 CSS3 활용
박스모델 확인 예제 <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: " (ⓒsblim)"; 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> 고급 표현을 위한 CSS3 활용
박스모델 유형의 지정 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> 고급 표현을 위한 CSS3 활용
5.2 레이아웃 설정하기 5.2.1 콘텐츠의 위치 지정 방법 5.2.2 플로팅 박스 배치하기 5.2.3 콘텐츠 박스의 크기 조정하기 고급 표현을 위한 CSS3 활용
콘텐츠의 위치 지정 방법 위치 및 크기 지정 위치값의 유형 지정 : position 속성 top, right, bottom, left, width, height 속성 위치값의 유형 지정 : position 속성 static (기본값) : 순서대로 absolute : 문서(상위 요소) 내에서 절대위치 relative : 직전 요소에 이어서 상대위치 fixed : 현재 브라우저 화면 내에서 절대위치 고급 표현을 위한 CSS3 활용
위치값 유형에 따른 위치지정 <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"> <img src="CSS3_ad.gif" id="css_fixed" width="166" height="70"> <p>HTML 4.0이 1997년 발표된 이후 벌써 10년 이상이 경과되었는데, IT 업계 ...(중략)... </p> 위로 스크롤 하였을 때 고급 표현을 위한 CSS3 활용
앞 뒤 순서 지정 : z-index 여러 개의 콘텐츠를 겹쳐서 배치할 때 앞뒤 순서를 결정 <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"> z-index: 1, 2, 3 9, 8, 7 고급 표현을 위한 CSS3 활용
플로팅 박스 배치하기 플로팅 박스의 지정 : 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는 차세대 웹문서 ...(생략).... 고급 표현을 위한 CSS3 활용
콘텐츠 박스의 크기 조정하기 콘텐츠의 크기 조정 : 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"> 표준안 개발에 대다수 웹브라우저 개발사가 참여하고 있고, 그동안의 웹 기술의 발전을 많이 반영하여 ...(생략).... 고급 표현을 위한 CSS3 활용
오버플로우 : 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> 고급 표현을 위한 CSS3 활용
5.3 다양한 효과 설정하기 5.3.1 박스에 효과 주기 5.3.2 객체의 투명도 및 가시성 설정 고급 표현을 위한 CSS3 활용
박스에 효과 주기 둥근 모서리 : 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는 차세대 웹문서 표준안으로 많은 관심이 집중되고 있다. 특히, 표준안 개발에 ...(중략)... 고급 표현을 위한 CSS3 활용
박스 그림자 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> 고급 표현을 위한 CSS3 활용
투명도 : opacity 속성 가시성 : visibility 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"> opacity = 0.2 0.3 0.5 0.7 0.9 고급 표현을 위한 CSS3 활용
5.4 움직임 설정하기 5.4.1 전환효과 5.4.2 좌표변환 고급 표현을 위한 CSS3 활용
전환효과 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 고급 표현을 위한 CSS3 활용
점진적으로 변하는 전환효과 <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 고급 표현을 위한 CSS3 활용
좌표변환 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; } ... <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> … 고급 표현을 위한 CSS3 활용