HTML5+CSS3+Javascript 웹 프로그래밍 1장 실습문제

chae5!·2024년 11월 14일

1장 실습문제

  1. 다음 HTML5 페이지는 HTML 태그에 2개, CSS에 1개의 간단한 오류를 포함하고 있다. 오류를 수정하라.
<DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>웹 페이지의 구성 요소</title>
    <style>
      h3 { text-align: center; color: darkred; }
      span { color = blue; font-size: 20px; }
  </head>
  <body>
    <h3>Elvis Presley</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>

수정사항1. <!DOCTYPE html>로 수정하기
수정사항2. color : blue;로 수정하기
수정사항3. </style> 추가하기

  1. 다음 HTML5 페이지는 HTML 태그에 2개, CSS에 1개의 간단한 오류를 포함하고 있다. 오류를 수정하라.
<!DOCTYPE html>
<html>
  <body>
    <meta charset="utf-8" />
    <title>웹 페이지의 구성 요소</title>
    <style>
      h3 { text-align: center color: darkred; }
      span { color : blue; font-size: 20px; }
     </style>
  </head>
  <body>
    <h3>Elvis Presley</h>
    <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>

수정사항1. 3번째줄에 <head>로 수정하기
수정사항2. h3 { text-align: center; color: darkred; } 로 ; 추가하기
수정사항3. </h3>로 수정하기

  1. 본문에 있는 그림 1-13의 test2.html을 수정하여 다음과 같이 <span>태그에 둘러싸인 글자색을 violet으로 수정하고 <hr>태그에 의해 출력되는 수평선의 두께를 10px로 변경하라.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>웹 페이지의 구성 요소</title>
    <style>
      body {
        background-color: linen;
        color: green;
        margin-left: 40px;
        margin-right: 40px;
      }
      h3 {
        text-align: center;
        color: darkred;
      }
      hr {
        height: 10px;
        border: solid grey;
        background-color: grey;
      }
      span {
        color: violet;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h3>Elvis Presley</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>

실습결과


  1. 본문에 있는 그림 1-14의 test3.html을 자세히 들여다보고 <span>Love MeTender</span>에 의해 출력된 텍스트 위에 마우스를 올리면 엘비스 프레슬리의 사진 대신 자신의 사진이 출력되도록 수정하라. 사진 이미지는 test3.html 파일이 있는 파일에 두면 된다.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <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 = "shrek.jpg";
      }
      function hide() {
        document.getElementById("fig").src = "";
      }
    </script>
  </head>
  <body>
    <h3>Elvis Presley</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 onmouseover="show()" onmouseout="hide()">Love Me Tender</span>. He is
    often referred to as "<span> the King of Rock and Roll </span>".
  </body>
</html>

실습결과

image.jpg1image.jpg2
profile
기초부터 튼튼히

0개의 댓글