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

Posted on: 2023년 09월 18일 2023년 09월 18일
Categories: 강의자료, 웹프로그래밍

참조 : 명품 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>

<!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>

<!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>

<!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

whan0623

516