Download presentation
Presentation is loading. Please wait.
1
HTML5 웹 프로그래밍 입문 (개정판) 5장. 고급 표현을 위한 CSS3 활용
2
목차 5.1 박스모델 설정하기 5.2 레이아웃 설정하기 5.3 다양한 효과 설정하기 5.4 움직임 설정하기
소스코드 실행 사이트 주소 : 폴더 ch02/ ~ ch13/에 각 장의 예제가 있어서 실행결과 확인 및 소스보기가 가능합니다. 고급 표현을 위한 CSS3 활용
3
5.1 박스모델 설정하기 5.1.1 영역설정을 위한 박스모델 5.1.2 박스모델 유형의 지정 고급 표현을 위한 CSS3 활용
4
영역설정을 위한 박스모델 배경 영역 <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 활용
5
박스공간의 구성 HTML의 모든 요소들은 네모 박스 모양의 공간을 차지
요소가 차지하는 공간 개념 => 박스모델(box model) 내부여백(padding), 테두리(border), 외부공백(margin) 지정 고급 표현을 위한 CSS3 활용
6
박스공간을 위한 속성 외부공백 : 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 활용
7
박스모델 확인 예제 <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 활용
8
박스모델 유형의 지정 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 활용
9
5.2 레이아웃 설정하기 5.2.1 콘텐츠의 위치 지정 방법 5.2.2 플로팅 박스 배치하기
5.2.3 콘텐츠 박스의 크기 조정하기 고급 표현을 위한 CSS3 활용
10
콘텐츠의 위치 지정 방법 위치 및 크기 지정 위치값의 유형 지정 : position 속성
top, right, bottom, left, width, height 속성 위치값의 유형 지정 : position 속성 static (기본값) : 순서대로 absolute : 문서(상위 요소) 내에서 절대위치 relative : 직전 요소에 이어서 상대위치 fixed : 현재 브라우저 화면 내에서 절대위치 고급 표현을 위한 CSS3 활용
11
위치값 유형에 따른 위치지정 <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> 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 활용
12
앞 뒤 순서 지정 : 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, , 8, 7 고급 표현을 위한 CSS3 활용
13
플로팅 박스 배치하기 플로팅 박스의 지정 : 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 활용
14
콘텐츠 박스의 크기 조정하기 콘텐츠의 크기 조정 : 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 활용
15
오버플로우 : 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 활용
16
5.3 다양한 효과 설정하기 5.3.1 박스에 효과 주기 5.3.2 객체의 투명도 및 가시성 설정
고급 표현을 위한 CSS3 활용
17
박스에 효과 주기 둥근 모서리 : 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 활용
18
박스 그림자 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 활용
19
투명도 : 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 = 고급 표현을 위한 CSS3 활용
20
5.4 움직임 설정하기 5.4.1 전환효과 5.4.2 좌표변환 고급 표현을 위한 CSS3 활용
21
전환효과 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 활용
22
점진적으로 변하는 전환효과 <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 활용
23
좌표변환 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 활용
Similar presentations
![HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.](/40/11068626/big_thumb.jpg "HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.>")
