프론트엔드/HTML

[명품 HTML 5 + CSS3 + Javascript 웹 프로그래밍] 1장 오픈 챌린지

순코딩 2023. 1. 10. 14:55

 

 

  • 문제
  • 코드
  • 코드 수정 라인
  • 결과

 

 

 


문제

 


코드

OC_1.html
0.00MB

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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() {
            document.getElementById("fig").src = "SCD.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>
    입니다.
    </div>
</body>

</html>

 


코드 수정 라인

문제풀이 코드 수정 라인


결과