티스토리 뷰

2장. HTML5 기본 구조와 작성법


 

1. 다음 HTML 요소의 속성 이름과 속성 값, 태그 이름을 모두 적으시오

<img title="바다" alt="sea" src="sea.png" />

 

 

정답

태그 이름: img

속성 이름: title, alt, src

속성 값: "바다", "sea", "sea.png"

 

 

 

 

2. 다음 중 head 태그 내부에 입력할 수 없는 태그는 무엇인가?

1. style 2. meta 3. base 4. header

 

 

정답

4. header

 

 

해설

head 내부에 사용 가능한 태그는

meta, title, script, link, style, base 태그 입니다. 

 

 

 

 

 

3. HTML5 기본 페이지 형태는 다음과 같다. 빈칸에 들어갈 알맞은 내용을 적으시오.

 

정답

<!DOCTYPE html>

<html>

<head>

    <title>HTML5 Basic</title>

</head>

<body>

</body>

</html>

 

 

 

 

4. 다음 코드에서 잘못된 부분을 표시하고 이를 바르게 수정하세요.

 

<!DOCTYPE html>

<html>

<head>

    <title>HTML Basic </title>

    <style src = "outer_stylesheet.css"> </style>

    <script src="outer_javascript.js></script>

</head>

<body>

 

</body>

</html>

 

 

정답

<style src = "outer_stylesheet.css"> </style> 

위의 부분을

 

<link rel = "stylesheet" href= "outer_stylesheet.css" />

로 바꾸면 됩니다.

 


 

3장. HTML5 기본 태그


1. 다음 중 HTML5 표준에 추가된 시맨틱 태그가 아닌 것은 무엇인가?

1. head 태그    2. nav 태그   3. aside 태그   4. footer 태그

 

 

정답

2. head 태그

 

 

 

 

2. 다음 중 인라인 형식의 태그는 무엇인가?

1. div 태그   2. a 태그   3. ul 태그   4. li 태그

 

 

정답

2. a 태그

 

 

 

3. 클릭하면 한빛미디어의 홈페이지(http://hanb.co.kr)로 이동하는 a 태그를 작성하시오

 

정답

<a href = 'http://hanb.co.kr:> </a>

 

 

 

 

4. 다음과 같이 폴더를 구성한 후 클릭하면 한빛 미디어의 홈페이지로 이동하도록

이미지가 포함된 a 태그를 작성하시오

 

정답

<a href = "HTMLPage.html"><img src = "hanb_logo.gif"/></a> 

 

 

 

 

5. 다음 페이지를 생성하시오

 

 

정답

 

<!DOCTYPE html>

<html>

  <head>

    <title></title>

  </head>

  <body>

    <h1>HTML5 Basic</h1>

    <h2> ITCookbook - HanbitAcademy </h2>

    <hr />

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  </body>

</html>

 

 

 

6. 다음 목록을 생성하시오

 

 

정답

 

<!DOCTYPE html>

<html>

  <head>

    <title></title>

  </head>

  <body>

    <ul>

      <li>따뜻한 음료</li>

      <ol>

        <li>커피</li>

        <li>녹차</li>

        <li>둥굴레차</li>

      </ol>

      <li>차가운 음료</li>

      <ol>

        <li>커피</li>

        <li>스무디</li>

        <li>식혜</li>

      </ol>

    </ul>

  </body>

</html>

 

 

 

7, 다음 표를 생성하시오

 

정답

 

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <table border = "1">
      <tr>
      <th colspan="6">한국의 차 </th>
    </tr>
      <tr>
        <th rowspan="6">뿌리차</th>
        <td>인삼차</td>
        <th rowspan="9">과일차</th>
        <td>수정과</td>
        <th rowspan="5">잎차</th>
        <td>뽕잎차</td>
      </tr>
      <tr>
        <td>당귀차</td>
        <td>유자차</td>
        <td>감잎차</td>
      </tr>
      <tr>
        <td>생강차</td>
        <td>구기자차</td>
        <td>솔잎차</td>
      </tr>
      <tr>
        <td>칡차</td>
        <td>대추차</td>
        <td>국화차</td>
      </tr>
      <tr>
        <td>둥굴레차</td>
        <td>오미자차</td>
        <td>이슬차</td>
      </tr>
      <tr>
        <td>마차</td>
        <td>매실차</td>
        <td rowspan="4">기타</td>
        <td>무충차</td>
      </tr>
      <tr>
        <th rowspan="3">곡물차</th>
        <td>보리차</td>
        <td>모과차</td>
        <td>영지버섯차</td>
      </tr>
      <tr>
        <td>옥수수차</td>
        <td>산수유차</td>
        <td>귤강차</td>
      </tr>
      <tr>
        <td>현미차</td>
        <td>탱자차</td>
        <td>쌍화차</td>
      </tr>
    </table>
  </body>
</html>

 

 

 

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/04   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함