1 Copyright © 2013 Lee, Kim & Park, Life & Power Press 1 를 이용한 레이아웃

2 Copyright © 2013 Lee, Kim & Park, Life & Power Press 2 를 이용한 레이아웃

3 Copyright © 2013 Lee, Kim & Park, Life & Power Press 3 를 이용한 레이아웃 My Blog Page #header { background-color: yellow; width: 100%; height: 50px; } #nav { width: 30%; background-color: red; height: 100px; float: left; }

4 Copyright © 2013 Lee, Kim & Park, Life & Power Press 4 를 이용한 레이아웃 #content { width: 70%; background-color: blue; float: right; height: 100px; } #footer { background-color: aqua; width: 100%; height: 50px; clear: both; } header nav content footer

5 Copyright © 2013 Lee, Kim & Park, Life & Power Press 5 쇼핑카트 페이지 쇼핑 카트 body { height: 100%; background-color: #F3F1E9; } table { width: 50%; border-collapse: collapse; text-align: center; } table caption { color: red; text-decoration: underline; }

6 Copyright © 2013 Lee, Kim & Park, Life & Power Press 6 쇼핑카트 페이지 Shopping Cart 품목 가격 수량 합계 컴퓨터 세트 2,000,000 원 티셔츠 50,000 원

7 Copyright © 2013 Lee, Kim & Park, Life & Power Press 7 쇼핑카트 페이지 음악파일 1,000 원 영화파일 5,000 원 Back to Home

8 Copyright © 2013 Lee, Kim & Park, Life & Power Press 8 메뉴만들기 Web shop Page 카테고리 컴퓨터 의류 음악 영화 스포츠 / 레저 가구 / 인테리어 식품

9 Copyright © 2013 Lee, Kim & Park, Life & Power Press 9 #left { width: 175px; margin-top: 20px; float: left; } #left h4 { font-family: Arial, Helvetica, sans-serif; font-size: 20px; } #left ul { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #FFFFFF; text-indent: 15px; } #left ul li { background: #3f3f3f; line-height: 28px; border-bottom: 1px solid #333; } #left ul li a { text-decoration: none; color: #FFFFFF; display: block; } #left ul li a:hover { background: #d40203; }

10 Copyright © 2013 Lee, Kim & Park, Life & Power Press 10

11 Copyright © 2013 Lee, Kim & Park, Life & Power Press 11 Z-index... #box1 { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background: blue; z-index: 200; } #box2 { position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; background: yellow; z-index: 100; } #box3 { position: absolute; top: 60px; left: 60px; width: 100px; height: 100px; background: green; z-index: 0; }

12 Copyright © 2013 Lee, Kim & Park, Life & Power Press 12 Z-index box #1 box #2 box #3

13 Copyright © 2013 Lee, Kim & Park, Life & Power Press 13 Visibility... #box1 { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background: blue; z-index: 200; } #box2 { position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; background: yellow; z-index: 100; visibility:hidden; } #box3 { position: absolute; top: 60px; left: 60px; width: 100px; height: 100px; background: green; z-index: 0; }

14 Copyright © 2013 Lee, Kim & Park, Life & Power Press 14 Visibility box #1 box #2 box #3