시맨틱 태그와 폼 - 직장인을 위한 한 입 HTML&CSS

🎯 학습 목표

HTML5 시맨틱 태그의 의미와 활용을 이해한다.
<form> 태그와 폼 요소의 역할과 사용법을 익힌다.
간단한 설문 폼 페이지를 제작한다.

🗂️ 강의 개요

이 강의는 직장인이 웹페이지에서 “의미있는 구조 설계”와 “사용자 입력 폼 작성”을 할 수 있게 하는 것을 목표로 합니다.

학습 내용

1️⃣ 시맨틱 태그의 개념과 이유

2️⃣ 주요 시맨틱 태그의 용도

3️⃣ <form>과 폼 입력 요소

4️⃣ 실무 예제와 직장인 활용 사례

5️⃣ 실습 과제 설계

1️⃣ 시맨틱 태그란?

“Semantic(의미론적)” → 콘텐츠의 역할과 의미를 명확하게 정의
단순히 <div>로 나누는 것보다 의미를 담아 검색엔진과 브라우저가 이해하기 쉽게

2️⃣ 주요 시맨틱 태그와 용도

태그	의미
`<header>`	페이지/섹션의 머리말
`<nav>`	내비게이션 메뉴
`<main>`	문서의 메인 콘텐츠
`<section>`	구획 나누기 (관련된 내용 묶음)
`<article>`	독립적 콘텐츠 블록
`<aside>`	부가 정보(사이드바)
`<footer>`	꼬리말, 저작권 등

✅ 시맨틱 태그 예제 코드

1-2-1.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>시맨틱 태그 예제</title>
</head>
<body>
  <header>
    <h1>회사 이름</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">홈</a></li>
      <li><a href="#">서비스</a></li>
      <li><a href="#">문의</a></li>
    </ul>
  </nav>

  <main>
    <section>
      <h2>회사 소개</h2>
      <p>우리 회사는 웹 솔루션을 제공합니다.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 회사명. All rights reserved.</p>
  </footer>
</body>
</html>

💡 직장인 실무 TIP

"대기업 홈페이지나 관공서 사이트 코드를 보면 시맨틱 태그가 표준으로 쓰입니다. 팀 프로젝트나 프리랜서 작업에서도 필수예요."

3️⃣ `<form>`과 폼 입력 요소

📌 폼(form)이란?

사용자 입력을 서버나 처리 프로그램으로 전송하는 구조
로그인, 회원가입, 문의하기 등 필수 기능

✅ `<form>` 기본 구조

<form action="/submit" method="post">
  <!-- 입력 요소 -->
</form>

action: 데이터를 전송할 URL
method: 전송 방식 (get/post)

✅ 주요 폼 요소

태그	역할
`<input>`	다양한 유형의 입력 필드
`<label>`	입력 필드 설명
`<textarea>`	여러 줄 입력
`<button>`	버튼 생성
`<select>`, `<option>`	드롭다운 메뉴

✅ 폼 예제 코드

1-2-2.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>폼 예제</title>
</head>
<body>
  <form action="/submit" method="post">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <label for="message">문의 내용:</label>
    <textarea name="message" id="message"></textarea>
    <br>
    <button type="submit">보내기</button>
  </form> 
</body>
</html>

추가 설명
- <input type="text" id="name" name="name" required>
  
  required 속성 ?
  - 사용자가 해당 입력 필드를 비워둔 상태에서 폼을 제출(submit)하려고 하면, 브라우저에서 자동으로 경고 메시지를 띄우고 폼 전송을 막습니다.
  - 즉, 값이 반드시 입력되어야 하는 필드임을 의미합니다.

4️⃣ 직장인 활용 사례

회사 홈페이지 문의하기 폼
내부 직원 설문조사 페이지
이벤트 신청 폼
견적 요청서

5️⃣ [실습 강의] 간단한 설문 폼 제작

🎯 목표

시맨틱 태그로 페이지 구조화
<form>과 입력 요소 사용

📌 실습 요구 사항

✅ 페이지 제목(헤더)

✅ 소개 문단(section)

✅ 설문 폼(form)

✅ 이름/이메일/관심사 입력

✅ 제출 버튼

✅ 풋터

💻 실습 코드 예제

1-2-3.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>간단한 설문 폼</title>
</head>
<body>
  <header>
    <h1>고객 설문조사</h1>
  </header>

  <section>
    <h2>소개</h2>
    <p>저희 서비스를 개선하기 위해 간단한 설문을 부탁드립니다.</p>
  </section>

  <main>
    <section>
      <h2>설문 폼</h2>
      <form action="/submit" method="post">
        <label for="name">이름:</label>
        <input type="text" id="name" name="name" required>
        <br>
        <label for="email">이메일:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <label for="interest">관심사:</label>
        <select name="interest" id="interest">
          <option value="design">디자인</option>
          <option value="development">개발</option>
          <option value="marketing">마케팅</option>
        </select>
        <br>
        <button type="submit">제출하기</button>
      </form>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 회사명. All rights reserved.</p>
  </footer>
</body>
</html>

💡 실습 가이드

1️⃣ <header>, <section>, <main>, <footer> 사용

2️⃣ <form> 안에 <label>, <input>, <select>, <button> 포함

3️⃣ 본인 이름, 이메일, 관심사를 수정해보기

4️⃣ 브라우저에서 직접 확인