Notice
Recent Posts
Recent Comments
Link
«   2026/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

안녕유현

[KB IT's Your Life 7기 - 교육 기록] 2일차 - HTML5 입력 양식 태그와 구조화 태그, 그리고 HTTP 프로토콜 본문

KB IT's Your Life | 교육 기록

[KB IT's Your Life 7기 - 교육 기록] 2일차 - HTML5 입력 양식 태그와 구조화 태그, 그리고 HTTP 프로토콜

유하_youhyunhi 2026. 3. 12. 22:04

2026.03.05

유하!

 

2일차 수업은 HTML5의 핵심 중 하나인 입력 양식 태그와 문서 구조화 그리고 HTTP 프로토콜를 다뤘다.

회원가입 폼처럼 사용자에게 정보를 입력받는 요소들, 그리고 웹 페이지의 뼈대를 잡는 구조화 태그까지 배운 하루였다.

📌 목차

  • form 태그와 GET/POST 전송 방식
  • input 태그 종류 총정리
  • label 태그와 접근성
  • select, textarea, fieldset
  • div vs span, 블록 vs 인라인
  • 시맨틱 태그 (header, nav, section, article, footer)
  • HTTP 프로토콜과 TCP/IP
  • 실습: 강아지 vs 고양이 투표 form 만들기
  • 느낀점

📋 form 태그와 GET/POST 전송 방식

form 태그 기본 구조

웹에서 로그인 창, 회원가입 폼, 검색창 등 사용자에게 정보를 입력받는 요소들을 입력 양식(Form)이라고 한다. <form> 태그로 영역을 감싸고, 그 안에 <input> 태그를 넣는 방식이다. 제출 버튼을 누르면 지정된 방식과 장소로 데이터가 전달된다.

<body>
  <form method="get" action="/submit">
    <input type="text" name="search">
    <input type="submit" value="제출">
  </form>
</body>

여기서 중요한 두 가지 속성이 있다.

  • method : 데이터를 전달하는 방식 (GET 또는 POST)
  • action : 데이터를 전달할 목적지 (서버 URL)

GET vs POST

두 방식의 차이를 제대로 이해하는 게 중요하다. 오늘 실습 때도 직접 적용해봤는데, 동작 방식이 눈으로 확인되니까 훨씬 와닿았다.

방식 특징 사용 예시
GET 데이터가 URL 주소에 그대로 노출됨. 크기 제한 있음 검색, 필터링
POST URL 변경 없이 데이터를 숨겨서 전송. 용량 제한 없음 로그인, 회원가입

GET 방식을 쓰면 주소창에 ?search=안녕처럼 데이터가 노출되고, POST는 눈에 보이지 않는다. 비밀번호 같은 민감한 정보는 반드시 POST로 보내야 한다.

📋input 태그 종류 총정리

<input> 태그는 type 속성 하나로 완전히 다른 모양과 기능을 갖는다. 아래 표로 한 번에 정리했다

type 값 설명
text 일반 텍스트 입력
password 입력 내용이 ● 로 가려지는 비밀번호 입력
checkbox 체크박스 (중복 선택 가능)
radio 라디오 버튼 (하나만 선택)
file 파일 업로드
hidden 화면에 보이지 않는 숨겨진 값
button 일반 버튼
reset 입력 초기화 버튼
submit 폼 제출 버튼
image 이미지 형태의 제출 버튼 
<form>
  <input type="text" name="text" value="text"><br>
  <input type="password" name="password"><br>
  <input type="checkbox" name="agree"><br>
  <input type="radio" name="gender" value="m"> 남자
  <input type="radio" name="gender" value="w"> 여자<br>
  <input type="file"><br>
  <input type="hidden" name="token" value="abc123">
  <input type="button" value="버튼">
  <input type="reset" value="초기화">
  <input type="submit" value="제출">
</form>

 

라디오 버튼 포인트: name 속성 값이 같아야 하나의 그룹으로 묶여서 하나만 선택된다. 다른 이름을 붙이면 각각 독립적으로 동작해서 여러 개가 선택되는 버그가 생긴다.

📋label 태그와 접근성

<label> 태그는 입력 요소에 이름표를 붙여주는 역할이다. 단순히 글자를 옆에 쓰는 것과의 차이는, for 속성으로 연결해두면 라벨 텍스트를 클릭했을 때도 해당 input에 포커스가 간다는 점이다. 사용자 경험(UX) 측면에서 중요하고, 접근성에도 필수적인 요소다.

<form>
  <label for="username">이름</label>
  <input id="username" type="text" name="username">
  
  <label for="man">남자</label>
  <input id="man" type="radio" name="gender" value="m">
  
  <label for="woman">여자</label>
  <input id="woman" type="radio" name="gender" value="w">
</form>

 

label의 for 속성과 input의 id 속성이 같은 값이어야 연결된다.

📋Select / Textarea / fieldset

- select 태그 (드롭다운)

목록에서 하나 또는 여러 개를 선택할 때 쓰는 태그다. <option> 태그를 내부에 나열하면 선택지가 생긴다.

<!-- 기본 드롭다운 -->
<select name="food">
  <option>김밥</option>
  <option>떡볶이</option>
  <option>순대</option>
  <option>어묵</option>
</select>

<!-- 다중 선택 (Ctrl 누르고 클릭) -->
<select multiple="multiple">
  <option>김밥</option>
  <option>떡볶이</option>
</select>

<!-- 그룹으로 묶기 -->
<select>
  <optgroup label="HTML5">
    <option>Multimedia Tag</option>
    <option>Connectivity</option>
  </optgroup>
  <optgroup label="CSS3">
    <option>Animation</option>
    <option>3D Transform</option>
  </optgroup>
</select>

 

- textarea 태그

여러 줄의 텍스트를 입력받을 때 쓴다. 게시판 글쓰기, 댓글 입력창이 대표적인 예다. 여기서 주의할 점이 하나 있다.

<!-- 잘못된 형태 - 위아래로 공백이 생김 -->
<textarea>
  텍스트 내용
</textarea>

<!-- 올바른 형태 - 태그 바로 뒤에 내용 시작 -->
<textarea>텍스트 내용</textarea>

<textarea> 태그는 엔터, 탭, 스페이스를 그대로 출력하는 특성이 있어서, 태그 안에 들여쓰기를 하면 그게 그대로 화면에 반영된다. 처음에 이걸 몰라서 왜 공백이 생기지? 했던 사람이 꽤 있었을 것 같다.

- fieldset & legend

연관된 입력 요소들을 시각적으로 그룹으로 묶을 때 쓴다. 회원가입 폼에서 "개인정보 입력", "약관 동의" 같이 섹션을 나눌 때 활용하면 깔끔하다.

<form>
  <fieldset>
    <legend>입력 양식</legend>
    <table>
      <tr>
        <td><label for="name">이름</label></td>
        <td><input id="name" type="text"></td>
      </tr>
      <tr>
        <td><label for="mail">이메일</label></td>
        <td><input id="mail" type="email"></td>
      </tr>
    </table>
    <input type="submit">
  </fieldset>
</form>

<legend> 태그가 <fieldset>의 테두리 상단에 타이틀처럼 붙는다.

📋div vs span, 블록 vs 인라인

HTML에서 영역(공간)을 나누는 태그는 크게 두 가지다. 어떤 태그를 써야 할지 헷갈리는 경우가 많은데, 블록이냐 인라인이냐의 차이만 이해하면 쉽게 구분된다.

태그 형식 특징
<div> 블록(Block) 한 행 전체를 차지. 태그가 끝나면 자동 줄 바꿈
<span> 인라인(Inline) 내용 크기만큼만 차지. 태그가 끝나도 줄 바꿈 없이 옆으로 이어짐 
<!-- div: 각각 독립적인 줄에서 시작 -->
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>

위 코드를 실행하면 div 태그들이 위에서 아래로 쌓인다. 각 태그가 행 전체를 독점하기 때문이다.

<!-- span: 한 줄에 나란히 붙음 -->
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
```

반면 span 태그들은 옆으로 나란히 붙어서 출력된다. 줄이 꽉 차야 비로소 다음 줄로 넘어간다.

 

div와 span 외에도 블록/인라인으로 분류되는 태그들이 있다.

| 블록 형식 태그 | 인라인 형식 태그 |
|---------------|----------------|
| div | span |
| h1 ~ h6 | a |
| p | input |
| ul, ol, li | b, i, small 등 글자 형식 태그 |
| table | 입력 양식 태그 |

이 구분은 CSS로 레이아웃을 잡을 때 핵심이 되는 개념이라 잘 익혀두는 게 좋다. 실제로 나중에 `display: block` 또는 `display: inline`으로 CSS에서 강제로 바꿀 수도 있다.

📋시맨틱 태그 (header, nav, section, article, footer)

시맨틱(Semantic)은 '의미론적'이라는 뜻이다. 시맨틱 웹이란 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹을 말하고, 시맨틱 태그는 그 웹을 구현하기 위해 태그 자체에 의미를 부여한 태그들이다.

`<div>`로만 페이지를 구성하면 코드만 봐서는 어디가 메뉴인지, 본문인지, 푸터인지 전혀 파악이 안 된다.

반면 시맨틱 태그를 쓰면 코드만 봐도 구조가 한눈에 보이고, 검색 엔진(SEO)도 페이지 내용을 훨씬 잘 이해할 수 있다.

 

시맨틱 태그로 구성한 일반적인 페이지 레이아웃은 아래와 같다.

┌────────────────────────────┐
│          <header>          │
├────────────────────────────┤
│            <nav>           │
├───────┬────────────┬───────┤
│<aside>│  <section> │<aside>│
│       │ <article>  │       │
│       │ <article>  │       │
├───────┴────────────┴───────┤
│          <footer>          │
└────────────────────────────┘

 

태그 역할
<header> 페이지 상단의 머리말 영역. 제목, 로고, 검색창 등
<nav> 하이퍼링크들을 모아 둔 내비게이션 메뉴
<section> 문서의 장이나 절에 해당하는 콘텐츠 묶음
<article> 본문과 독립적으로 존재할 수 있는 콘텐츠 (뉴스 기사, 블로그 포스트 등)
<aside> 본문 흐름에서 벗어나는 부가 콘텐츠. 사이드바, 광고, 관련 링크 등
<footer> 페이지 하단의 꼬리말 영역. 저자 정보, 저작권 등

실제로 같은 화면을 <div>만 쓴 방식과 시맨틱 태그를 쓴 방식으로 비교해보면 이렇다.

<!-- div만 사용한 경우 - 역할 파악 불가 -->
<body>
  <div>
    <h1>HTML5 기본</h1>
  </div>
  <div>
    <ul>
      <li><a href="#">메뉴 - 1</a></li>
      <li><a href="#">메뉴 - 2</a></li>
      <li><a href="#">메뉴 - 3</a></li>
    </ul>
  </div>
  <div>
    <div>
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div>
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <div>
    <span>서울특별시 강서구 내발산동</span>
  </div>
</body>

 

<!-- 시맨틱 태그 사용 - 코드만 봐도 구조가 보임 -->
<body>
  <header>
    <h1>HTML5 기본</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#">메뉴 - 1</a></li>
      <li><a href="#">메뉴 - 2</a></li>
      <li><a href="#">메뉴 - 3</a></li>
    </ul>
  </nav>
  <section>
    <article>
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
    <article>
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </section>
  <footer>
    <span>서울특별시 강서구 내발산동</span>
  </footer>
</body>

두 코드의 화면 출력 결과는 완전히 동일하다. 하지만 시맨틱 태그를 쓴 쪽은 태그 이름만 봐도 header는 헤더, nav는 메뉴, section 안의 article은 본문 콘텐츠, footer는 하단 정보라는 걸 바로 알 수 있다. 협업할 때 다른 사람이 내 코드를 읽어야 하는 상황이나, 나중에 내가 다시 코드를 봐야 할 때 시맨틱 태그의 진가가 발휘된다.

🌐 HTTP 프로토콜

프로토콜이란?

프로토콜(Protocol)은 원래 '외교 의전, 통신 규약'이라는 뜻이다. 통신 프로토콜이란 데이터를 주고받는 절차와 그 절차에서 사용하는 메시지 형식을 정의한 약속이다.

- TCP/IP

인터넷에서 데이터를 전송하는 데 사용하는 기본 프로토콜이다. IP와 TCP 두 가지가 역할을 분담한다.

IP (Internet Protocol)는 IP 주소를 기반으로 데이터를 목적지까지 전달한다. 다만 "Best Effort" 방식이라 최선을 다하지만 정확히 전달될 것을 보장하지는 않는다. 왜곡, 중복, 분실이 발생할 수 있다.

TCP (Transmission Control Protocol)는 IP로 전달된 메시지가 올바른지 검증하고, 에러가 있으면 수정·재전송해주는 역할이다. 덕분에 신뢰할 수 있는 통신이 가능해진다. TCP는 포트(port) 번호를 사용하는데, 메시지를 받을 애플리케이션을 지정하는 번호다.

IPv4 주소는 4바이트(32비트)로 구성되어 192.168.0.1처럼 10진수 4개를 점으로 구분해 표현한다. 이론상 약 40억 개의 주소를 가질 수 있는데, 전 세계 장치를 다 커버하기에는 부족해서 사설 IP(private IP)와 공인 IP(public IP)로 나눠서 IP 부족 문제를 해결하고 있다.

- HTTP 프로토콜

HTTP는 웹 브라우저와 웹 서버가 데이터를 주고받기 위한 프로토콜이다. 주요 특징은 다음과 같다.

  • 문자 기반 프로토콜
  • 기본 포트는 80번
  • 클라이언트가 요청을 보내면, 서버는 응답 후 연결을 끊는다
  • Stateless(무상태): 서버가 이전 접속 정보를 기억하지 않는다. 이전에 누가 접속했는지, 무슨 작업을 했는지 서버는 모른다.

웹이 동작하는 전체 흐름을 정리하면 이렇다.

  1. 브라우저에 URL 입력
  2. DNS 서버에서 도메인을 IP 주소로 변환
  3. IP + 80포트로 웹 서버에 HTML 페이지 요청
  4. 서버가 요청 내용 분석 후 파일 읽기
  5. HTML 파일을 브라우저로 전송
  6. 브라우저가 HTML 태그를 분석해 화면 구성

HTTP 요청/응답 메시지 구조

요청(Request) 메시지는 세 부분으로 구성된다.

  • 요청 라인(Request Line): HTTP 메서드 + 요청 URL + 프로토콜 버전 (GET /index.html HTTP/1.1)
  • 요청 헤더(Request Header): 브라우저 정보, 언어, 인코딩 방식 등 부가 정보
  • 요청 본체(Request Body): 전송할 데이터 (GET 방식은 Body가 없음)

응답(Response) 메시지도 마찬가지로 세 부분이다.

  • 상태 라인(Status Line): 프로토콜 버전 + 상태 코드 (HTTP/1.1 200 OK)
  • 응답 헤더(Response Header): 날짜, 서버 정보, 인코딩 방식 등
  • 응답 본체(Response Body): 실제 HTML 문서

주요 HTTP 상태 코드는 자주 보게 될 테니 외워두는 게 좋다.

코드 의미
200 OK - 요청 성공
404 Not Found - 페이지 없음
500 Internal Server Error - 서버 내부 오류

URL 구조

http://www.domain.com:1234/path/to/resource?a=b&x=y

  • http : 프로토콜
  • www.domain.com : 호스트 (도메인)
  • 1234 : 포트 번호
  • /path/to/resource : 리소스 경로
  • ?a=b&x=y : 쿼리 스트링 (GET 방식으로 전달되는 데이터)

🌐실습: 강아지 vs 고양이 투표 form 만들기

 

 

내가 직접 작성한 코드는 아래와 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>강아지 vs 고양이 투표</title>
</head>
<body>
  <fieldset>
    <h1>강아지 vs 고양이 투표</h1>
    <form method="get" action="https://port-0-kb7-back-node-mmc3pmla14c7b8b4.sel3.cloudtype.app/vote">
      <label for="name"><b>이름</b></label>
      <input id="name" type="text" name="name"><br><br>
      
      <input id="dog" type="radio" name="choice" value="dog">
      <label for="dog">강아지</label>
      
      <input id="cat" type="radio" name="choice" value="cat">
      <label for="cat">고양이</label>
      <br><br>
      
      <input type="submit" value="제출">
    </form>
  </fieldset>
</body>
</html>

이름 텍스트 입력창, 라디오 버튼 두 개(강아지/고양이), 제출 버튼으로 구성했다.

라디오 버튼의 name 값을 choice로 통일해야 두 버튼이 하나의 그룹으로 묶여서 하나만 선택된다는 걸 오늘 제대로 확인했다.

제출하면 실제 서버에 투표가 기록되고 터미널에서 투표 현황을 확인할 수 있었다.

 

실행 결과

🥸 2일차 느낀점

오늘 실습에서 가장 재밌었던 건 단연 투표 form이었다. 강사님이 열어두신 서버에 내가 만든 form으로 실제로 데이터를 쏴보는 건데, 투표할 때마다 강아지/고양이 숫자가 실시간으로 올라가는 게 눈에 보이니까 생각보다 훨씬 재밌었다.

 

이제 HTML이 다 끝나고 내일부터는 CSS 학습으로 넘어간다.

HTML이 뼈대라면 CSS는 옷인 느낌이다. 다뤄야 할 내용이 워낙 방대하다는 걸 알고 있기 때문에, 다시 한 번 학습하여 까먹지 않고 내것으로 만들어야겠다는 목표 의식이 생겼다.

2일차 점심 - 소금구이덮밥

 

 

'KB IT's Your Life | 교육 기록' 카테고리의 다른 글

[KB IT's Your Life 7기 - 교육 기록] 6일차 - JavaScript DOM & callback 함  (0) 2026.03.16
[KB IT's Your Life 7기 - 교육 기록] 5일차 - JavaScript 기본 문법  (0) 2026.03.15
[KB IT's Your Life 7기 - 교육 기록] 4일차 - CSS 레이아웃의 모든 것 (Position / Float / Flex / 반응형 웹)  (3) 2026.03.15
[KB IT's Your Life 7기 - 교육 기록] 3일차 - CSS 기초, 선택자, 박스 모델까지  (4) 2026.03.12
[KB IT's Your Life 7기 - 교육 기록] 1일차 - 웹 기초부터 HTML5 태그까지  (2) 2026.03.12
'KB IT's Your Life | 교육 기록' Related Articles more