티스토리 뷰

Front-end/Basic

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>7-1 마무리 문제</title>
    <style>
      .conatiner {
        border: 1px solid #ccc;
        width: 500px;
        padding: 10px;
      }
      .subject {
        color: #ad3000;
        font-weight: 700;
        font-size: larger;
      }
      ul {
        list-style: none;
      }
      li {
        line-height: 2;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h1>최신 웹 디자인 트렌드</h1>
      <ul>
        <li>
          <span class="subject">반응형 웹 디자인</span> - 다양한 화면 크기에
          최적화하다
        </li>
        <li><span class="subject">플랫 디자인 </span> - 입체에서 평면으로</li>
        <li><span class="subject">풀스크린 배경 </span> - 콘텐츠에 집중</li>
        <li>
          <span class="subject">원 페이지 사이트 </span> - 한 페이지에 모든
          내용을 담다
        </li>
        <li>
          <span class="subject">패럴랙스 스크롤링 </span> - 동적인 효과로 강한
          인상을!
        </li>
        <li>
          <span class="subject">웹 폰트 </span> - 웹 타이포그래피를 받쳐주는
          기술
        </li>
      </ul>
    </div>
  </body>
</html>

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>7-2 마무리 문제</title>
    <style>
      .container {
        width: 300px;
        height: 70px;
        margin: 0 auto;
        background-color: #444;
      }
      h1 {
        text-align: center;
        line-height: 70px;
        color: #fff;
        text-shadow: 3px 2px 5px #000;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>웹 개발 기초</h1>
    </div>
  </body>
</html>

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>7-3 마무리 문제</title>
    <style>
      .heading {
        background-color: #eee;
      }
      table {
        border: 1px solid black;
        border-collapse: collapse;
        caption-side: bottom;
      }
      td,
      th {
        border: 1px solid black;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        2019 국민 독서실태
      </caption>
      <col class="heading" />
      <col />
      <col />
      <col />
      <thead>
        <tr class="heading">
          <th>구분</th>
          <th>성인</th>
          <th>독서자</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>종이책</th>
          <td>6.1권</td>
          <td>11.8권</td>
        </tr>
        <tr>
          <th>전자책</th>
          <td>1.2권</td>
          <td>7.1권</td>
        </tr>
        <tr>
          <th>오디오북</th>
          <td>0.2권</td>
          <td>5.5권</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

✏️ 7장 마무리 문제 - 4번

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>7-4 마무리 문제</title>
  <style>
    #container{
      width: 650px;
      margin: 0 auto;
      padding: 5px;
    }
    #check{
      border: 1px solid #ccc;
      width: 640px;
    }
    h1{
      color: white;
      background: #222;
      font-size: 1em;
      margin: 0;
      padding: 10px;
    }
    h2{
      color: #ff0000;
      font-size: 1.5em;
      text-align: center;
    }
    p{
      font-size: 1.2em;
      line-height: 2em;
      font-weight: bold;
      text-align: center;
    }
    .accent{
      color: #0000ff;
    }
    .smalltext{
      font-size: 0.7em;
    }
  </style>
</head>
<body>
  <div id="container">
    <img src="images/top.jpg" alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 질좋은 사과를 저렴하게 즐겨보세요">
    <div id="check">
      <h1>확인하세요</h1>
      <h2>주문 및 배송</h1>
      <p><span class="accent">오후 2시 시전</span>주문건은 당일 발송합니다<br>
      2시 이후 주문건은 다음날 발송합니다(주말 제외)
      </p>
      <h2>교환 및 환불</h2>
      <p>불만족시 <span class="accent">100% 환불해</span> 드립니다<br>
      고객센터로 전화주세요</p>
      <hr>
      <h2>고객 센터</h2>
      <p>0000-0000<br>
      <span class="smalltext">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
    </div>
  </div>
</body>
</html>
반응형
저작자표시 비영리 변경금지

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

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