티스토리 뷰

Front-end/Basic

HTML+CSS+자바스크립트 웹 표준의 정석 6장 마무리 문제

poopooreum 2024. 7. 2. 21:32
반응형

✏️ 6장 마무리 문제 - 1번

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>6-1 마무리 문제</title>
    <link rel="stylesheet" href="css/style1.css" />
  </head>
  <body>
    <h1>웹 기술 - 기본</h1>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>Javascript 기초</li>
    </ul>
  </body>
</html>

<!-- css 파일 -->
h1 {
  background: black;
  color: white;
  padding: 10px;
  display: inline-block;
  font-size: 1.4em;
}
ul {
  list-style: none;
}
li {
  color: blue;
  line-height: 1.5;
  font-size: 1.2em;
}

✏️ 6장 마무리 문제 - 2번

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>6-2 마무리 문제</title>
    <style>
      #container {
        width: 600px;
        margin: 20px auto;
      }
      h1 {
        display: inline-block;
        background-color: #0404aa;
        color: #fff;
      }
      .accent {
        font-weight: bold;
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h1>탐라국 입춘굿</h1>
      <p>
        제주도의 문화축제 중에서 유일하게<span class="accent">
          탐라 시대부터 내려온 축제</span
        >이다.
      </p>
      <p>
        제주에서 입춘은 새철<sup>(제주어,샛절)</sup>드는 날이라 한다.<br />
        하늘의 1만 8,000 신이 지상으로 내려와 새해 일들을 시작하는 때다.
      </p>
    </div>
  </body>
</html>
반응형
저작자표시 비영리 변경금지

'Front-end > Basic' 카테고리의 다른 글

HTML+CSS+자바스크립트 웹 표준의 정석 8장 마무리 문제  (0) 2024.07.02
HTML+CSS+자바스크립트 웹 표준의 정석 7장 마무리 문제  (0) 2024.07.02
HTML+CSS+자바스크립트 웹 표준의 정석 5장 마무리 문제  (0) 2024.07.02
HTML+CSS+자바스크립트 웹 표준의 정석 4장 마무리 문제  (0) 2024.07.02
[Web] 기본 지식 익히기  (0) 2024.04.13
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
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
글 보관함