[HTML]HTML5 입력 양식 태그와 구조화 태그

1. 입력 양식 태그

1.1 입력 양식 개요

• `<form>` 태그를 사용하여 사용자가 데이터를 입력하고 서버로 전송할 수 있도록 구성
• method 속성: 데이터를 전달하는 방식 (`GET` 또는 `POST`)
• action 속성: 데이터를 전달하는 서버 주소

<form method="POST" action="/submit">
    <input type="text" name="username">
    <input type="submit" value="전송">
</form>

1.2 입력 방식 (GET vs POST)

방식	설명
GET	URL에 데이터를 포함하여 전송 (주소창에 노출)
POST	데이터를 숨겨서 전송 (보안성 높음)

    <!-- GET 전송 방식 -->
    <form method="get">
        <input type="text" name="search">
        <input type="submit">
    </form>

    <!-- POST 전송 방식 -->
    <form method="post">
        <input type="text" name="search">
        <input type="submit">
    </form>

1.3 입력 양식 종류

• 사용자가 입력할 수 있는 다양한` input`태그 유형 제공

<input type="text" name="text" placeholder="텍스트 입력">
<input type="password" name="password" placeholder="비밀번호">
<input type="file" name="file">
<input type="checkbox" name="checkbox"> 체크박스
<input type="radio" name="radio" value="A"> 라디오 버튼
<input type="hidden" name="hidden" value="숨겨진 값">
<input type="button" value="일반 버튼">
<input type="reset" value="초기화">
<input type="submit" value="전송">

 

1.4 label 태그 활용

• `<label>`을 사용하면 입력 필드와 연결되어 접근성이 향상
• for 속성을 연결하면, label 태그를 클릭했을 때 input 태그에 포커스가 감

<form>
    <label for="username">이름</label>
    <input id="username" type="text" name="username">
</form>

 

1.5 라디오 버튼과 체크박스

• 같은 그룹에서 하나만 선택하려면 `name` 속성을 동일하게 설정

<!-- 동일 name 필수 -->
<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성

 

1.6 드롭다운 리스트 (`select`)

• `<option>` 태그를 활용하여 여러 선택지를 제공
• 다중 선택 시, `multiple` 속성 이용
• 선택 옵션을 그룹으로 묶을 땐 `<optgroup>`태그

 <!-- 한 개 선택 가능 -->
    <select name="food">
      <option value="kimbap">김밥</option>
      <option value="tteokbokki">떡볶이</option>
    </select>

    <!-- 여러 개 선택 가능 (Alt + 좌클릭) -->
    <select name="food" multiple>
      <option value="kimbap">김밥</option>
      <option value="tteokbokki">떡볶이</option>
    </select>

    <!-- 선택 옵션 묶기 -->
    <select name="food">
      <optgroup label="Food">
        <option value="kimbap">김밥</option>
        <option value="tteokbokki">떡볶이</option>
      </optgroup>
      <optgroup label="Juice">
        <option value="">콜라</option>
        <option value="">사이다</option>
      </optgroup>
    </select>

1.7 그룹화 및 필드셋 (`fieldset`)

• `<fieldset>`을 사용해 관련 입력 필드를 그룹화
• `<legent>`을 사용해 그룹에 이름 지정 가능

<form>
    <fieldset>
        <legend>회원 가입</legend>
        <label for="name">이름</label>
        <input type="text" id="name">
        <label for="email">이메일</label>
        <input type="email" id="email">
    </fieldset>
</form>

 

1.8 여러 줄 입력 (`textarea`)

• 여러 줄을 입력할 수 있는 텍스트 입력 필드
• [주의] 들여쓰기가 양식 내부에 출력

<textarea rows="4" cols="50">여기에 텍스트 입력</textarea>

 

✅ 핵심 요점 정리

항목	설명
입력 방식	GET (주소 노출) vs POST (보안성 높음)
입력 태그	`text`, `password`, `file`, `checkbox`, `radio`, `hidden` 등
라벨	`<label>` 태그 사용하면 접근성 향상
선택 항목	`select`, `option` 태그 활용
그룹화	`fieldset`과 `legend`로 관련 필드 그룹화
여러 줄 입력	`<textarea>` 사용

---

2. HTML5 문서 구조화

2.1 블록 요소와 인라인 요소

• 블록 요소: 한 행을 차지하며 줄바꿈이 발생 
• 인라인 요소: 내용만큼만 공간을 차지하며 줄바꿈 없음
•  

블록 형식 태그	인라인 형식 태그
`div`  태그	`span` 태그
`h1` ~ `h6`  태그	`a` 태그
`p`  태그	`input` 태그
목록 태그	글자 형식 태그
테이블 태그	입력 양식 태그

<div>이것은 블록 요소입니다.</div>
<div>이것은 블록 요소입니다.</div>
<br />
<span>이것은 인라인 요소입니다.</span>
<span>이것은 인라인 요소입니다.</span>

2.2 시맨틱 태그

• HTML5에서는 문서의 의미를 명확하게 표현하는 시맨틱 태그가 추가

태그	역할
`<header>`	페이지 또는 섹션의 머리글
`<nav>`	내비게이션 메뉴
`<section>`	문서의 독립적인 영역
`<article>`	독립적인 콘텐츠 (게시글, 뉴스 등)
`<aside>`	사이드바, 부가 정보
`<footer>`	페이지 하단 정보 (연락처, 저작권 등)

<header>
    <h1>사이트 제목</h1>
</header>
<nav>
    <ul>
        <li><a href="#">홈</a></li>
        <li><a href="#">소개</a></li>
    </ul>
</nav>
<section>
    <article>
        <h2>게시글 제목</h2>
        <p>게시글 내용</p>
    </article>
</section>
<footer>
    <p>Copyright 2025</p>
</footer>

 

2.3 시맨틱 태그 사용 전후 비교

(1) 기존 방식 - `div`만 사용한 구조

<div>
    <h1>제목</h1>
</div>
<div>
    <ul>
        <li>메뉴 1</li>
        <li>메뉴 2</li>
    </ul>
</div>

 

(2) 시맨틱 태그 활용 구조

<header>
    <h1>제목</h1>
</header>
<nav>
    <ul>
        <li>메뉴 1</li>
        <li>메뉴 2</li>
    </ul>
</nav>

 

✅ 핵심 요점 정리

항목	설명
블록 요소	`<div>`, `<p>`, `<h1>` 등 (줄바꿈 O)
인라인 요소	`<span>`, `<a>` 등 (줄바꿈 X)
시맨틱 태그	의미를 부여하는 HTML5 태그
주요 태그	`<header>`, `<nav>`, `<section>`, `<article>`, `<footer>`
기존 구조 vs 시맨틱 구조	`div` 대신 의미 있는 태그 사용 권장

---

📎 참고자료

• MDN HTML 시맨틱 태그
• HTML5 웹 프로그래밍 입문 4판 (김성윤 저, 한빛미디어)