수업/자바스크립트
유수봉 교수의 WEB-02
seung_ho_choi.s
2024. 3. 14. 20:45
728x90
첫번째 Html 기능
<!DOCTYPE html>
<html>
<head>
<title>최승호 만세</title>
</head>
<body>
<h3>최승호 만세</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>
<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>최승호 만세</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>
세번째 Js 기능
<!DOCTYPE html>
<html>
<head>
<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 = "몬스터볼.jpg"
}
function hide() { // <img>에 이미지 제거
document.getElementById("fig").src= "";
}
</script>
</head>
<body>
<h3 onmouseover="show()" onmouseout="hide()">
최승호의 몬스터볼 만세</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>
개발자도구 F12
느낀점
JS 너무 오랜만이라서 재밌었다 ㅎㅎ
출처
https://blog.naver.com/newbongman/223382463498
▶유수봉 교수의 WEB-02
유수봉 교수의 WEB-02 <이론> ▶ 웹 페이지 구성 3 요소 웹 페이지의 구조와 내용을 구성한다. 웹...
blog.naver.com
728x90