명품 웹 프로그래밍
강의 목표 CSS3로 HTML 태그가 출력되는 위치를 조절할 수 있다. CSS3로 리스트를 예쁘게 꾸밀 수 있다. CSS3로 애니메이션, 전환(transition), 변환(transform) 효과를 만들 수 있다.
배치 배치 CSS3로 HTML 태그가 출력되는 위치 지정 배치 기능의 CSS3 프로퍼티들 display position left, right, top, bottom float z-index Visibility overflow
블록 박스와 인라인 박스 HTML 태그는 인라인 태그와 블록 태그로 나뉨 블록 박스와 인라인 박스의 디폴트 출력 모양 인라인 태그는 인라인 박스, 블록 태그는 블록 박스로 출력 블록 박스와 인라인 박스의 디폴트 출력 모양 블록 박스 블록 박스는 새 라인에서 시작. 왼쪽에서 오른쪽 끝까지 통째 점유 <div>DIV</div> 인라인 박스 인라인 박스는 블록 안에 배치 옆에 다른 태그 배치 가능 <div>DIV 내 <span>span</span>과<span>span</span>입니다</div>
박스의 유형 제어 : display
display : block 예 : <span>을 블록 박스로 수정 span { display : block; CSS 스타일 span { display : block; width : 100px; height : 60px; } HTML 코드 100x60 <div> <span>block span</span>과 <span>block span</span>입니다. </div> * <span>을 block 박스로 지정하고, 폭과 높이를 각각 100px, 60px로 지정한 사례. 한 줄을 독점적으로 차지하여 옆에 다른 태그 배치되지 않음
display : inline 예 : <div>를 인라인 박스로 수정 div div { CSS 스타일 div div { display : inline; } HTML 코드 <div style="background : orange"> <div>inline DIV</div> </div> 오렌지 바탕은 바깥 <div> * <div>가 inline박스로 지정됨. inline 박스는 라인 안에 다른 요소들과 함께 배치. 공간이 좁으면 남은 부분이 다음 라인으로 넘어감
display : inline-block 예 : <div>를 인라인 블록 박스로 수정 CSS 스타일 div div { display : inline-block; border : 2px dotted orangered ; background : powderblue; margin : 10px; width : 60px; height : 80px; } margin : 10px HTML 코드 <div style="background : orange"> <div>inline-block DIV</div> </div> * inline-block 박스는 라인 안에 다른 요소들과 함께 배치. 동시에 width, height, margin 으로 크기 조절 가능
예제 5–1 display 프로퍼티로 박스 유형 설정 <!DOCTYPE html> <html><head><title>display 프로퍼티</title> <style> div { border : 2px solid yellowgreen; color : blue; background : aliceblue; } span { border : 3px dotted red; background : yellow; </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> display:none으로 지정되어 텍스트가 보이지 않음 height : 50px
박스의 배치 : position normal flow position 프로퍼티를 이용한 배치 방법 웹 페이지에 나타난 순서대로 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 normal flow의 ‘기본 위치’에서 left, top, bottom, right 프로퍼티의 값만큼 이동한 ‘상대 위치’에 배치 position : relative; right : 20px; bottom : 20px; right : 20px top : 20px 기본 위치 상대 위치 기본 위치 상대 위치 bottom : 20px left : 20px position : relative; left : 20px; top : 20px;
예제 5-2 position : relative 상대 배치 이 예제는 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 { right : 20px; bottom : 20px; </style> </head> <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> h 블록에 마우스를 올리면 상대배치함 k 블록에 마우스를 올리면 상대배치함
예제 5-2 실행 결과 초기 상태 h와 k 블록에 마우스를 올린 경우, 상대 배치에 따라 위치가 변함 right : 20px top : 20px bottom : 20px left : 20px 초기 상태 상대 배치(position:relative) h와 k 블록에 마우스를 올린 경우, 상대 배치에 따라 위치가 변함
예제 5-3 position:absolute 절대 배치 <!DOCTYPE html> <html> <head> <title>절대 배치</title> <style> div { display : inline-block; position : absolute; /* 절대 배치 */ border : 1px solid lightgray; } div > p { display : inline-block; /* div의 자식 p */ 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> top: 30px left: 50px 브라우저 크기가 변해도 절대 배치된 태그 위치는 변하지 않는다.
예제 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> right : 10px bottom : 10px
예제 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로 카드 쌓기 <!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로 텍스트 숨기기 <!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 프로퍼티 활용 <!DOCTYPE html> <html> <head> <title>overflow 프로퍼티</title> <style> p { width : 15em; height : 3em; border : 1px solid lightgray; } .hidden { overflow : hidden; } .visible { overflow : visible; } .scroll { overflow : scroll; } </style> </head> <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> </body> </html> overflow : hidden overflow : visible overflow : scroll
CSS3로 리스트 꾸미기 리스트의 모양을 꾸미는 CSS3 프로퍼티들
리스트 꾸미기에 사용할 HTML 페이지 <!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)
리스트와 아이템에 배경색 입히기 background 프로퍼티 이용 ul { background : goldenrod; CSS 스타일 ul { background : goldenrod; padding : 10px 10px 10px 50px; } ul li { /* ul의 자손 li */ background : greenyellow; margin-bottom : 5px; <ul> 영역 <li> 영역 padding- top : 10px margin- bottom : 5px 마커(아이템바깥에 있음) padding-left : 50px padding-right : 10px
마커의 위치, list-style-position ul { background : goldenrod; padding : 10px 10px 10px 50px; list-style-position : inside; } ul li { background : greenyellow; margin-bottom : 5px; 마커가 아이템 영역의 안쪽에 배치됨 CSS 스타일
마커 종류, list-style-type (a) list-style-type : circle (b) list-style-type : square (f) list-style-type : decimal (d) list-style-type : upper-roman (e) list-style-type : lower-alpha (c) list-style-type : none
이미지 마커, list-style-image 사용자가 이미지 마커 작성 가능 CSS 스타일 ul { background : goldenrod; padding : 10px 10px 10px 50px; list-style-image : url("media/marker.png"); } ul li { background : greenyellow; margin-bottom : 5px; 모든 아이템에 동일한 이미지 마크
예제 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로 표 꾸미기 CSS3로 표 꾸미기를 설명할 기본 HTML 문서 <!DOCTYPE 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> </table> </body> </html> <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> </table>
표 테두리 제어, border border : 표 테두리 border-collapse : collapse; /* 중복된 테두리 합치기 */ table { border : 1px solid blue; } td, th { border : 1px dotted green; 테두리 두께 1 픽셀 실선 파란색 점선 border-collapse : collapse; 표와 셀의 테두리를 합친 결과 모든 <td>, <th>에 적용
<thead>의 자손 <th> 셀 크기 제어, width height th { height : 40px; width : 100px; } td { height : 20px; 40px 20px 100px thead th { td, th { <thead>의 자손 <th>
셀 여백 및 정렬 padding : 여백 text-align : 정렬(eft, center, right) td, th { height : 20px; width : 100px; padding : 10px; text-align : right; } 셀 모두 오른쪽 정렬 10픽셀 패딩
배경색과 테두리 효과 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
<tbody>의 자손 <tr> 줄무늬 만들기 짝수 번째 행(<tr>)의 배경색을 aliceblue 색으로 지정 thead, tfoot { background : darkgray; color : yellow; } tbody tr:nth-child(even) { /* 짝수 <tr>에 적용*/ background : aliceblue; <tbody>의 자손 <tr>
예제 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으로 변함
폼 꾸미기 input[type=text]로 폼 요소의 글자 색 지정 input[type=text]로 폼 요소의 테두리 만들기 <label> 이름 : <input type="text" placeholder="Elvis"> </label> input[type=text] { color : red; } CSS 스타일 HTML 코드 입력되는 글자 색 red CSS 스타일 input[type=text] { border : 2px solid skyblue; border-radius : 5px; } HTML 코드 2px 두께의 둥근 모서리 테두리) <label> 이름 : <input type="text" placeholder="Elvis"> </label>
폼 꾸미기 폼 요소에 마우스 처리 마우스가 올라올 때, :hover 포커스를 받을 때, :focus input[type=text] { color : red; } input[type=text]:hover { background : aliceblue; CSS 스타일 마우스가 올라오면 입력 창이 aliceblue로 변경 input[type=text]:focus { font-size : 120%; } CSS 스타일 마우스 클릭 시 포커스가 주어지며, 글자 크기가 120%로 증가
예제 5-11 스타일로 폼 꾸미기 <!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 { /* 포커스 받을 때 */ font-size : 120%; label { display : block; /* 새 라인에서 시작 */ padding : 10px; label span { float : left; width : 90px; text-align : right; </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> <span>Comment</span><textarea placeholder="메시지를 남겨주세요"></textarea> <span></span><input type="submit" value="submit"> </form> </body></html> 포커스를 받으면 글자 크기는 120% 커짐 마우스가 올라가면 배경색이 aliceblue로 바뀜
CSS3 스타일로 태그에 동적 변화 만들기 CSS3로만 HTML 태그 모양의 동적 변화 가능 3 가지 기법 지원 애니메이션(animation) 전환(transition) 변환(transform)
CSS3로 애니메이션 만들기 HTML 태그의 모양 변화를 시간 단위로 설정 애니메이션 코딩 작업 1. @keyframes으로 HTML 태그의 시간별 모양 변화 만들기 2. 애니메이션 스타일 시트 작성 @keyframes textColorAnimation { 0% { color : blue; } /* 시작 시. 0% 대신 from 사용 가능 */ 30% { color : green; } /* 30% 경과 시까지 */ 100% { color : red; } /* 끝까지. 100% 대신 to 사용 가능 */ } span { animation-name : textColorAnimation; /* 애니메이션 코드 이름 */ animation-duration : 5s; /* 애니메이션 1회 시간은 5초 */ animation-iteration-count : infinite; /* 무한 반복 */ }
CSS3 애니메이션 사례 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; 무한 반복 5초 경과 0% 30% 100% HTML 코드 <p><span>span</span>텍스트를 5초에 blue, green, red로 무한 반복합니다. </p>
예제 5-12 애니메이션 만들기 연습 ‘꽝!’ 글자의 크기를 3초에 걸쳐 500%에서 100%로 서서히 축소되는 애니메이션을 작성하라. 애니메이션은 무한 반복한다. 0%(from) 꽝! 시간 100%(to) font-size : 500% font-size : 100% 3초 경과
예제 5-12 애니메이션 만들기 연습 정답 <!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> from은 0%로 to는 100%로 수정 가능 500%의 크기로 시작하여 3초 내에 100%로 줄어드는 애니메이션 이 태그에 애니메이션 작동
전환(transition) 전환이란? HTML 태그에 적용된 CSS3 프로퍼티 값의 변화를 서서히 진행시 켜 애니메이션 효과 생성 HTML 태그의 색이나 모양, 위치 등이 서서히 변하는 효과 전환 설정 : transition 프로퍼티 이용 꽝! 500%; 5초 동안 서서히 글자 확대 <span>꽝!</span> span { transition : font-size 5s; } span:hover { font-size : 500%; CSS 스타일 HTML 코드 전환 프로퍼티 전환 시간 마우스가 글자 위에 올라오면 현재 크기에서 500% 크기로 전환 진행 <span> 태그의 글자 크기가에 변화가 일어나면, 5초에 걸쳐 서서히 변화가 진행되도록 전환 지시 <span> 태그에 마우스를 올리면 글자 크기를 500% 확대 -> 전환 효과시작
예제 5-13 font-size에 대한 전환 효과 만들기 <!DOCTYPE html> <html> <head><title>전환</title> <style> span { transition : font-size 5s; } span:hover { font-size : 500%; </style> </head> <body> <h3>font-size에 대한 전환</h3> <hr> <p><span>꽝!</span> 글자에 마우스를 올려보세요.</p> </body> </html> <span>에 마우스를 올리면 5초 동안 점진적으로 글자를 500% 확대.
변환(transform) 텍스트나 이미지를 회전, 확대 다양한 기하학적인 모양 으로 출력 회전 각도의 단위는 deg이며 시계방향의 회전 20o 100px -20o 회전 기울임 이동 확대/축소 Y축으로 1배 확대 x축으로 3배 확대 div { transform : rotate(20deg); } div { transform : translateY(100px); } div { transform : scale(3,1); } div { transform : skew(0deg, -20deg); }
transform에 사용 가능한 2차원 변환 함수
예제 5-14 다양한 변환 사례 초기화면 마우스를 올릴 때 <!DOCTYPE html> <html> 예제 5-14 다양한 변환 사례 <!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> 초기화면 마우스를 올릴 때