본문 바로가기
[HTML & CSS]/[HTML]

[HTML] 입력 양식과 태그를 활용해서 간단한 예제 만들기

by 북방바다코끼리표범 2023. 8. 3.

글쓰기 게시판 화면 만들어보기

 

자료

Document


자료와 동일하게 만들어보기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 열 병합 -->
    <!-- 사용법 : <td colspan="병합할 개수">내용</td> -->
    <!-- 테이블 6행 2열 -->
    <table border="1">
      <thead>
        <tr>
          <td colspan="2">
            <label for=""><br />글쓰기 게시판 </label> <br /><br />
          </td>
        </tr>
        <tr>
          <th><label for="">제목</label></th>
          <td><input type="text" /></td>
        </tr>
        <tr>
          <td><label for="">내용</label></td>
          <td><textarea cols="40" rows="20"></textarea></td>
        </tr>
        <tr>
          <td><label for="">파일첨부</label></td>
          <td><input type="file" name="file" value="file" /></td>
        </tr>
        <tr>
          <td></td>
          <td><label for="">5M 이하의 파일만 첨부 가능합니다.</label></td>
        </tr>
        <tr>
          <td colspan="2">
            <!-- <input type="button" value=" 확인 " /> -->
            <button>확인</button>
          </td>
        </tr>
      </thead>
    </table>
  </body>
</html>

 

개인 신상 정보 입력 화면 만들어보기

 

자료

Document

개인 신상 정보 입력

- 이름 :

- 비밀번호 :

- 성별 : 남성 여성

- 취미 : 영화감상 게임 음악듣기

- 파일 첨부 :

- 이메일 : @

- 자기소개 :

자료와 동일하게 만들어보기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>개인 신상 정보 입력</h1>
    <form>
      - 이름 : <input type="text" /><br /><br />
      - 비밀번호 : <input type="password" /><br /><br />

      - 성별 : <input type="radio" name="aa" value="radio" /> 남성
      <input type="radio" name="aa" value="radio" /> 여성<br /><br />
      - 취미 :
      <input type="checkbox" />영화감상 <input type="checkbox" />게임
      <input type="checkbox" />음악듣기<br /><br />

      - 파일 첨부 : <input type="file" name="file" value="file" /><br /><br />

      - 이메일 : <input type="text" /> @
      <select>
        <option value="a">naver.com</option>
        <option value="b">hanmail.net</option>
        <option value="c">google.com</option>
        <option value="d" selected>메일을 선택하세요</option>
      </select>
      <br /><br />
      - 자기소개 : <textarea cols="40" rows="20"></textarea><br /><br />
      <button>확인</button>
    </form>
  </body>
</html>

날씨 표 화면 만들어보기

 

자료

자료와 동일하게 만들어보기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 4행 5열 -->
    <!-- 행병합 힌트 :  <td rowspan="">내용</td>  -->
    <table border="1">
      <thead>
        <tr>
          <th colspan="2">날짜</th>
          <th>날씨</th>
          <th>풍향</th>
          <th s>풍속(m/s)</th>
        </tr>
        <tr>
          <td>24일(월)</td>
          <td>오후</td>
          <td><img src="img1/KakaoTalk_20230803_151905866.png" alt="" /></td>
          <td>남~남서</td>
          <td>3~7</td>
        </tr>
        <tr>
          <td rowspan="2">25일(화)</td>
          <td>오전</td>
          <td><img src="img1/KakaoTalk_20230803_151905866.png" alt="" /></td>
          <td>서~북서</td>
          <td>3~6</td>
        </tr>
        <tr>
          <td>오후</td>
          <td><img src="img1/KakaoTalk_20230803_151903127.png" alt="" /></td>
          <td>북서~서</td>
          <td>3~6</td>
        </tr>
      </thead>
    </table>
  </body>
</html>

요약

더보기

요약 1번

 

<!-- TODO : 컴퓨터에서 자주쓰는 코딩 용어 -->
 
    <!-- :(콜론), ;(세미콜론), &(엔퍼센트) -->
    <!-- HTML : Markup 언어() : <(여는태그)>글자</닫는태그> -->
    <!-- HTML 주요 요소들 : -->
    <!-- 태그(요소, element). 속성(attibute), 값(value) -->
    <!-- 태그 : h1, p, table 등 -->
    <!-- 속성 : src, width, height 등 -->
    <!-- 값 : src="값", width="값" 등-->
    <!-- 단축키 : 인텔리제이 -->
    <!-- 줄복사 : ctrl + d -->
    <!-- 줄삭제 : ctrl + y -->
    <!-- 윈도우 단축키 -->
    <!-- 복사 : ctrl + c -->
    <!-- 잘라내기 : ctrl + x -->
    <!-- 붙여넣기 : ctrl + v -->
    <!-- 실행취소 : ctrl + z -->
    <!-- html(구조), css(디자인), js(동작) -->
    <!-- 3가지 파일로 각각 분리 코딩(권고) -->
    <!-- 플러그인 : Auto rename tag -->
    <!-- TODO: 1) 제목 태그 : h1 ~ h6 -->
    <h1>안녕하세요</h1>
    <h2>안녕하세요</h2>
    <h3>안녕하세요</h3>
    <h4>안녕하세요</h4>
    <h5>안녕하세요</h5>
    <h6>안녕하세요</h6>
    <!-- TODO: 2) 폰트 -->
    <!-- 굵은 글씨 -->
    <b>안녕하세요</b>
    <!-- 이탤릭체 -->
    <i>안녕하세요</i>
    <!-- TODO: 3) 단락(*) -->
    <p>안녕하세요..</p>
    <!-- TODO: 4) 링크(앵커) : 페이지 이동 -->
    <a href="http://naver.com">네이버</a>
    <!-- TODO: 5) 줄바꿈(*) -->
    안녕하세요<br />
    안녕하세요<br />
    <!-- TODO: 6) 특수 태그 -->
    <!-- < : &lt; (less than) -->
    <!-- > : &gt; (greater than) -->
    <!-- 공백 : &nbsp; -->
    <!-- & : &amp; -->
    <!-- "" : &quot; -->
    <!-- TODO: 7) 이미지(*) -->
    <img src="img1/bird1.jpg" alt="새" width="300" />
    <!-- TODO: 8) 목록(*), ul(unordered list, *), ol(redered list) -->
    <ul>
      <li>사과</li>
      <li>오렌지</li>
      <li>포도</li>
    </ul>
    <ol>
        <li>사과</li>
        <li>오렌지</li>
        <li>포도</li>
    </ol>
    <!-- TODO: 9) 테이블(*)  -->
    <table>
      <!-- 제목 : thead(생략가능) -->
      <thead>
        <!-- tr : 1행 -->
        <tr>
          <!-- th : 1열 -->
          <th>요일</th>
        </tr>
      </thead>
    </table>
    <table>
      <!-- 제목 : tbody(생략가능) -->
      <tbody>
        <!-- tr : 1행 -->
        <tr>
          <!-- th : 1열 -->
          <th>요일</th>
        </tr>
      </tbody>
    </table>
더보기

요약 2번

 

 <!-- TODO: form 태그(부모태그, 생략가능) > input(자식태그) -->
    <!-- TODO: 1) 라벨 + 입력양식 -->
    <!--  -->
    <label for="name">이름</label>
    <input type="text" id="name" />
    <br />

    <!-- TODO: 2) 패스워드 -->
    <input type="password" />
    <br />

    <!-- TODO: 3) 파일 대화상자 -->
    <input type="file" />
    <br />

    <!-- TODO: 4) 체크박스 -->
    <input type="checkbox" />
    <br />

    <!-- TODO: 5) 라디오박스 -->
    <!-- 주의점 : 2개의 name 변수명이 일치해야 함. -->
    <input type="radio" name="qwer" />남 <input type="radio" name="qwer" />여
    <br />

    <!-- TODO: 6) Select 박스 -->
    <!-- 속성 : selected = 화면에 기본적으로 먼저 보일 문자 -->
    <select>
      <option selected>김밥</option>
      <option>떡볶이</option>
      <option>순대</option>
    </select>
    <br />

    <!-- TODO: 7) textarea : 긴 글쓰기 -->
    <!-- cols="가로크기", rows="세로크기" -->
    <textarea cols="30" rows="10"></textarea>

 

저작자표시

'[HTML & CSS] > [HTML]' 카테고리의 다른 글

[HTML] 입력 양식  (0) 2023.08.02
[HTML] 간단한 글자 태그  (0) 2023.08.01
[HTML] HTML의 개요와 기본 문법  (0) 2023.07.27

관련글

티스토리툴바