-
[명품 HTML5 + CSS3 + Javascript 웹 프로그래밍] 오픈챌린지 01 - 자기 소개 HTML 페이지 만들기💻 Computer Science/WEB 2021. 3. 4. 18:38
✔ 문제
본문의 그림 1-12, 1-13, 1-14를 참고하여 자신을 소개하는 HTML 페이지를 간단히 작성하라. 자기 이름 위에 마우스를 올리면 사진이 나타나도록 하라. 마우스를 내리면 사라진다. [난이도 🎇🎇🎇]
✔ 내 작성 코드
<!DOCTYPE html> <html> <head> <title>자기소개 페이지</title> <style> body { background-color : white; color : black; margin-left : 40px; margin-right : 40px; } h3 { text-align : center; color : pink; } hr { height : 5px; border : solid grey; background-color : grey } span { color : darkred; font-size : 20px; } </style> <script> function show() { document.getElementById("fig").src="me.jpg"; } function hide() { document.getElementById("fig").src=""; } </script> </head> <body> <h3 onmouseover="show()" onmouseout="hide()"> My name is ooi! have a nice day:)</h3> <hr> <div><img id="fig" src=""></div> <span>Most of all, she is cool and lovable</span>. She always tries hard for what she wants to do. Also, she will continue her efforts for a better world. <span>Please cheer for her! Bye!</span> </body> </html>
✔ 결과 화면
'💻 Computer Science > WEB' 카테고리의 다른 글
[명품 HTML5 + CSS3 + Javascript 웹 프로그래밍] 연습문제 01 - 실습문제 (0) 2021.03.04 [명품 HTML5 + CSS3 + Javascript 웹 프로그래밍] 연습문제 01 - 이론문제 (0) 2021.03.04