728x90
생능출판사 명품 HTML5+CSS3+Javascript 웹 프로그래밍 수정판
p.58 Open Challenge 01 자기소개 HTML 페이지 만들기
본문의 그림 1-12, 1-13, 1-14를 참고하여 자신을 소개하는 HTML 페이지를 간단히 작성하라. 자기 이름 위에 마우스를 올리면 사진이 나타나도록 하라. 마우스를 내리면 사라진다.
코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>나의 소개</title>
<style>
body{ background-color : lavender; color : green; margin-left : 40px; margin-right : 40px;}
h3{ text-align : center; color : blue;}
hr{ height : 5px; border : solid grey; background-color : grey }
span{ color: darkred; font-size: 20px; }
</style>
<script>
function show() {
document.getElementById("fig").src = "media/shrek.png"
}
function hide() {
document.getElementById("fig").src= "";
}
</script>
</head>
<body>
<h3 onmouseover="show()" onmouseout="hide()">슈렉</h3>
<hr>
<div><img id="fig" src=""></div>
저는 대한민국에서 태어나서 컴퓨터 공학을 전공하는 학생입니다. 제가 제일 좋아하는 과목은 <span>웹 프로그래밍</span>이고, 그 중에서도 <span>자바스크립트</span>를 제일 잘합니다.
</body>
</html>
결과
<마우스 내렸을 때> <마우스 올렸을 때>
728x90
'개발 > 책' 카테고리의 다른 글
| [쉽게 풀어쓴 C언어 Express] 4장 Programming (0) | 2021.09.19 |
|---|---|
| [쉽게 풀어쓴 C언어 Express] 3장 Programming (0) | 2021.09.10 |
| [쉽게 풀어쓴 C언어 Express] 2장 Programming (0) | 2021.09.09 |