[새싹] 현대IT&E 231106 기록 - HTML 01~05

최정윤·2023년 11월 6일

CSS html js

새싹

목록 보기

15/67

01. 웹 개발 시작하기

프론트엔드 개발을 위한 기술

제이쿼리(jQuery)
D3.js
부트스트랩
리액트
앵귤러
뷰

백엔드 개발을 위한 기술

노드제이에스, 익스프레스
자바, 스프링
파이썬, 장고
PHP, 코드이그나이터

02. 웹 개발 환경 만들기

[교재 자료 다운로드]

[확장팩 설치]

Korean Language Pack for Visual Studio Code
Live Server
- 실행 방법: 우클릭 > Open with Live Server
Microsoft Edge Tools for VS Code

[D2coding 글꼴 설치하기]

글꼴 변경하기
Code > 기본설정 > 설정 > 텍스트 편집기 > 글꼴 > Font Family > D2Coding 작성
탭사이즈 변경
설정 > 탭 검색 > Editor: Tab Size > 2로 변경
lang 값 변경
설정 > emmet 검색 > Emmet: Variables > lang ko로 변경

emmet 사용해보기

    <!-- ul#menu>li.item*3 -->
    <ul id="menu">
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
    </ul>

    <!-- .container>(header>nav>ul>li*5>a)+(#content>section)+footer -->
    <div class="container">
      <header>
        <nav>
          <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
          </ul>
        </nav>
      </header>
      <div id="content">
        <section></section>
      </div>
      <footer></footer>
    </div>

    <!-- td[title="name" colspan="5"] -->
    <td title="name" colspan="5"></td>

    <!-- a.button{Click Me} -->
    <a href="" class="button">Click Me</a>

03. HTML 기본 문서 만들기

favicon 만들고 사용하기

컨버터로 이미지 변환하기
https://favicon.io/

<head>
  <meta charset="UTF-8">
  <title>HTML 기본 문서</title>
  <link rel="icon" type="image/png" sizes="32x32" href="../favicon.png">
</head>

04. 웹 문서에 다양한 내용 입력하기

blockquote

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <blockquote>비타민 C와 비타민 P가 풍부해<br> 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</blockquote>
  <h2>레드향 샐러드 레시피</h2>
  <h2>상품 구성</h2>
</body>
</html>

em, i

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>상품 소개 페이지</title>
  </head>
  <body>
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
    <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>
      일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p><i>비타민 C</i>와 <i>비타민 P</i>가 풍부해<br>
    <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
    <h2>레드향 샐러드 레시피</h2>
    <h2>상품 구성</h2>
  </body>
</html>

다양한 텍스트 관련 태그

abbr: 줄임말 표시

cite: 웹 문서나 포스트에서 참고내용을 표시

code: 컴퓨터 인식을 위한 소스 코드

small: 부가 정보처럼 작게 표시해도 되는 텍스트

sub: 아래 첨자를 표시

sup: 위 첨자를 표시

s: 취소선

u: 밑줄

ins: 공동 작업 문서에 새로운 내용 삽입

del: 공동 작업 문서에서 기존 내용 삭제

4.2 목록 만들기

ol, li

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <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>

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

dl, dt, dd

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
</head>
<body>
  <h2>상품 구성</h2>
  <dl>
    <dt>선물용 3kg</dt>
    <dd>소과 13~16과</dd>
    <dd>중과 10~12과</dd>
  </dl>
  <dl>
    <dt>선물용 5kg</dt>
    <dd>중과 15~19과</dd>
  </dl>  
</body>
</html>

4.3 표 만들기

행을 만드는 tr 태그와 셀을 만드는 td,th 태그

<!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>
  <img src="images/tangerines.jpg" alt="레드향">
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
  <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
  <hr>
  <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>
  <img src="images/salad.jpg" width="320">
  <hr>
  <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>
  <hr>
  <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <tr>
      <th>용도</th>
      <th>중량</th>
      <th>갯수</th>
      <th>가격</th>
    </tr>
    <tr>
      <td>선물용</td>
      <td>3kg</td>
      <td>11~16과</td>
      <td rowspan="2">35,000원</td>
    </tr>
    <tr>
      <td>선물용</td>
      <td>5kg</td>
      <td>18~26과</td>
    </tr>
    <tr>
      <td>가정용</td>
      <td>3kg</td>
      <td>11~16과</td>
      <td>30,000원</td>
    </tr>   
    <tr>
      <td>가정용</td>
      <td colspan="3" align="center"> 품절 </td>
    </tr>   
  </table>
</body>
</html>

열을 묶어 주는 col, colgroup 태그

<!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>
  <img src="images/tangerines.jpg" alt="레드향">
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
  <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
  <hr>
  <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>
  <img src="images/salad.jpg" width="320">
  <hr>
  <h2>상품 구성</h2>
  <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>

<!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>
  <img src="images/tangerines.jpg" alt="레드향">
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
  <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
  <hr>
  <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>
  <img src="images/salad.jpg" width="320">
  <hr>
  <h2>상품 구성</h2>
  <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <colgroup>
      <col style="background-color:#eee;">
      <col>
      <col span="2" 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>

4.4 이미지 삽입하기

GIF
JPG/JPEG
PNG

4.5 오디오와 비디오 삽입하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>멀티미디어 파일 삽입하기</title>
</head>
<body>
  <h1>웹 문서에 PDF 파일 삽입하기</h1>
  <object width="900" height="800" data="product.pdf"></object>
</body>
</html>

비디오
- mp4
- webm
오디오
- mp3
- mp4, m4a

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <link rel="stylesheet" href="css/poster.css">
</head>
<body>
  <div id="container">
    <img src="images/tangerines.jpg" alt="레드향">
    <audio src="medias/spring.mp3" controls></audio>
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
    <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
    <hr>
    <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>
    <img src="images/salad.jpg" width="320">
    <hr>
    <h2>상품 구성</h2>
    <table>
      <caption>선물용과 가정용 상품 구성</caption>
      <colgroup>
        <col style="background-color:#eee;">
        <col>
        <col span="2" style="width:150px">
        <!-- span 속성을 사용해 합치기 전
          <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>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>탐라국 입춘굿</title>
  <link rel="stylesheet" href="css/poster.css">
</head>
<body>
  <img src="images/top.jpg" alt="" width="100%">
  <div id="container">    
    <h1>탐라국 입춘굿</h1>    
    <p>탐라국 입춘굿놀이는 전국적으로 유일하게 입춘날 벌어지는 축제이자 제주도의 문화축제 중에서 유일하게 전통시대부터 존재했던 축제이다.</p>
    <p>제주에서 입춘은 새철 드는 날. <br>
      신구간이 끝나 하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다.
    </p>
    <p>자세한 정보 보기</p>
    <video src="medias/flower.mp4" width="640" muted autoplay loop></video>
    <h3>일정</h3>
    <ol>
      <li>입춘맞이 : 1/27(월) ~ 1/31(금)</li>
      <li>낭쉐코사 : 2/1(토)</li>
      <li>거리굿 : 2/2(일)</li>
      <li>열림굿 : 2/3(월)</li>
      <li>입춘굿 : 2/4(화)</li>
    </ol>
    <h2>먹거리</h2>
    <table>
      <tr>
        <th>입춘 천냥 국수</th>
        <td>11:00 ~ 16:00</td>
        <td>목관아 주차장</td>
      </tr>
      <tr>
        <th>제주 향토 음식</th>
        <td>10:30 ~ 17:00</td>
        <td>관덕정 마당</td>
      </tr>
      <tr>
        <th>입춘 주전부리</th>
        <td>10:30 ~ 17:00</td>
        <td>관덕정 마당</td>
      </tr>
      <tr>
        <th>차 나눔</th>
        <td>10:30 ~ 17:00</td>
        <td>관덕정 마당</td>
      </tr>                  
    </table>
  </div>
</body>
</html>

4.6 하이퍼링크 삽입하기

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <link rel="stylesheet" href="css/poster.css">
</head>
<body>
  <div id="container">
    <a href="../05/order.html"><img src="images/tangerines.jpg" alt="레드향"></a>
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
    <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
    <hr>
    <div>
      <p><a href="../05/order.html">주문서 작성하기</a></p>
    </div>
    <hr>
    <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>
    <video src="medias/salad.mp4" controls width="700"></video>
    <hr>
    <h2>상품 구성</h2>
    <table>
      <caption>선물용과 가정용 상품 구성</caption>
      <colgroup>
        <col style="background-color:#eee;">
        <col>
        <col span="2" 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>
  </div>
</body>
</html>

order.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
  <link rel="stylesheet" href="css/order.css">
</head>
<body>
  <h1>레드향 주문하기</h1>
  <div id="container">
    <form>
      <fieldset>
        <legend>상품 선택</legend>
        <p><b>주문할 상품을 선택해 주세요.</b></p>
        <ul id="product">
          <li>
            <label><input type="checkbox" value="s_3">선물용 3kg</label>
            <input type="number" min="0" max="5">개 <small>(최대 5개)</small>
          </li>
          <li>
            <label><input type="checkbox" value="s_5">선물용 5kg</label>
            <input type="number" min="0" max="3" value="1">개 <small>(최대 3개)</small>
          </li>
          <li>
            <label><input type="checkbox" value="f_3">가정용 3kg</label>
            <input type="number" min="0" max="5">개 <small>(최대 5개)</small>
          </li>
          <li>
            <label><input type="checkbox" value="f_5">가정용 5kg</label>
            <input type="number" min="0" max="3">개 <small>(최대 3개)</small>
          </li>
        </ul>      
        <p><b>포장 선택</b></p>
        <ul>
          <li><label><input type="radio" name="gift" value="yes">선물 포장</label></li>
          <li><label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
        </ul>    
      </fieldset>
      <fieldset>
        <legend>배송 정보</legend>
        <ul id="shipping">
          <li>
            <label for="user-name">이름 </label>
            <input type="text" id="user-name">
          </li>
          <li>
            <label for="addr">배송 주소</label>
            <input type="text" id="addr">
          </li>
          <li>
            <label for="mail">이메일</label>
            <input type="email" id="mail">
          </li>        
          <li>
            <label for="phone">연락처</label>
            <input type="tel" id="phone">
          </li>
          <li>
            <label for="d-day">배송 지정</label>
            <input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
          </li>     
          <li>
            <label for="memo">메모</label>
            <textarea id="memo" cols="40" rows="4"></textarea>
          </li>   
        </ul>  
      </fieldset>
      <div>
        <input type="submit" value="주문하기"> 
        <input type="reset" value="취소하기">
      </div>        
    </form>
  </div>  
</body>
</html>

05. 입력 양식 작성하기

5.1 폼 삽입하기

폼 요소를 그룹으로 묶는 fieldset, legend 태그

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
</head>
<body>
  <h1>레드향 주문하기</h1>
  <form action="">
    <fieldset>
      <legend>상품 선택</legend>
      
    </fieldset>
    <fieldset>
      <legend>배송 정보</legend>
      
    </fieldset>      
  </form>
</body>
</html>

폼 요소에 레이블을 붙이는 label 태그

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>label 태그 사용하기</title>
</head>
<body>
  <form>
    <!-- <label>아이디(6자 이상)<input type="text"></label> -->
  
    <label for="user-id">아이디(6자 이상)</label>
    <input type="text" id="user-id">
  </form>
</body>
</html>

5.2 사용자 입력을 위한 input 태그

텍스트와 비밀번호를 나타내는 type="text"와 type="password"

<!DOCTYPE html>
<html lang="ko">
  <head>
		<meta charset="UTF-8">
		<title>로그인</title>
  </head>
  <body>
	<form>
    <fieldset>
    	<label>아이디: <input type="text" id="user_id" size="10"></label>
      <label>비밀번호: <input type="password" id="user_pw" size="10"></label>
      <input type="submit" value="로그인">
    </fieldset>
  </form>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
</head>
<body>
  <h1>레드향 주문하기</h1>
  <form action="">
    <fieldset>
      <legend>상품 선택</legend>
     
    </fieldset>
    <fieldset>
      <legend>배송 정보</legend>
      <ul id="shipping">
        <li>
          <label for="user-name">이름 </label>
          <input type="text" id="user-name">
        </li>
        <li>
          <label for="addr">배송 주소</label>
          <input type="text" id="addr">
        </li>
        <li>
          <label for="mail">이메일</label>
          <input type="email" id="mail">
        </li>        
        <li>
          <label for="phone">연락처</label>
          <input type="tel" id="phone">
        </li>
      </ul>  
    </fieldset> 
  </form>
</body>
</html>

체크 박스와 라디오 버튼을 나타내는 type="checkbos", type="radio"

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
</head>
<body>
  <h1>레드향 주문하기</h1>
  <form>
    <fieldset>
      <legend>상품 선택</legend>
      <p><b>주문할 상품을 선택해 주세요.</b></p>
      <ul>
        <li>
          <label><input type="checkbox" value="s_3">선물용 3kg</label>
          <input type="number">개
        </li>
        <li>
          <label><input type="checkbox" value="s_5">선물용 5kg</label>
          <input type="number">개
        </li>
        <li>
          <label><input type="checkbox" value="f_3">가정용 3kg</label>
          <input type="number">개
        </li>
        <li>
          <label><input type="checkbox" value="f_5">가정용 5kg</label>
          <input type="number">개
        </li>
      </ul>   
      <p><b>포장 선택</b></p>
      <ul>
        <li><label><input type="radio" name="gift" value="yes" >선물 포장</label></li>
        <li><label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
      </ul>     
    </fieldset>
    <fieldset>
      <legend>배송 정보</legend>
      <ul>
        <li>
          <label for="user-name">이름 </label>
          <input type="text" id="user-name" required>
        </li>
        <li>
          <label for="addr">배송 주소</label>
          <input type="text" id="addr" required>
        </li>
        <li>
          <label for="mail">메일 주소</label>
          <input type="email" id="mail" required>
        </li>        
        <li>
          <label for="phone">연락처</label>
          <input type="tel" id="phone" required>
        </li>
      </ul>  
    </fieldset>      
  </form>
</body>
</html>

회원 가입 신청서 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>회원가입</title>
	<style>
		ul { list-style:none;}
		li { line-height:50px; }
		label {
			width:60px;
			float:left;
		}
	</style>
</head>
<body>
  <div id="container">
    <h1>회원 가입을 환영합니다</h1>
    <form>
      <fieldset>
        <legend>사용자 정보</legend>
        <ul>
          <li>
            <label for="uid">아이디</label>
            <input type="text" id="uid">
          </li>
          <li>
            <label for="uemail">이메일</label>
            <input type="email" id="uamil">
          </li>
          <li>
            <label for="pwd1">비밀번호</label>
            <input type="password" id="pwd1">
          </li>
          <li>
            <label for="pwd2">아이디</label>
            <input type="password" id="pwd2">
          </li>
        </ul>
      </fieldset>
      <fieldset>
        <legend>이벤트와 새로운 소식</legend>
        <input type="radio" name="mailing" id="mailing_y">
        <label for="mailing_y">메일 수신</label><br>
        <input type="radio" name="mailing" id="mailing_n" checked>
        <label for="mailing_n">메일 수신 안 함</label>
      </fieldset>
      <div>
        <input type="submit" value="가입하기">
        <input type="reset" value="취소">
      </div>
    </form>
  </div>
</body>
</html>

히든 필드 만들 때 사용하는 type="hidden"

<!DOCTYPE html>
<html lang="ko">
  <head>
		<meta charset="UTF-8">
		<title>로그인</title>
  </head>
  <body>
	<form>
    <fieldset>
      <input type="hidden" name="url" id="url" value="사이트를 통한 직접 로그인">
    	<label>아이디: <input type="text" id="user_id" size="10"></label>
      <label>비밀번호: <input type="password" id="user_pw" size="10"></label>
      <input type="submit" value="로그인">
    </fieldset>
  </form>
  </body>
</html>

5.3 input 태그의 주요 속성

필수 입력 필드를 지정하는 required 속성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
  <link rel="stylesheet" href="css/form2.css">
</head>
<body>
  <h1>레드향 주문하기</h1>
  <form>
    <fieldset>
      <legend>배송 정보</legend>
      <ul id="shipping">
        <li>
          <label for="prod">주문 상품</label>
          <input type="text" id="prod" value="상품용 3KG" readonly>
        </li>
        <li>
          <label for="user-name">이름 </label>
          <input type="text" id="user-name" autofocus required>
        </li>
        <li>
          <label for="addr">배송 주소</label> 
          <input type="text" id="addr" required>
        </li>
        <li>
          <label for="mail">이메일</label>
          <input type="email" id="mail">
        </li>        
        <li>
          <label for="phone">연락처</label>
          <input type="tel" id="phone" placeholder="하이픈 빼고 입력해 주세요.(01012345678)" required>
        </li>
        <li>
          <label for="d-day">배송 지정</label>
          <input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
        </li>        
      </ul>  
    </fieldset>
    <div>
      <input type="submit" value="주문하기"> 
      <input type="reset" value="취소하기">
    </div>        
  </form>
</body>
</html>

회원 가입 신청서에 속성 지정하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>회원가입</title>
	<style>
		ul { list-style:none;}
		li { line-height:50px; }
		label {
			width:60px;
			float:left;
		}
	</style>
</head>
<body>
  <div id="container">
    <h1>회원 가입을 환영합니다</h1>
    <form>
      <fieldset>
        <legend>사용자 정보</legend>
        <ul>
          <li>
            <label for="uid">아이디</label>
            <input type="text" id="uid" autofocus placeholder="4자 ~ 10자 사이, 공백없이" required>
          </li>
          <li>
            <label for="uemail">이메일</label>
            <input type="email" id="uamil" required>
          </li>
          <li>
            <label for="pwd1">비밀번호</label>
            <input type="password" id="pwd1" placeholder="문자와 숫자, 특수 기호 포함" required>
          </li>
          <li>
            <label for="pwd2">아이디</label>
            <input type="password" id="pwd2" required>
          </li>
        </ul>
      </fieldset>
      <fieldset>
        <legend>이벤트와 새로운 소식</legend>
        <input type="radio" name="mailing" id="mailing_y">
        <label for="mailing_y">메일 수신</label><br>
        <input type="radio" name="mailing" id="mailing_n" checked>
        <label for="mailing_n">메일 수신 안 함</label>
      </fieldset>
      <div>
        <input type="submit" value="가입하기">
        <input type="reset" value="취소">
      </div>
    </form>
  </div>
</body>
</html>

최정윤

개발 기록장

이전 포스트

[새싹] 현대IT&E 231103 기록 - Oracle

다음 포스트

[새싹] 현대IT&E 231106 기록 - HTML 01~05

새싹

01. 웹 개발 시작하기

프론트엔드 개발을 위한 기술

백엔드 개발을 위한 기술

02. 웹 개발 환경 만들기

emmet 사용해보기

03. HTML 기본 문서 만들기

favicon 만들고 사용하기

04. 웹 문서에 다양한 내용 입력하기

blockquote

em, i

4.2 목록 만들기

ol, li

dl, dt, dd

4.3 표 만들기

행을 만드는 tr 태그와 셀을 만드는 td,th 태그

열을 묶어 주는 col, colgroup 태그

4.4 이미지 삽입하기

4.5 오디오와 비디오 삽입하기

4.6 하이퍼링크 삽입하기

05. 입력 양식 작성하기

5.1 폼 삽입하기

폼 요소를 그룹으로 묶는 fieldset, legend 태그

폼 요소에 레이블을 붙이는 label 태그

5.2 사용자 입력을 위한 input 태그

텍스트와 비밀번호를 나타내는 type="text"와 type="password"

체크 박스와 라디오 버튼을 나타내는 type="checkbos", type="radio"

히든 필드 만들 때 사용하는 type="hidden"

5.3 input 태그의 주요 속성

필수 입력 필드를 지정하는 required 속성

[새싹] 현대IT&E 231103 기록 - Oracle

[새싹] 현대IT&E 231107 기록 - HTML.CSS 05~09

0개의 댓글