명품웹프로그래밍 1
2 강의목표 1. CSS3로 HTML 태그가출력되는위치를조절할수있다. 2. CSS3로리스트를예쁘게꾸밀수있다. 3. CSS3로표를예쁘게꾸밀수있다. 4. CSS3로폼을꾸미고사용자의입력에반응하게할수있다. 5. CSS3로애니메이션, 전환 (transition), 변환 (transform) 효과를만들수있다.
배치 3 배치 CSS3 로 HTML 태그가출력되는위치지정 HTML 태그는웹페이지에작성된순서와달리배치가능 배치기능의 CSS3 프로퍼티들 display position left, right, top, bottom float z-index Visibility overflow
블록박스와인라인박스 4 HTML 태그는인라인태그와블록태그로나뉨 인라인태그는인라인박스, 블록태그는블록박스로출력 블록박스와인라인박스의디폴트출력모양 블록박스 블록박스는새라인에서시작. 왼쪽에서오른쪽끝까지통째점유 <div>div</div> <div>div</div> <div>div</div> 인라인박스 인라인박스는블록안에배치옆에다른태그배치가능 <div>div 내 <span>span</span> 과 <span>span</span> 입니다 </div> <div>div 내 <span>span</span> 과 <span>span</span> 입니다 </div> <div>div 내 <span>span</span> 과 <span>span</span> 입니다 </div>
5 박스의유형제어 : display
display : block 6 예 : <span> 을블록박스로수정 span { display : block; width : 100px; height : 60px; CSS 스타일 HTML 코드 <div> <span>block span</span> 과 <span>block span</span> 입니다. </div> 100x60 * <span> 을 block 박스로지정하고, 폭과높이를각각 100px, 60px 로지정한사례. 한줄을독점적으로차지하여옆에다른태그배치되지않음
display : inline 7 예 : <div> 를인라인박스로수정 div div { display : inline; CSS 스타일 HTML 코드 <div style="background : orange"> <div>inline DIV</div> <div>inline DIV</div> <div>inline DIV</div> </div> 오렌지바탕은바깥 <div> * <div> 가 inline 박스로지정됨. inline 박스는라인안에다른요소들과함께배치. 공간이좁으면남은부분이다음라인으로넘어감
display : inline-block 8 예 : <div> 를인라인블록박스로수정 CSS 스타일 div div { display : inline-block; border : 2px dotted orangered ; background : powderblue; margin : 10px; width : 60px; height : 80px; HTML 코드 <div style="background : orange"> <div>inline-block DIV</div> <div>inline-block DIV</div> <div>inline-block DIV</div> </div> * inline-block 박스는라인안에다른요소들과함께배치. 동시에 width, height, margin 으로크기조절가능 margin : 10px
예제 5 1 display 프로퍼티로박스유형설정 9 <!DOCTYPE html> <html><head><title>display 프로퍼티 </title> <style> div { border : 2px solid yellowgreen; color : blue; background : aliceblue; span { border : 3px dotted red; background : yellow; display:none 으로지정되어텍스트가보이지않음 </style></head> <body> <h3> 인라인, 인라인블록, 블록 </h3> <hr> 나는 <div style="display:none"> div(none)</div> 입니다.<br><br> 나는 <div style="display:inline"> div(inline)</div> 입니다.<br><br> 나는 <div style="display:inline-block; height:50px"> div(inline-block)</div> 입니다.<br><br> 나는 <div>div<span style="display:block"> span(block)</span> 입니다. </div> </body> </html> height : 50px
박스의배치 : position 10 normal flow 웹페이지에나타난순서대로 HTML 태그배치 position 프로퍼티를이용하여 normal flow 무시가능 position 프로퍼티를이용한배치방법 정적배치 - position : static( 디폴트 ) 상대배치 - position : relative 절대배치 - position : absolute 고정배치 - position : fixed 유동배치 - float : left 혹은 float : right position 프로퍼티를사용할때, 태그의위치와크기 top, bottom, left, right, width, height 프로퍼티로지정 이들프로퍼티는배치방법에따라다르게사용됨
상대배치, position : relative 11 normal flow 의 기본위치 에서 left, top, bottom, right 프로퍼티의값만큼이동한 상대위치 에배치 position : relative; right : 20px; bottom : 20px; top : 20px right : 20px 기본위치 상대위치 left : 20px 상대위치 기본위치 bottom : 20px position : relative; left : 20px; top : 20px;
예제 5-2 position : relative 상대배치 12 이예제는 5 개의 <div> 중 h 와 k 글자를가진 2 개의 <div> 에마우스를올리면 20px 씩상대배치시키는사례를보여준다. <!DOCTYPE html> <html> <head> <title>relative 배치 </title> <style> div { display : inline-block; height : 50px; width : 50px; border : 1px solid lightgray; text-align : center; color : white; background : red; #down:hover { position : relative; left : 20px; top : 20px; background : green; #up:hover { position : relative; right : 20px; bottom : 20px; background : green; </style> </head> h 블록에마우스를올리면상대배치함 k 블록에마우스를올리면상대배치함 <body> <h3> 상대배치, relative</h3> <hr> <div>t</div> <div id="down">h</div> <div >a</div> <div>n</div> <div id="up">k</div> <div>s</div> </body> </html>
예제 5-2 실행결과 13 right : 20px top : 20px left : 20px bottom : 20px 초기상태 상대배치 (position:relative) h 와 k 블록에마우스를올린경우, 상대배치에따라위치가변함
예제 5-3 position:absolute 절대배치 14 left: 50px top: 30px 브라우저크기가변해도절대배치된태그위치는변하지않는다. <!DOCTYPE html> <html> <head> <title> 절대배치 </title> <style> div { display : inline-block; position : absolute; /* 절대배치 */ border : 1px solid lightgray; div > p { display : inline-block; /* div 의자식 p */ position : absolute; /* 절대배치 */ height : 20px; width : 15px; background : lightgray; </style> </head> <body> <h3>merry Christmas!</h3> <hr> <p> 예수님이탄생하셨습니다.</p> <div> <img src="media/christmastree.png" width="200" height="200" alt=" 크리스마스트리 "> <p style="left:50px; top:30px">m</p> <p style="left:100px; top:0px">e</p> <p style="left:100px; top:80px">r</p> <p style="left:150px; top:110px">r</p> <p style="left:30px; top:130px">y</p> </div> </body> </html>
15 예제 5-4 position : fixed 로브라우저하단오른쪽에고정배치 <!DOCTYPE html> <html> <head><title> 고정배치 </title> <style> #fixed { position : fixed; bottom : 10px; right : 10px; width : 100px; padding : 5px; background : red; color : white; </style></head> <body> <h3>merry Christmas!</h3> <hr> <img src="media/christmastree.png" width="300" height="300" alt=" 크리스마스트리 "> <div id="fixed"> 예수님이탄생하셨습니다. </div> </body> </html> bottom : 10px right : 10px 브라우저의하단에항상출력
16 예제 5-5 float : right 로브라우저의오른편에항상배치 <!DOCTYPE html> <html> <head><title>float 배치 </title> <style> #float { float : right; border : 1px dotted black; width : 8em; padding : 0.25em; margin : 1em; </style> </head> <body> <h3> 학기말공지 </h3> <hr> <div> <p id="float"> 24 일은피아니스트조성진의크리스마스특별연주가있습니다.</p> <p> 이제곧겨울방학이시작됩니다. 학기중못다한 Java, C++ 프로그래밍열심히하기바랍니다. 인턴을준비하는학생들은프로젝트개발에더욱힘쓰세요. 그럼다음학기에만나요.</p> </div> </body> </html> width : 8em (8 개의글자크기 ) 이블록은브라우저오른쪽에항상출력
예제 5-6 z-index 로카드쌓기 17 <!DOCTYPE html> <html><head><title>z-index 프로퍼티 </title> <style> div { position : absolute; img { position : absolute; #spadea { z-index : -3; left : 10px; top : 20px; #spade2 { z-index : 2; left : 40px; top : 30px; #spade3 { z-index : 3; left : 80px; top : 40px; #spade7 { z-index : 7; left : 120px; top : 50px; </style></head> <body> <h3>z-index 프로퍼티 </h3> <hr> <div> <img id="spadea" src="media/spade-a.png" width="100" height="140" alt=" 스페이드 A"> <img id="spade2" src="media/spade-2.png" width="100" height="140" alt=" 스페이드 2"> <img id="spade3" src="media/spade-3.png" width="100" height="140" alt=" 스페이드 3"> <img id="spade7" src="media/spade-7.png" width="100" height="140" alt=" 스페이드 7"> </div> </body> </html> z-index: 7 z-index: 3 z-index: 2 z-index: -3
예제 5-7 visibility 로텍스트숨기기 18 <!DOCTYPE html> <html> <head><title>visibility 프로퍼티 </title> <style> span { visibility : hidden; </style> </head> <body> <h3> 다음빈곳에숨은단어?</h3> <hr> <ul> <li>i (<span>love</span>) you. <li>css is Cascading (<span>style</span>) Sheet. <li> 응답하라 (<span>1988</span>). </ul> </body> </html> visibility : hidden; 공간은차지하지만텍스트는보이지않음
예제 5-8 overflow 프로퍼티활용 19 <!DOCTYPE html> <html> <head> <title>overflow 프로퍼티 </title> <style> p { width : 15em; height : 3em; border : 1px solid lightgray; overflow : hidden.hidden { overflow : hidden;.visible { overflow : visible;.scroll { overflow : scroll; </style> </head> overflow : visible <body> <h3>overflow 프로퍼티 </h3> <hr> <p class="hidden">overflow에 hidden 값을적용하면박스를넘어가는내용이잘려보이지않습니다.</p><br> <p class="visible">overflow에 visible 값을적용하면콘텐트가박스를넘어가서도출력됩니다 </p><br> <p class="scroll">overflow에 scroll 값을적용하면박스에스크롤바를붙여출력합니다.</p> overflow : scroll </body> </html>
CSS3 로리스트꾸미기 20 리스트의모양을꾸미는 CSS3 프로퍼티들
리스트꾸미기에사용할 HTML 페이지 21 <!DOCTYPE html> <html> <head> <title> 리스트꾸미기 </title> </head> <body> <h3> 커피메뉴 </h3> <hr> <ul> <li>espresso</li> <li>cappuccino</li> <li>cafe Latte</li> </ul> </body> </html> 아이템마커 (marker)
리스트와아이템에배경색입히기 22 background 프로퍼티이용 ul { background : goldenrod; padding : 10px 10px 10px 50px; ul li { /* ul 의자손 li */ background : greenyellow; margin-bottom : 5px; CSS 스타일 마커 ( 아이템바깥에있음 ) <li> 영역 <ul> 영역 paddingtop : 10px marginbottom : 5px padding-left : 50px padding-right : 10px
마커의위치, list-style-position 23 ul { background : goldenrod; padding : 10px 10px 10px 50px; list-style-position : inside; ul li { background : greenyellow; margin-bottom : 5px; CSS 스타일 마커가아이템영역의안쪽에배치됨
마커종류, list-style-type 24 (a) list-style-type : circle (b) list-style-type : square (c) list-style-type : none (d) list-style-type : upper-roman (e) list-style-type : lower-alpha (f) list-style-type : decimal
이미지마커, list-style-image 25 list-style-image 사용자가이미지마커작성가능 ul { background : goldenrod; padding : 10px 10px 10px 50px; list-style-image : url("media/marker.png"); ul li { background : greenyellow; margin-bottom : 5px; CSS 스타일 모든아이템에동일한이미지마크
26 예제 5-9 CSS3 스타일을응용하여리스트로메뉴만들기 <!DOCTYPE html> <html> <head><title> 리스트로메뉴만들기 </title> <style> #menubar { background : olive; #menubar ul { /* 여백과패딩모두 0 */ margin : 0; padding : 0; width : 567px; /* 모든아이템 (<li>) 을한줄에품을수있는폭 */ #menubar ul li { display : inline; /* 새줄로넘어가지않게 */ list-style-type : none; /* 마커삭제 */ padding : 0px 15px; /* top=bottom=0, left=right=15px */ #menubar ul li a { color : white; text-decoration : none; /* 링크보이지않게 */ #menubar ul li a:hover { color : violet; /* 마우스올라갈때색 */ </style></head> <body> <nav id="menubar"> <ul> <li><a href="#">home</a></li> <li><a href="#">espresso</a></li> <li><a href="#">cappuccino</a></li> <li><a href="#">cafe Latte</a></li> <li><a href="#">f.a.q</a></li> </ul> </nav> </body> </html> 이곳에연결할페이지주소를주면된다. 메뉴아이템에마우스올리면글자색변경
CSS3 로표꾸미기 27 CSS3 로표꾸미기를설명할기본 HTML 문서 <!DOCTYPE html> <html> <head><title> 기본구조를가진표만들기 </title></head> <body> <h3>1학기성적 </h3> <hr> <table> <thead> <tr><th> 이름 </th><th>html</th><th>css</th></tr> </thead> <tfoot> <tr><th> 합 </th><th>175</th><th>169</th></tr> </tfoot> <tbody> <tr><td> 황기태 </td><td>80</td><td>70</td></tr> <tr><td> 이재문 </td><td>95</td><td>99</td></tr> <tbody> </table> </body> </html>
표테두리제어, border 28 border : 표테두리 border-collapse : collapse; /* 중복된테두리합치기 */ 테두리두께 1 픽셀실선파란색 table { border : 1px solid blue; td, th { border : 1px dotted green; 모든 <td>, <th> 에적용 점선 table { border : 1px solid blue; border-collapse : collapse; td, th { border : 1px dotted green; 표와셀의테두리를합친결과
셀크기제어, width height 29 th { height : 40px; width : 100px; td { height : 20px; width : 100px; 40px 20px 40px 100px <thead> 의자손 <th> thead th { height : 40px; width : 100px; td, th { height : 20px; width : 100px; 40px 20px
셀여백및정렬 30 padding : 여백 text-align : 정렬 (eft, center, right) td, th { height : 20px; width : 100px; padding : 10px; text-align : right; 10 픽셀패딩 셀모두오른쪽정렬
배경색과테두리효과 31 table { /* 이중테두리제거 */ border-collapse : collapse; td, th { /* 모든셀에적용 */ text-align : left; padding : 10px; height : 20px; width : 100px; thead { /* <thead> 의모든셀적용 */ background : darkgray; color : yellow; td, tfoot th { /* 아래쪽테두리만회색 */ border-bottom : 1px solid gray
줄무늬만들기 32 짝수번째행 (<tr>) 의배경색을 aliceblue 색으로지정 thead, tfoot { background : darkgray; color : yellow; tbody tr:nth-child(even) { /* 짝수 <tr> 에적용 */ background : aliceblue; <tbody> 의자손 <tr>
33 예제 5-10 마우스가올라오면행의배경색이변하는표만들기 <!DOCTYPE html> <html><head><title> 표응용 1</title> <style> table { /* 이중테두리제거 */ border-collapse : collapse; td, th { /* 모든셀에적용 */ text-align : left; padding : 5px; height : 15px; width : 100px; thead, tfoot { /* <thead> 의모든셀에적용 */ background : darkgray; color : yellow; tbody tr:nth-child(even) { /* 짝수 <tr> 에적용 */ background : aliceblue; tbody tr:hover { background : pink; </style></head> <body> <h3>2017 년 1 학기성적 </h3> <hr> <table> <thead> <tr><th> 이름 </th><th>html</th><th>css</th></tr> </thead> <tfoot> <tr><th> 합 </th><th>310</th><th>249</th></tr> </tfoot> <tbody> <tr><td> 황기태 </td><td>80</td><td>70</td></tr> <tr><td> 이재문 </td><td>95</td><td>99</td></tr> <tr><td> 이병은 </td><td>85</td><td>90</td></tr> <tr><td> 김남윤 </td><td>50</td><td>40</td></tr> </tbody> </table> </body> </html> 마우스가올라오면배경색이 pink 으로변함
폼꾸미기 34 input[type=text] 로폼요소의글자색지정 CSS 스타일 input[type=text] { color : red; HTML 코드 <label> 이름 : <input type="text" placeholder="elvis"> </label> 입력되는글자색 red input[type=text] 로폼요소의테두리만들기 CSS 스타일 input[type=text] { border : 2px solid skyblue; border-radius : 5px; HTML 코드 <label> 이름 : <input type="text" placeholder="elvis"> </label> 2px 두께의둥근모서리테두리 )
폼꾸미기 35 폼요소에마우스처리 마우스가올라올때, :hover input[type=text] { color : red; input[type=text]:hover { background : aliceblue; CSS 스타일 마우스가올라오면입력창이 aliceblue 로변경 포커스를받을때, :focus input[type=text]:focus { font-size : 120%; CSS 스타일 마우스클릭시포커스가주어지며, 글자크기가 120% 로증가
예제 5-11 스타일로폼꾸미기 36 <!DOCTYPE html> <html><head><title> 폼스타일주기 </title> <style> input[type=text] { /* text 창에만적용 */ color : red; input:hover, textarea:hover { /* 마우스올라올때 */ background : aliceblue; input[type=text]:focus, input[type=email]:focus { /* 포커스 </label> 받을때 */ font-size : 120%; label { display : block; /* 새라인에서시작 */ padding : 10px; label span { float : left; width : 90px; text-align : right; padding : 10px; </style> </head> <body> <h3>contact US</h3> <hr> <form> <label> <span>name</span><input type="text" placeholder="elvis"><br> </label> <label> <span>email</span><input type="email" placeholder="elvis@graceland.com"> </label> <label> <span>comment</span><textarea placeholder=" 메시지를남겨주세요 "></textarea> </label> <label> <span></span><input type="submit" value="submit"> </form> </body></html> 포커스를받으면글자크기는 120% 커짐 마우스가올라가면배경색이 aliceblue 로바뀜
CSS3 스타일로태그에동적변화만들기 37 CSS3 로만 HTML 태그모양의동적변화가능 자바스크립트로구현하던것을 CSS3로작성가능 3 가지기법지원 애니메이션 (animation) 전환 (transition) 변환 (transform)
CSS3 로애니메이션만들기 38 HTML 태그의모양변화를시간단위로설정 애니메이션코딩작업 1. @keyframes 으로 HTML 태그의시간별모양변화만들기 @keyframes textcoloranimation { 0% { color : blue; /* 시작시. 0% 대신 from 사용가능 */ 30% { color : green; /* 30% 경과시까지 */ 100% { color : red; /* 끝까지. 100% 대신 to 사용가능 */ 2. 애니메이션스타일시트작성 span { animation-name : textcoloranimation; /* 애니메이션코드이름 */ animation-duration : 5s; /* 애니메이션 1 회시간은 5 초 */ animation-iteration-count : infinite; /* 무한반복 */
CSS3 애니메이션사례 39 5 초를주기로 <span> 태그의글자색을파란색, 초록색, 빨간색으로바꾸는애니메이션. 무한반복 CSS 스타일 @keyframes textcoloranimation { 0% { color : blue; 30% { color : green; 100% { color : red; span { animation-name : textcoloranimation; animation-duration : 5s; animation-iteration-count : infinite; 0% 30% 100% HTML 코드 <p><span>span</span> 텍스트를 5 초에 blue, green, red 로무한반복합니다. </p> 무한반복
예제 5-12 애니메이션만들기연습 40 꽝! 글자의크기를 3 초에걸쳐 500% 에서 100% 로서서히축소되는애니메이션을작성하라. 애니메이션은무한반복한다. 시간 0%(from) 꽝! 3 초경과 100%(to) 꽝! font-size : 500% font-size : 100%
예제 5-12 애니메이션만들기연습정답 41 from 은 0% 로 to 는 100% 로수정가능 이태그에애니메이션작동 <!DOCTYPE html> <html> <head><title> 애니메이션 </title> <style> @keyframes bomb { from { font-size : 500%; to { font-size : 100%; h3 { animation-name : bomb; animation-duration : 3s; animation-iteration-count : infinite; </style></head> <body> <h3> 꽝!</h3> <hr> <p> 꽝! 글자가 3 초동안 500% 에서시작하여 100% 로바뀌는애니메이션입니다. 무한반복합니다.</p> </body> </html> 500% 의크기로시작하여 3 초내에 100% 로줄어드는애니메이션
전환 (transition) 42 전환이란? HTML 태그에적용된 CSS3 프로퍼티값의변화를서서히진행시켜애니메이션효과생성 HTML 태그의색이나모양, 위치등이서서히변하는효과 전환설정 : transition 프로퍼티이용 <span> 태그의글자크기가에변화가일어나면, 5 초에걸쳐서서히변화가진행되도록전환지시 <span> 태그에마우스를올리면글자크기를 500% 확대 -> 전환효과시작 전환프로퍼티 span { transition : font-size 5s; span:hover { font-size : 500%; 전환시간 CSS 스타일 꽝! 500%; 꽝! <span> 꽝!</span> HTML 코드 마우스가글자위에올라오면현재크기에서 500% 크기로전환진행
예제 5-13 font-size 에대한전환효과만들기 43 <!DOCTYPE html> <html> <head><title> 전환 </title> <style> span { transition : font-size 5s; span:hover { font-size : 500%; </style> <span> 에마우스를올리면 5초동안 </head> 점진적으로글자를 500% 확대. <body> <h3>font-size에대한전환 </h3> <hr> <p><span> 꽝!</span> 글자에마우스를올려보세요.</p> </body> </html>
변환 (transform) 44 텍스트나이미지를회전, 확대다양한기하학적인모양으로출력 회전각도의단위는 deg 이며시계방향의회전 20 o -20 o Y 축으로 1 배확대 x 축으로 3 배확대 100px 확대 / 축소 회전 기울임 이동 div { transform : rotate(20deg); div { transform : translatey(100px); div { transform : scale(3,1); div { transform : skew(0deg, -20deg);
45 transform 에사용가능한 2 차원변환함수
예제 5-14 다양한변환사례 46 <!DOCTYPE html> <html> <head><title> 다양한변환사례 </title> <style> div { display : inline-block; padding : 5px; color : white; background : olivedrab; /* 변환 */ div#rotate { transform : rotate(20deg); div#skew { transform : skew(0deg,-20deg); div#translate { transform : translatey(100px); div#scale { transform : scale(3,1); 초기화면 /* 마우스올릴때추가변환 */ div#rotate:hover { transform : rotate(80deg); div#skew:hover { transform : skew(0deg, -60deg); div#translate:hover { transform : translate(50px, 100px); div#scale:hover { transform : scale(4,2); /* 마우스누를때추가변환 */ div#scale:active { transform : scale(1,5); </style> </head> <body> <h3> 다양한 Transform</h3> 아래는회전 (rotate), 기울임 (skew), 이동 (translate), 확대 / 축소 (scale) 가적용된사례이다. 또한마우스를올리면추가적변환이일어난다. <hr> <div id="rotate">rotate 20 deg</div> <div id="skew">skew(0,-20deg)</div> <div id="translate">translatey(100px)</div> <div id="scale">scale(3,1)</div> </body> </html> 마우스를올릴때