HTML5 텍스트 작성

카테고리 없음

HTML5 텍스트 작성

짱구는굿 2023. 12. 17. 00:57

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

[결과]

HTML은 태그로 이루어져있다 텍스트 파일에 아무리 엔터를 쳐서 줄은 바꿔도 적용이 안되지만 태그를 주면 바꿀수있다

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

[결과]

style -> SCC3

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

[결과]

javascript