Lecture Note – 페이지 2

Chapter 10. 윈도우와 브라우저 관련 객체

교재 예제 ex10-01.html ex10-02.html ex10-03.html ex10-04.html ex10-05.html ex10-06.html ex10-07.html ex10-08.html ex10-09.html ex10-10.html ex10-11.html ex10-12.html fig10-01.html BOM(Browser Object Model) 객체들 window – 브라우저 윈도우 모양 제어. 새 윈도우 열기/닫기 navigator – 브라우저에 대한 다양한 정보 제공 history – 브라우저 윈도우에 로드한 URL 리스트의 히스토리 관리 location – 브라우저 윈도우에 로드된 HTML… Continue Reading Chapter 10. 윈도우와 브라우저 관련 객체

Chapter 09. 이벤트 기초 및 활용

교재 예제 ex9-01.html ex9-02.html ex9-03.html ex9-04.html ex9-05.html ex9-06.html ex9-07.html ex9-08.html ex9-09.html ex9-10.html ex9-11.html ex9-12.html ex9-13.html ex9-14.html ex9-15.html ex9-16.html ex9-17.html ex9-18.html ex9-19.html ex9-20.html ex9-21.html fig9-01.html fig9-02.html 이벤트 정의 : 마우스 클릭, 키보드 입력, 이미지나 HTML 문서의 로딩, 타이머의 타임 아웃 등 사용자의 입력 행위나 문서나 브라우저의 상태 변화를 자바스크립트 코드에게 알리는… Continue Reading Chapter 09. 이벤트 기초 및 활용

Chapter 08. HTML DOM과 Document

교재 예제 ex8-01.html ex8-02.html ex8-03.html ex8-04.html ex8-05.html ex8-06.html ex8-07.html ex8-08.html ex8-09.html ex8-10.html ex8-11.html fig8-02.html 이벤트 리스너 만드는 3가지 방법 HTML 태그 내에 작성 DOM 객체의 이벤트 리스너 프로퍼티에 작성 DOM 객체의 addEventListener() 메소드 이용 자바스크립트 코드는 브라우저로부터 3 가지 유형의 객체를 제공 받아 활용 코어 객체(String, Math, Date, Array, Funciton… Continue Reading Chapter 08. HTML DOM과 Document

Chapter 07. 자바스크립트 코어 객체와 배열

교재 예제 ex7-01.html ex7-02.html ex7-03.html ex7-04.html ex7-05.html ex7-06.html ex7-07.html ex7-08.html ex7-09.html ex7-10.html ex7-11.html 자바스크립트 객체 구성 프로퍼티(property)와 메소드(method)로 구성 property : 속성(변수) method : 함수 객체 유형 코어 객체 HTML DOM 객체 브라우저 객체 코어 객체 종류 : Array, Date, String, Math 등 생성 : let today = new Date();… Continue Reading Chapter 07. 자바스크립트 코어 객체와 배열

Chapter 06. 자바스크립트 언어

교재 예제 ex6-01.html ex6-02.html ex6-03.html ex6-04.html ex6-05.html ex6-06.html ex6-07.html ex6-08.html ex6-09.html ex6-10.html ex6-11.html ex6-12.html ex6-13.html ex6-14.html ex6-15.html ex6-16.html ex6-17.html ex6-18.html ex6-19.html ex6-20.html ex6-21.html ex6-22.html ex6-23.html ex6-24.html fig6-01.html fig6-02-03-04.html fig6-for.html fig6-while.html 자바스크립트 코드 작성 <script> </script> 태그에 작성 <script src=”filename.js”> </script> 별도 파일에 작성 후 호출 <a href=”javascript:alert(‘클릭’);”> 클릭하세요</a>와 같이 href에… Continue Reading Chapter 06. 자바스크립트 언어

Chapter 05. CSS3 고급활용

교재 예제 ex5-01.html ex5-02.html ex5-03.html ex5-04.html ex5-05.html ex5-06.html ex5-07.html ex5-08.html ex5-09.html ex5-10.html ex5-11.html ex5-12.html ex5-13.html ex5-14.html fig5-01-a.html fig5-01-b.html fig5-03.html fig5-04.html fig5-05.html fig5-06.html fig5-08.html fig5-09.html fig5-10.html fig5-11.html fig5-12.html fig5-13.html fig5-14.html fig5-15.html fig5-16.html fig5-17.html fig5-18.html fig5-19.html fig5-20.html fig5-21.html fig5-22.html fig5-23.html fig5-24.html fig5-25.html fig5-27.html list-style-shorthand.html

Chapter 04. CSS3로 웹페이지 꾸미기

교재 예제 ex4-01.html ex4-02.html ex4-03.html ex4-04.html ex4-05.html ex4-06.html ex4-07.html ex4-08.html ex4-09.html ex4-10.html ex4-11.html ex4-12.html ex4-13.html ex4-14.html ex4-15.html ex4-16.html ex4-17.html ex4-18.html ex4-19.html ex4-20.html ex4-21.html fig4-04.html fig4-05.html fig4-06.html fig4-07.html fig4-08.html fig4-09.html fig4-10.html fig4-13-a.html fig4-13-b.html fig4-15.html fig4-22.html fig4-24.html fig4-25.html p-border-shorthand.html p-border.html p-left-border.html universalSelectorSample.html 참조 : http://www.tcpschool.com/css/intro background : 배경 background : 모든 background… Continue Reading Chapter 04. CSS3로 웹페이지 꾸미기

Chapter 03. HTML5 문서 구조화와 웹 폼

Chapter 03 시멘틱 태그 시멘틱 태그 사용예 구 HTML(div, span 사용) HTML5(header, section 사용) html5 sample(mozart) 예제 3-2 블록 태그(figure) 예제 3-3 블록 태그(detail summary) 예제 3-4 인라인 태그(mark, time, meter, progress) 예제 3-5 로그인 폼(PHP 추가했음) 예제 3-6 폼(text, password, textarea) 예제 3-7 폼(datalist) 예제 3-8 폼(button, submit, reset,… Continue Reading Chapter 03. HTML5 문서 구조화와 웹 폼

HTML, CSS, Javascript 사용 웹페이지 샘플

참조 : 명품 HTML5+CSS3+Javascript 웹 프로그래밍 (개정판) HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>웹 페이지의 구성 요소</title>
</head>
<body>
<h3>Elvis Presley</h3>
<hr>
He was an American singer and actor. In November
1956, he made his film debut in <span>Love Me
Tender</span>. He is often referred to as
"<span>the King of Rock and Roll</span>".
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>Elvis Presley</h3>

<hr>

He was an American singer and actor. In November

1956, he made his film debut in <span>Love Me

Tender</span>. He is often referred to as

"<span>the King of Rock and Roll</span>".

</body>

</html>

CSS 코드로 문서 모양 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>웹 페이지의 구성 요소</title>
<style>
	body { background-color : linen; color : green;
				margin-left : 40px; margin-right : 40px;}
	h3 { text-align : center; color : darkred;}
	hr { height : 5px; border : solid grey;
				background-color : grey }
	span { color: blue; font-size: 20px; }
</style>
</head>
<body>
<h3>Elvis Presley</h3>
<hr>
He was an American singer and actor. In November
1956, he made his film debut in <span>Love Me
Tender</span>. He is often referred to as
"<span>the King of Rock and Roll</span>".
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

<head>

<style>

body { background-color : linen; color : green;

margin-left : 40px; margin-right : 40px;}

h3 { text-align : center; color : darkred;}

hr { height : 5px; border : solid grey;

background-color : grey }

span { color: blue; font-size: 20px; }

</style>

</head>

<body>

<h3>Elvis Presley</h3>

<hr>

He was an American singer and actor. In November

1956, he made his film debut in <span>Love Me

Tender</span>. He is often referred to as

"<span>the King of Rock and Roll</span>".

</body>

</html>

JavaScript 코드로 사용자 인터페이스 처리

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>웹 페이지의 구성 요소</title>
<style>
	body { background-color : linen; color : green;
				margin-left : 40px; margin-right : 40px;}
	h3 { text-align : center; color : darkred;}
	hr { height : 5px; border : solid grey;
				background-color : grey }
	span { color: blue; font-size: 20px; }
</style>
<script>
	function show() { // <img>에 이미지 달기
		document.getElementById("fig").src = "ElvisPresley.png"
	}
	function hide() { // <img>에 이미지 제거
		document.getElementById("fig").src= "";
	}
</script>
</head>
<body>
<h3 onmouseover="show()" onmouseout="hide()">
		Elvis Presley</h3>
<hr>
<div><img id="fig" src=""></div>
He was an American singer and actor. In November
1956, he made his film debut in <span>Love Me
Tender</span>. He is often referred to as
"<span>the King of Rock and Roll</span>".
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!DOCTYPE html>

<html>

<style>

body { background-color : linen; color : green;

margin-left : 40px; margin-right : 40px;}

h3 { text-align : center; color : darkred;}

hr { height : 5px; border : solid grey;

background-color : grey }

span { color: blue; font-size: 20px; }

</style>

function show() { // <img>에 이미지 달기

document.getElementById("fig").src = "ElvisPresley.png"

}

function hide() { // <img>에 이미지 제거

document.getElementById("fig").src= "";

}

</script>

</head>

<body>

Elvis Presley</h3>

<hr>

He was an American singer and actor. In November

1956, he made his film debut in <span>Love Me

Tender</span>. He is often referred to as

"<span>the King of Rock and Roll</span>".

</body>

</html>

html_css_js.zip

Chapter 02. HTML5 기본 문서 만들기

HTML5 페이지의 기본 구조

<!DOCTYPE html>
<!-- 주석문 -->
<html>
    <head>
        문서제목, 자바스크립트 코드, CSS 스타일 정의, 메타데이터 정의
    </head>
    <body>
        문서의 본문
    </body>
</html>

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<head>

문서제목, 자바스크립트 코드, CSS 스타일 정의, 메타데이터 정의

</head>

<body>

문서의 본문

</body>

</html>

HTML 태크와 속성 대소문자 구분 없음 태그는 시작 태그 – 종료 태그 쌍으로 이루어짐(예외 : BR, HR 등) 속성에 불필요한 공백은 HTML5 표준에 어긋남 태그 <title>, <h1>, <h2>, .. , <h6> <p>, <hr>, <br>, <pre> 문자, 기호 표현 : " ' > 블록 태그, 인라인… Continue Reading Chapter 02. HTML5 기본 문서 만들기