Chapter01웹프로그래밍과HTML5개요
1.웹개요
웹의기본목적과구성
인터넷과웹은다르다
웹브라우저
웹서버와웹사이트
웹문서와전자문서의차이
웹페이지의주소,URL
웹브라우저와웹서버사이의통신,HTTP
2.웹의시작과성공
웹의시작
웹의성공
모든곳에웹이있다
3.웹페이지구성
웹페이지구성3요소
3요소를분리하여웹페이지개발
HTML,CSS,Javascript
HTML,CSS,Javascript로분리된웹페이지만들기
4.HTML5
HTML언어의역사
HTML5의출현배경
HTML5표준과의의
HTML5의기능
5.HTML5웹프로그래밍개발과정
HTML5문서편집
검증(validation)
디버깅
요약01
OpenChallenge01
연습문제
Chapter02HTML5기본문서만들기
1.HTML5개요
HTML페이지기본
HTML태그
2.HTML기본문서만들기
타이틀달기,〈title〉
문단제목(장,절,소제목등)달기,〈h1〉,〈h6〉
툴팁달기,title속성
단락나누기,〈p〉
수평선긋기,〈hr〉
새로운줄로넘어가기,〈br〉
문자,기호,심볼입력
개발자포맷그대로출력하기,〈pre〉
텍스트꾸미기
블록태그와인라인태그
HTML메타데이터삽입
3.고급문서만들기
이미지삽입,〈img〉
리스트만들기,〈ol〉,〈ul〉,〈dl〉
표만들기,〈table〉
4.하이퍼링크와항해
하이퍼링크만들기,〈a〉
id속성으로앵커만들기
파일다운로드링크만들기,〈a〉의download속성
5.인라인프레임
인라인프레임만들기,〈iframe〉
인라인프레임윈도우의이름
브라우저윈도우와인라인프레임윈도우의계층관계
target속성에문서를출력할윈도우지정
6.미디어삽입
미디어의표준화,〈audio〉,〈video〉
비디오삽입,〈video〉
오디오삽입,〈audio〉
요약02
OpenChallenge02
연습문제
Chapter03HTML5문서구조화와웹폼
1.HTML5의문서구조화
문서의구조
기존HTML의한계
검색엔진이좋아하는웹페이지,시맨틱웹
HTML5문서의구조와시맨틱태그
문서의모양은구조와별개
HTML5문서구조화사례
기존HTML문서와HTML5문서비교
HTML5문서구조화연습
시맨틱블록태그
시맨틱인라인태그
2.웹폼
웹폼과폼요소
간단한로그인폼만들기
폼태그,〈form〉
네이버검색사례를통한폼전송과정의이해
3.폼만들기
텍스트입력,〈inputtype=“text|password”〉,〈textarea〉
데이터목록을가진텍스트입력창,〈datalist〉
텍스트/이미지버튼만들기
선택형입력
〈label〉로폼요소의캡션만들기
색입력,〈inputtype="color"〉
시간정보입력
스핀버튼과슬라이드바로편리한숫자입력
입력할정보의힌트보여주기
형식을가진텍스트입력
폼요소들의그룹핑,〈fieldset〉
요약03
OpenChallenge03
연습문제
Chapter04CSS3로웹페이지꾸미기
1.CSS3스타일시트개요
CSS3
CSS3맛보기예제
CSS3스타일시트구성
2.CSS3스타일시트만들기
〈style〉태그로스타일시트만들기
style속성에스타일시트만들기
외부스타일시트파일불러오기
CSS3규칙
3.셀렉터
태그이름셀렉터
class셀렉터
id셀렉터
셀렉터조합하기
전체셀렉터
속성셀렉터
가상클래스셀렉터
4.색과텍스트꾸미기
색
텍스트
CSS3의표준단위
폰트
5.박스모델
HTML태그는사각형박스로다루어진다
박스의구성
박스를제어하는CSS3프로퍼티
고급테두리꾸미기
배경
6.시각적효과
텍스트그림자,text-shadow
박스그림자,box-shadow
마우스커서제어,cursor
요약04
OpenChallenge04
연습문제
Chapter05CSS3고급활용
1.배치
블록박스와인라인박스
박스의유형제어,display
박스의배치,position
float프로퍼티를이용한유동배치
수직으로쌓기,z-index
보일것인가숨길것인가,visibility
콘텐츠를자를것인가말것인가,overflow
2.리스트꾸미기
리스트와아이템의배경
마커의위치,list-style-position
마커종류,list-style-type
이미지마커,list-style-image
리스트단축프로퍼티,list-style
응용:리스트로메뉴만들기
3.표꾸미기
표테두리제어,border
셀크기제어,widthheight
셀여백및정렬
배경색과테두리효과
줄무늬만들기
응용:마우스가올라갈때행의배경색이변하는표만들기(:hover이용)
4.폼꾸미기
input[type=text]로폼요소에스타일입히기
input[type=text]로폼요소의테두리만들기
폼요소에마우스처리
5.CSS3스타일로태그에동적변화만들기
애니메이션
전환
변환
요약05
OpenChallenge05
연습문제
Chapter06자바스크립트언어
1.자바스크립트시작
자바스크립트언어란?
웹페이지에서자바스크립트의역할
자바스크립트코드의위치
자바스크립트로HTML콘텐츠출력
자바스크립트다이얼로그:사용자입력및메시지출력
2.데이터타입과변수
자바스크립트식별자
문장구분
주석문
데이터타입
변수
let의특징
상수
리터럴
3.식과연산자
산술연산
증감연산
대입연산
비교연산
논리연산
조건연산
비트연산
문자열연산
4.조건문
if문
if-else문
다중if-else문
switch문
5.반복문
for문
while문
do-while문
break문
continue문
6.함수
함수개념
함수의구성
함수호출
자바스크립트의전역함수
요약06
OpenChallenge06
연습문제
Chapter07자바스크립트코어객체와배열
1.객체개념
자바스크립트객체
자바스크립트객체의유형
2.코어객체다루기
코어객체종류
new키워드로코어객체생성
객체접근
3.배열과Array
배열
배열을만드는방법
[]로배열만들기
Array로배열만들기
배열의원소개수,length프로퍼티
배열의특징
Array객체의메소드활용
4.Date
5.String
String객체
String객체는수정불가
문자열길이,length
[]로문자접근
String메소드
String활용
6.Math
7.사용자객체만들기
newObject()로객체만들기
리터럴표기법으로객체만들기
프로토타입의개념과사용자객체만들기
요약07
OpenChallenge07
연습문제
Chapter08HTMLDOM과Document
1.HTMLDOM개요
HTML페이지와자바스크립트객체
DOM의목적
DOM트리
DOM트리의특징
HTML태그의출력과DOM객체
DOM객체의구성요소
DOM객체들사이의관계
2.DOM객체다루기
DOM객체구분,id속성
DOM객체찾기,document.getElementById()
DOM객체의CSS3스타일동적변경
DOM객체의innerHTML프로퍼티
this
3.document객체
document개요
이벤트리스너
태그이름으로DOM객체찾기,getElementsByTagName()
class속성으로DOM객체찾기,getElementsByClassName()
document.write()와document.writeln()
document.write()사용시주의할점
document의열기와닫기,open()과close()
4.HTML문서의동적구성
DOM객체동적생성
DOM트리에삽입
DOM객체의삭제
요약08
OpenChallenge08
연습문제
Chapter09이벤트기초및활용
1.이벤트
이벤트개요
이벤트종류
이벤트리스너만들기
2.이벤트객체
이벤트객체란?
이벤트객체전달받기
이벤트객체에들어있는정보
이벤트의디폴트행동취소,preventDefault()
3.이벤트흐름
이벤트흐름과이벤트리스너
이벤트흐름사례
캡쳐리스너와버블리스너
이벤트흐름을중단시킬수있는가?YES
4.마우스핸들링
마우스이벤트객체의프로퍼티
onclick과ondblclick
onmousedown,onmouseup,onmouseover,onmouseout,onmouseenter,onmouseleave,onwheel
onmousemove
oncontextmenu
5.문서와이미지로딩,onload
문서의로딩완료와onload
이미지로딩완료와onload
newImage()로이미지로딩과출력
6.폼과이벤트활용
onblur와onfocus
라디오버튼과체크박스
select객체와onchange
키이벤트,onkeydown,onkeypress,onkeyup
onreset과onsubmit
요약09
OpenChallenge09
연습문제
Chapter10윈도우와브라우저관련객체
1.브라우저관련객체개요
BOM이란
BOM의종류
2.window객체
window객체의생성
window객체의프로퍼티와메소드
window의이벤트리스너
윈도우속성과window의프로퍼티
윈도우열기,window.open(
