[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 6장 연습문제

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 6장 연습문제 2개

Dec 25, 2023

Contents

quiz-1 quiz-1.html mystyle.css quiz-2 quiz-2.html result

quiz-1

quiz-1.html


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

<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>

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

</head>

<body>
  <h1>웹 기술 - 기본</h1>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript 기초</li>
  </ul>
</body>

</html>

mystyle.css


h1 {
  display: inline-block;
  font-size:1.4em;
  background-color:#222;
  color:#fff;
  padding:10px;
}
ul {
  list-style:none;
}
li {
  font-size:1.2em;
  line-height:1.5;
  color:blue;
}

result

quiz-2

quiz-2.html


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

<head>
  <meta charset="UTF-8">
  <title>탐라국 입춘굿</title>
  <style>
    #container {
      width: 600px;
      margin: 20px auto;
      border: 1px solid black;
      font-family: "맑은 고딕", 돋움, 굴림;
    }
    h1{
      display: inline-block;
      background-color: #0404aa;
      color: #fff;
    }
    .accent{ 
      font-size: large;
      font-weight: 900;
      color: red;
      font-style: italic;
    } 
  </style>
</head>

<body>
  <div id="container">
    <h1>탐라국 입춘굿</h1>
    <p>제주도의 문화축제 중에서 유일하게 <span class="accent">전통시대부터 존재했던 축제</span>이다.</p>
    <p>제주에서 입춘은 새철<sup>(제주어, 샛절)</sup> 드는 날. <br>
      하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다.
    </p>
  </div>
</body>

</html>