티스토리 뷰

Web/Basic

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>9-1 마무리 문제</title>
    <style>
      body {
        color: white;
        background: url("images/bg1.jpg") repeat-x left bottom fixed;
        background-color: gray;
      }
      h1 {
        margin-top: 50px;
        font-size: 20px;
      }
      p {
        font-size: 16px;
        line-height: 25px;
      }
    </style>
  </head>
  <body>
    <h1>웹 디자인 트렌드를 따라잡는 비법 대공개</h1>
    <p>
      그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는
      시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할
      수 있는 웹 디자인 방법을 알아야 한다. 바로
      <b>코딩을 이용한 웹 디자인</b>이다.
    </p>
  </body>
</html>

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>9-2 마무리 문제</title>
    <style>
      .container {
        width: 500px;
        padding: 10px;
        border: 1px solid #ccc;
        background: rgb(0, 0, 0);
        color: rgb(255, 255, 255);
      }
      h1 {
        font-size: 17px;
      }
      p {
        font-size: 16px;
        line-height: 25px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>웹 디자인 트렌드를 따라잡는 비법 대공개</h1>
      <p>
        그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는
        시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할
        수 있는 웹 디자인 방법을 알아야 한다. 바로
        <b>코딩을 이용한 웹 디자인</b>이다.
      </p>
    </div>
  </body>
</html>

✏️ 9장 마무리 문제 - 3번

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>9-3 마무리 문제</title>
    <style>
      body {
        background-color: #02233b;
      }
      #container {
        margin: 0 auto;
        width: 600px;
        height: 700px;
        border: 1px dotted gray;
        padding: 20px;
        background: #fff url("images/mic.png") no-repeat right bottom fixed;
      }
      img {
        margin: 30px 10px 30px 180px;
      }
      h1 {
        color: #fff;
        background-color: #004344;
        text-align: center;
        padding: 20px;
      }
      h2 {
        font-style: italic;
        text-align: center;
        margin-bottom: 50px;
      }
      h3 {
        color: red;
      }
      ul {
        list-style: none;
        margin: 20px;
      }
      li {
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h1>대학언론사 수습기자 모집</h1>
      <h2>신입생 여러분을 기다립니다</h2>
      <h3>모집분야</h3>
      <ul>
        <li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
        <li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
        <li>엔지니어(0명) : 라디오 방송 녹음 및 ㅁ편집/li></li>
      </ul>

      <h3>혜택</h3>
      <ul>
        <li>수습기자 활동 중 소정의 활동비 지급</li>
        <li>정기자로 진급하면 장학금 지급</li>
      </ul>
    </div>
  </body>
</html>
반응형
저작자표시 비영리 변경금지

'Web > Basic' 카테고리의 다른 글

HTML+CSS+자바스크립트 웹 표준의 정석 11장 마무리 문제  (0) 2024.07.02
HTML+CSS+자바스크립트 웹 표준의 정석 10장 마무리 문제  (0) 2024.07.02
HTML+CSS+자바스크립트 웹 표준의 정석 8장 마무리 문제  (0) 2024.07.02
HTML+CSS+자바스크립트 웹 표준의 정석 7장 마무리 문제  (0) 2024.07.02
HTML+CSS+자바스크립트 웹 표준의 정석 6장 마무리 문제  (0) 2024.07.02
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
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 31
글 보관함