© 2013 인피니티북스 All rights reserved CHAPTER 7. HTML 와 CSS 로 웹사이트 만들 기 CHAPTER 7. HTML 와 CSS 로 웹사이트 만들 기.

Presentation on theme: "© 2013 인피니티북스 All rights reserved CHAPTER 7. HTML 와 CSS 로 웹사이트 만들 기 CHAPTER 7. HTML 와 CSS 로 웹사이트 만들 기."— Presentation transcript:

1 © 2013 인피니티북스 All rights reserved CHAPTER 7. HTML 와 CSS 로 웹사이트 만들 기 CHAPTER 7. HTML 와 CSS 로 웹사이트 만들 기

2 © 2013 인피니티북스 All rights reserved 웹사이트 작성

3 © 2013 인피니티북스 All rights reserved 웹사이트 구축 과정

4 © 2013 인피니티북스 All rights reserved 내비게이션 구조도

5 © 2013 인피니티북스 All rights reserved 홈페이지 레이아웃

6 © 2013 인피니티북스 All rights reserved 헤더 Web Shop

7 © 2013 인피니티북스 All rights reserved 내비게이션 메뉴 Home About Us News My Account Contacts

8 © 2013 인피니티북스 All rights reserved 왼쪽 수직 메뉴 카테고리 컴퓨터 의류 음악 영화 스포츠 / 레저 가구 / 인테리어 식품

9 © 2013 인피니티북스 All rights reserved 섹션

10 © 2013 인피니티북스 All rights reserved 오른쪽 수직 메뉴 Shopping Cart 현재 쇼핑카트에 물품이 없습니다. 쇼핑카트 보기 Log In 아이디 패스워드 회원가입 비밀번호분실

11 © 2013 인피니티북스 All rights reserved 바닥글 Copyright (c) 2013 Web Shop

12 © 2013 인피니티북스 All rights reserved 회원 가입 페이지 body { height: 100%; background-color: #F3F1E9; } label { display: inline-block; width: 120px; } input { display: inline-block; width: 160px; }

13 © 2013 인피니티북스 All rights reserved 회원 가입 페이지 회원정보입력 아이디 중복검사 패스워드 패스워드 확인 이름 휴대폰 번호 이메일

14 © 2013 인피니티북스 All rights reserved 회원 가입 페이지 생일 홈페이지 남성 여성

15 © 2013 인피니티북스 All rights reserved 상품 정보 페이지 #product1, #product2 { width: 200px; float: left; border: 1px dotted red; } 심플하고 슬림한 본체에 코어 i5 3470 과지포스 GT630 을 장착 CPU: 인텔 코어 i5 3470 ( 아이비브릿지 3 세대 ) 사용 가격 : 1,200,000 원

16 © 2013 인피니티북스 All rights reserved 상품 정보 페이지 Full-HD 로 선명한 화면, ISP 패널로 시야각도 좋다 ! CPU: 인텔 코어 i7 3630 QM, CPU: 인텔 코어 i7 3630 QM 가격 : 1,200,000 원

17 © 2013 인피니티북스 All rights reserved 쇼핑카트 페이지 쇼핑 카트 body { height: 100%; background-color: #F3F1E9; } table { width: 100%; border-collapse: collapse; text-align: center; } table caption { color: red; text-decoration: underline; }

18 © 2013 인피니티북스 All rights reserved 쇼핑카트 페이지 Shopping Cart 품목 가격 수량 합계 컴퓨터 세트 2,000,000 원 티셔츠 50,000 원

19 © 2013 인피니티북스 All rights reserved 쇼핑카트 페이지 음악파일 1,000 원 영화파일 5,000 원 Back to Home

20 © 2013 인피니티북스 All rights reserved 외부 CSS 파일

21 © 2013 인피니티북스 All rights reserved CSS 파일 * { /*border: 1px solid red;*/ padding: 0px; margin: 0px; } body { background-color: #F3F1E9; } header { height: 60px; margin: 10px; } nav { margin: 10px; } nav ul { list-style: none; text-align: center; border-top: 1px solid red; border-bottom: 1px solid red; padding: 10px 0; }

22 © 2013 인피니티북스 All rights reserved CSS 파일 nav ul li { display: inline; text-transform: uppercase; padding: 0 10px; letter-spacing: 10px; } nav ul li a { text-decoration: none; color: black; } nav ul li a:hover { text-decoration: underline; } aside#left { width: 175px; margin-top: 20px; float: left; }

23 © 2013 인피니티북스 All rights reserved CSS 파일 #left h4 { font-family: Arial, Helvetica, sans-serif; font-size: 20px; } #left ul { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #FFF; list-style: none; text-indent: 15px; } #left ul li { background: #3f3f3f; line-height: 28px; border-bottom: 1px solid #333; } #left ul li a { text-decoration: none; color: #FFF; display: block; }

24 © 2013 인피니티북스 All rights reserved CSS 파일 #left ul li a:hover { background: #d40203; } #left ul li#active { background: #d40203; } #main { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #464646; overflow: hidden; float: left; width: 430px; } #shopcart { margin-bottom: 20px; } #login { margin-top: 40px; }

25 © 2013 인피니티북스 All rights reserved CSS 파일 aside#right { padding: 0px; margin-left: 10px; width: 200px; float: left; } footer { width: 100%; height: 50px; clear: both; background-image: url(images/footer_bg.gif); background-position: top left; background-repeat: repeat-x; }

26 © 2013 인피니티북스 All rights reserved Q & A