티스토리 뷰

Web/HTML

[Web/HTML] HTML - 직접 만들어보기

poopooreum 2024. 4. 15. 20:33
반응형

본 실습문제들은 Do it! html+Css+javascripts의 내용들을 기반으로 하고 있음

 

✏️ 실습 1

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>연습문제 1</title>
  </head>
  <body>
    <h1>수습 국원 모집</h1>
    <h2>방송에 관심 있는 새내기 여러분 환영합니다</h2>
    <p>
      교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부나 전공에 상관없습니다.<br />
      평소 방송에 관심있었던 여러 학우들의 지원바랍니다.
    </p>
    <ul>
      <li><b>모집 기간 :</b> 3월 2일 ~ 3월 11일</li>
      <li><b>모집 분야 :</b> 아나운서, PD, 엔지니어</li>
      <li>
        <b>지원 방법 :</b> 양식 작성 후 이메일 접수<br />
        <i>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</i>
      </li>
    </ul>
    <h3>혜택</h3>
    <ol type="a">
      <li>수습기자 활동 중 소정의 활동비 지급</li>
      <li>정기자로 진급하면 장학금 지급</li>
    </ol>
    <img src="images/mic.jpg" />
  </body>
</html>

연습문제 1

 

✏️ 실습 2

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>연습문제 2</title>
    <style>
      table,
      td,
      th {
        border: 1px solid #ccc;
      }
      td,
      th {
        padding: 10px 20px;
      }
      td:last-child {
        width: 200px;
      }
    </style>
  </head>
  <body>
    <h1>수습 국원 지원 양식</h1>
    <table>
      <tr>
        <th rowspan="3"><b>개인정보</b></th>
        <th><b>이름</b></th>
        <td></td>
      </tr>
      <tr>
        <th><b>학과/학번</b></th>
        <td></td>
      </tr>
      <tr>
        <th><b>연락처</b></th>
        <td></td>
      </tr>
      <tr>
        <td><b>지원 분야</b></td>
        <td colspan="4"></td>
      </tr>
    </table>
  </body>
</html>

연습문제 2

 

 

✏️ 실습 3

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>탐라국 입춘굿</title>
    <link rel="stylesheet" href="css/poster.css" />
  </head>
  <body>
    <div id="container">
      <h1>탐라국 입춘굿</h1>
      <p>
        탐라국입춘굿은 입춘을 맞아 풍년을 기원하는 행사로, 제주도의 문화 축제
        중에서 유일하게 탐라 시대부터 이어져 왔다.
      </p>
      <p>
        제주에서는 입춘을 새철이라 한다.<br />신구간이 끝나 하늘의 1만 8,000신이
        지상으로 내려와 새해 일을 시작하는 때다.
      </p>
      <p>자세한 정보 보기</p>
      <h2>일정</h2>
      <h2>먹거리</h2>
    </div>
  </body>
</html>

 

탐라국 입춘굿

 

 

✏️ 실습 4

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>상품 소개 페이지/title>
</head>
<body>
  <h2>레드향 샐러드 레시피</h2>
  <p><b>재료 : </b> 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
  <p><b>드레싱 : </b> 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
  <ol>
      <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
      <li>레드향과 아보카도, 토마토를 먹기 좋은 크기로 썰어둡니다.</li>
      <li>드레싱 재료를 믹서에 갈아줍니다.</li>
      <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
  </ol>
</body>
</html>

<!-- <ol> ~ </ol>
순서를 나타낼 때 사용한다
<li> ~ </li>
목록을 나타낼 때 사용한다. ex) 숫자

<ul> ~ </ul>
숝설를 사용하지 않을 때 사용한다. -->

연습 문제4

 

 

✏️ 실습 5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>연습 문제5</title>
  </head>
  <body>
    <h1>레드향 샐러드 레시피</h1>
    <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
    <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
    <h3>재료 준비</h3>
    <ol type="a">
      <li>샐러드 채소를 씻어 물기를 제거한 후 먹기 좋게 썰어서 준비합니다.</li>
      <li>레드향과 아보카도, 토마토도 먹기 좋은 크기로 썰어 둡니다.</li>
    </ol>
    <h3>드레싱 준비</h3>
    <ol type="a" start="3">
      <li>드레싱 재료를 믹서에 한꺼번에 넣고 갈아 줍니다.</li>
    </ol>
    <h3>샐러드 완성</h3>
    <ol type="a" start="4">
      <li>
        봄에 샐러드 채소와 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!
      </li>
    </ol>
  </body>
</html>

연습 문제5

 

 

✏️ 실습 6

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>연습 문제6</title>
  </head>
  <body>
    <h1>레드향 샐러드 레시피</h1>
    <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
    <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
    <ul>
      <li>샐러드 채소를 씻어 물기를 제거한 후 먹기 좋게 썰어서 준비합니다.</li>
      <li>레드향과 아보카도, 토마토도 먹기 좋은 크기로 썰어 둡니다.</li>
      <li>드레싱 재료를 믹서에 한꺼번에 넣고 갈아 줍니다.</li>
      <li>
        봄에 샐러드 채소와 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!
      </ul>
    </ol>
  </body>
</html>

 

연습 문제6

 

 

✏️ 실습 7

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>연습 문제7</title>
    <style>
      table,
      th,
      td {
        border: 1px solid #ccc;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px 20px;
      }
    </style>
  </head>
  <body>
    <h2>상품 구성</h2>
    <table>
      <caption>
        선물용과 가정용 상품 구성
      </caption>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>갯수</th>
        <th>가격</th>
      </tr>
      <tr>
        <td>선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>선물용</td>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000원</td>
      </tr>
      <tr>
        <td>가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000원</td>
      </tr>
      <tr>
        <td>가정용</td>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000원</td>
      </tr>
    </table>
  </body>
</html>

연습 문제7

 

 

✏️ 실습 8

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>연습 문제8</title>
  </head>
  <body>
    <h1>상품 구성</h1>
    <table>
      <caption>
        선물용과 가정용 상품 구성
      </caption>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>개수</th>
        <th>가격</th>
      </tr>
      <tr>
        <td rowspan="2">선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000d원</td>
      </tr>
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000d원</td>
      </tr>
      <tr>
        <td rowspan="2">가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000d원</td>
      </tr>
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000d원</td>
      </tr>
    </table>
  </body>
</html>

 

연습 문제8

 

 

✏️ 실습 9

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    table, th, td {
      border:1px solid #ccc;
      border-collapse: collapse;
    }
    th, td { padding:10px 20px; }
  </style>
</head>
<body>
  <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <colgroup>
      <col style="background-color:#eee;">
      <col>
      <col style="width:150px">
      <col style="width:150px">
    </colgroup>
    <thead>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>갯수</t>
        <th>가격</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000원</td>
      </tr>
      <tr>
        <td rowspan="2">가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000원</td>
      </tr>   
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000원</td>
      </tr>
    </tbody>        
  </table>
</body>
</html>

연습 문제9

 

 

✏️ 실습 10

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>연습 문제10</title>
    <style>
      table,
      th,
      td {
        border: 1px solid #ccc;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px 20px;
      }
    </style>
  </head>
  <body>
    <img src="images/tangerines.jpg" alt="레드향" />
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
    <p>
      레드향은 <i>한라봉과 귤을 교배</i>한 것으로 <br />
      일반 귤보다 2 ~ 3배 크고, 과육이 붉고 통통하다.
    </p>
    <p>
      비타민 C와 비타민 P가 풍부해<br />
      <b>혈액순환, 감기예방</b> 등에 좋은 것으로 알려져 있다.
    </p>
    <hr />
    <h1>레드향 샐러드 레시피</h1>
    <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
    <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
    <ol>
      <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
      <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
      <li>드레싱 재료를 믹서에 갈아줍니다.</li>
      <li>
        볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을
        뿌리면 끝!
      </li>
    </ol>
    <img src="images/salad.jpg" alt="샐러드" width="320px" />
    <hr />
    <h1>상품 구성</h1>
    <table>
      <caption>
        선물용과 가정용 상품 구성
      </caption>
      <colgroup>
        <col style="background-color: #eee" />
        <col />
        <col span="2" style="width: 150px" />
      </colgroup>
      <thead>
        <tr>
          <th>용도</th>
          <th>중량</th>
          <th>갯수</th>
          <th>가격</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2">선물용</td>
          <td>3kg</td>
          <td>11~16과</td>
          <td>35,000원</td>
        </tr>
        <tr>
          <td>5kg</td>
          <td>18~26과</td>
          <td>52,000원</td>
        </tr>
        <tr>
          <td rowspan="2">가정용</td>
          <td>3kg</td>
          <td>11~16과</td>
          <td>30,000원</td>
        </tr>
        <tr>
          <td>5kg</td>
          <td>18~26과</td>
          <td>47,000원</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

연습 문제10

 

반응형
저작자표시 비영리 변경금지

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

[Web/HTML] HTML - 폼(form) 삽입하기  (0) 2024.04.16
[Web/HTML] HTML - 복습 겸 정리  (0) 2024.04.15
[Web/HTML] HTML - 하이퍼링크 삽입하기  (0) 2024.04.15
[Web/HTML] HTML - 오디오와 비디오 삽입하기  (0) 2024.04.15
[Web/HTML] HTML - 이미지 삽입하기  (0) 2024.04.15
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
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
글 보관함