명품 HTML5+CSS3+Javascript 웹 프로그래밍 개정판
OpenChallenge01
자기 소개 HTML 페이지 만들기(p.58)
본문의 그림 1-22, 1-13, 1-14를 참고하여 자신을 소개하는 HTML 페이지를 간단히 작성하라. 자기 이름 위에 마우스를 올리면 사진이 나타나도록 하라. 마우스를 내리면 사라진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>나의 소개</title>
<style>
body {
background-color: rgb(203, 191, 243);
color: green;
margin-left: 40px;
margin-right: 40px;
}
h3 {
text-align: center;
color: blue;
}
hr {
height: 5px;
border: solid gray;
background-color: gray;
}
span {
color: purple;
font-size: 20px;
}
</style>
<script>
function show() {
document.getElementById("shrek").src = "shrek.jpg";
}
function hide() {
document.getElementById("shrek").src = "";
}
</script>
</head>
<body>
<h3 onmouseover="show()" onmouseout="hide()">슈렉</h3>
<hr />
<div><img id="shrek" src="" /></div>
저는 대한민국에서 태어나서 컴퓨터 공학을 전공하는 학생입니다. 제가 제일
좋아하는 과목은 <span>웹 프로그래밍</span>이고, 그 중에서도
<span>자바스크립트</span>를 제일 잘합니다.
</body>
</html>
실습결과
 |  |
|---|
기초부터 튼튼히