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

Slides:



Advertisements
Similar presentations
앱솔루트 MOOC 간호학과 압축강의 시청 사용절차 Manual 부산경상대학교 앱버튼 Ver 0.1.
Advertisements

Copyright © 2008 Wei Qi Xia. All rights reserved. 거시적 영향 발표자:하위기 2008 년 11 월 15 일.
모바일 웹코딩 퍼블리싱 팀 최 웅 대리 ※ 본 강의는 ‘어비의 모바일 웹’을 참고하여 제작하였습니다.
임직원 APP 설치 가이드 경영전략처 정보기획 TF 팀. 임직원 App- 운영체제 구분  안드로이드 갤럭시, 갤럭시노트, 갤럭시 S4 [ 삼성전자 ] 옵티머스 [LG 전자 ] 베가 [ 팬텍 모토로이 [ 모토롤라 ]  ios 아이폰 [ 애플.
2. 미디어 쿼리 : 다양한 뷰포트의 지원 김은옥 1 학습목표 : 여기서는 미디어 쿼리 작성방법, 뷰포트 지정 방법 등 을 살펴본다.
1. 시설관리공단 상임이사 정수기준을 위반한 초과 여부에 대한 질의 2. 졸속사업으로 인한 예산낭비에 대한 질의 (KT 도로개설, 강변역 고구려역사 ]
5 장. CSS3 스타일시트 기초 HTML5 웹 프로그래밍 입문 ( 교수용 ) 1. 목차 5.1 CSS3 시작하기 5.2 CSS 기본 사용법 5.3 문자와 색상 지정하기 5.4 박스모델 설정하기 2.
Copyright © 2006 by The McGraw-Hill Companies, Inc. All rights reserved. McGraw-Hill Technology Education Copyright © 2006 by The McGraw-Hill Companies,
© 2013 인피니티북스 All rights reserved CHAPTER 3. HTML 멀티미디어와 입력요소.
농촌인적자원개발센터 홈페이지 회원가입 방법. 회원가입 1. 농촌인적자원개발센터 홈페이지 ( 포탈사이트 ( 구글, 네이버 다음 등 ) 농촌인적자원개발센터 검색 ★ 홈페이지 접속 - 회원가입 버튼 클릭.
보도메일 HTML 소스 사용 안내 Version 1.0( 미디어국 제작)
사회보험 징수통합 관련 조사 결과 보고서 한국갤럽조사연구소
6 스마트폰 레이아웃.
로그인 1 케피코 회사 로고를 클릭합니다.
CHAPTER 11. 자바스크립트와 캔버스로 게임만들기.
CSS Web Page Construction
CHAPTER 4. CSS 스타일시트 기초.
CHAPTER 16. 모바일 웹페이지.
HTML과 CSS HTML과 CSS 세미나에 오신 것을 환영합니다.
CSS List & Table Chapter 5 Part 2
10장 동적 HTML (Dynamic HTML)
HTML & CSS 겉핥기 2012 SUMMER SPARCS.
HTML5 웹 프로그래밍 입문 (개정판) 4장. CSS3 스타일시트 기초.
명품 웹 프로그래밍.
HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세
HTML5 웹 프로그래밍 입문(교수용) 7장. 웹사이트제작실습.
01. 강사 소개 강사 신지식인 선정 한국음식업 중앙회 전남지회 정책자문위원 내셔널 트러스트 문화유산 자문위원
실제 대형 쇼핑몰 구축을 위해 사용되었던 스토리 보드
KD Navien Smart Customer Service Mobile Web
웹디자인 표준 정의서 통합정보시스템 구축 (1단계) KCDC-PRO-012 Version 1.0.
이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:
CHAPTER 5. CSS 박스모델과 응용.
처음부터 다시 배우는 HTML5&CSS3 실전 웹 표준 사이트 제작까지
HTML5 웹 프로그래밍 입문(교수용) 2장.HTML5 문서의 기본.
HTML5를 이용한 모바일 웹 앱 학과:컴퓨터 시뮬레이션 학과 학번: / 이름:이성진 / 정지영.
CSS – 개요 Cascading Style Sheets의 약자 “계단형 스타일시트”라고 한다.
CHAPTER 6. CSS 레이아웃과 애니메이션.
HTML5 웹 프로그래밍 입문 (개정판) 5장. 고급 표현을 위한 CSS3 활용.
CSS BOX MODEL Chapter 5 Part 1
CSS 기초 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역
HTML5+CSS3 실무 테크닉 김은기 저.
~ 초콜릿 공작소 ~ 프로젝트 완료 조은아.
Copyright by All rights reserved.
Html(front end) & jsp(back end)
HTML5 웹 프로그래밍 입문 (개정판) 2장. HTML5 문서의 기본.
Chapter02 시맨틱 웹을 위한 요소 HTML5 Programming.
우리집닷컴 Style Guide 우리집닷컴 Web Style Guide Web Planner 김 영실.
학습목표 학습목차 박스 모델에 대한 개념을 이해할 수 있습니다.
2018년 10월 08일 박성진 Web & Internet [05] CSS3 속성 2018년 10월 08일 박성진
게임웹사이트운영 [9] div & span.
게임웹사이트운영 [10] 폼 작성.
CSS Layout Chapter 6 Part 1
Copyright 2011 ㈜굿애플 All rights reserved
산학협력단 연구지원금 시스템 사용자 매뉴얼 Copyrightⓒ2014 UOSICF. All Rights Reserved. 1.
2018년 11월 05일 박성진 Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진
13장. 테두리, 폼 양식 관련 스타일과 레이어 테두리 관련 스타일 폼 양식 관련 스타일 레이어.
HTML CSS 자바스크립트 무작정 따라하기
주의(主意) 본 자료는 고사성어100선의 교육자료 데모용입니다. 제품구입시 모든 교육용 자료는 별도로 무상 공급됩니다.
Web & Internet [06] CSS3 응용과 레이아웃
HTML CSS 자바스크립트 무작정 따라하기
11강_CSS 속성-II margin 및 padding 속성 box-sizing 속성 border 속성
맞춤형복지 사용자 시스템 매뉴얼 공무원연금공단 맞춤형복지부 문의사항:
솔개의 교훈 _ 변화만이 살길이다 “변화” 하지 않는 자는 자연 도태됩니다. 과연 당신은 ……. 현재의 위치에 만족 한 상태로
게임웹사이트운영 [7] 폰트,색,박스모델.
중고디카디캠 쇼핑몰 스토리보드 작성일 : 2003년 5월 5일 부 서 : 인터넷사업부 직 급 : 대리 작성자 : 김 진환
4 웹 페이지 레이아웃.
문서 작성에 사용되는 기본태그 HR, PRE, B, I, U, S.
웹과 모바일 홈페이지의 이해와 제작 폰트_레이아웃
中国类型小说海外受追捧, 国内市场类型新作后继乏力
Homework #3 - 페이지 모듈화 및 로그인처리 -
Presentation transcript:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

© 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; }

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

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

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

© 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; }

© 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; }

© 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; }

© 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; }

© 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; }

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