웹표준기술 3일차

2025. 12. 2. 21:57ㆍ대우개발원 수업 내용/웹표준기술(HTML)

     <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city" size="5" multiple>
          <!-- 디폴트 속성은 한개만 선택 -->
          <option value="강북구">강북구</option>
          <option value="깅남구">강남구</option>
          <option value="서초구">서초구</option>
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </select>
        <input type="submit" value="등록">
     </fieldset>

날짜 지정하기

시간 지정하기

범위 제한하기

     <h1>날짜 지정하기</h1>
     <input type="date">
     <input type="month">
     <input type="week">
     <hr>
     <h1>시간 지정하기</h1>
     <input type="time">
     <input type="datetime-local">
     <hr>
     <h1>범위 제한하기</h1>
     <input type="date" min="2025-12-01" max="2025-12-15">
     <input type="time" min="19:00" max="21:00">
     <hr>

날짜/시간 입력 + 범위 제한(min/max)까지 포함해서 전체를 새로 정리

📌 HTML 날짜·시간 입력 + 범위 제한 태그 정리

HTML5에서는 날짜와 시간을 직관적으로 선택할 수 있도록 다양한 input 타입을 제공한다.
또한 min, max 속성을 사용하면 선택 가능한 범위를 제한할 수 있다.

✅ 1. 날짜 지정하기 (Date Inputs)

① <input type="date"> — 날짜 선택

년/월/일을 선택할 수 있는 기본 날짜 입력 필드.

<input type="date">

② <input type="month"> — 월 단위 선택

년/월(YYYY-MM)만 선택 가능.

<input type="month">

③ <input type="week"> — 주(week) 선택

"2025-W10"처럼 연도 + 몇 번째 주인지 선택할 때 사용.

<input type="week">

✅ 2. 시간 지정하기 (Time Inputs)

① <input type="time"> — 시간 선택

시:분 형식의 시간 선택 UI 제공.

<input type="time">

② <input type="datetime-local"> — 날짜 + 시간 선택

날짜와 시간을 한 번에 입력하는 통합 필드.

<input type="datetime-local">

✅ 3. 범위 제한하기 (min / max)

min과 max 속성을 사용하면 입력 가능한 날짜·시간 범위를 제한할 수 있다.

📌 날짜 범위 제한 예시

<input type="date" min="2025-12-01" max="2025-12-15">

✔ 2025년 12월 1일부터
✔ 2025년 12월 15일까지
이 범위 안에서만 날짜 선택 가능

📌 시간 범위 제한 예시

<input type="time" min="19:00" max="21:00">

✔ 19:00(오후 7시)부터
✔ 21:00(오후 9시) 사이 시간만 입력 가능

✨ 총정리 표

구분 태그 설명

날짜 선택	type="date"	날짜 선택 UI
월 선택	type="month"	년·월 선택
주 선택	type="week"	연도 + 주차 선택
시간 선택	type="time"	시·분 입력
날짜+시간	type="datetime-local"	날짜와 시간 통합 입력
날짜 범위 제한	min, max	선택 가능한 날짜 제한
시간 범위 제한	min, max	선택 가능한 시간 제한

  <form>
  <input type="submit" value="가입하기">
  <input type="reset" value="취소">
  </form>

아래는 **이번에 새로 배운 버튼 타입(input 태그)**만 정리
설명은 딱 필요한 만큼만, 깔끔하게 작성했어!

📌 HTML 폼 버튼 태그 (새로 배운 것만)

HTML의 <input> 태그는 다양한 타입을 통해 폼 전송, 초기화 등의 기능을 버튼 형태로 제공한다. 이번에는 그중에서도 form에서 자주 쓰는 두 가지 버튼 타입을 정리한다.

1️⃣ <input type="submit"> — 폼 전송 버튼

클릭하면 form 안의 입력값을 서버로 전송한다.
기본 버튼 문구는 “제출”, 하지만 value 속성으로 변경 가능.

<input type="submit" value="가입하기">

✔ 사용 예: 회원가입, 로그인, 검색 등
✔ 폼 action 속성에 설정된 경로로 데이터가 전송됨

2️⃣ <input type="reset"> — 입력 내용 초기화 버튼

form 내부의 모든 입력값을 처음 상태로 되돌린다.
value 속성으로 표시되는 문구를 바꿀 수 있다.

<input type="reset" value="취소">

✔ 사용 예: 입력 취소, 작성한 내용 전체 삭제 등

✨ 총정리

버튼 종류 태그 설명

제출 버튼	type="submit"	폼 데이터를 서버로 전송
초기화 버튼	type="reset"	입력한 내용을 모두 초기화

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>폼 연습</title>
</head>
<body>
  <form action="" method="">
    <input type="hidden" value="사이트를 통한 직접 로그인">
    <label>아이디: <input type="text" id="user_id" size="5"></label>
    <label>비밀번호: <input type="password" id="user_pw" size="10"></label>
    <input type="image" src="../images/login.png" alt="로그인">
  </form>
</body>
</html>

아래는 이번 코드에서 새롭게 등장한 태그·속성만 정리
(이미 배운 text, password 같은 것들은 제외하고, hidden / image 타입만 설명!)

📌 HTML 폼 태그 — 새로 배운 입력 타입 정리

1️⃣ <input type="hidden"> — 화면에 보이지 않는 숨겨진 데이터

hidden 타입은 사용자에게 보이지 않지만 폼 전송 시 함께 전달되는 값을 넣을 때 사용한다.

<input type="hidden" value="사이트를 통한 직접 로그인">

✔ 사용 목적

자동으로 서버에 전달해야 하는 값
사용자의 입력을 받지 않는 내부 데이터
로그인 방식, 상품 번호, 토큰 등 숨겨야 하는 정보 전달

✔ 특징

화면에 표시되지 않는다
사용자가 수정할 수 없다
폼을 제출하면 value 값이 함께 전송된다

2️⃣ <input type="image"> — 이미지를 버튼처럼 사용하는 타입

image 타입은 submit 버튼 대신 이미지로 폼을 전송할 수 있게 하는 입력 방식이다.

<input type="image" src="../images/login.png" alt="로그인">

✔ 특징

이미지 클릭 시 submit 버튼처럼 폼이 제출된다
src에 이미지 경로를 지정
alt는 이미지가 없을 때 대체 텍스트로 표시됨
로그인/검색/삭제 등의 버튼을 이미지로 꾸밀 때 사용

✔ 추가 설명

클릭한 위치의 x, y 좌표도 함께 서버로 전송된다
(일반적으로는 사용하지 않지만 혹시 활용할 수 있음)

✨ 총정리

타입 설명 특징

type="hidden"	숨겨진 데이터 전송	화면 표시 X, 수정 불가
type="image"	이미지를 submit 버튼으로 사용	이미지 클릭 시 폼 전송

블로그 글쓰기 제목 내용

     <fieldset>
      <legend>블로그 글쓰기</legend>
      <p>
      <label for="title"> 제목
        <input type="text" id="title" name="title">
      </label>
      </p>
      <p>
        <label for="desc">내용
          <textarea id="desc" name="desc" rows="5" cols="30"></textarea>
        </label>
      </p>
     </fieldset>

(text는 이미 배운 내용이므로 제외하고 fieldset / legend / textarea만 설명함)

📌 HTML 폼 그룹 & 여러 줄 입력 태그 정리

✅ 1. <fieldset> — 관련 입력을 하나의 그룹으로 묶기

fieldset은 서로 연관된 입력 요소들을 하나의 박스 형태로 묶어주는 태그이다.
폼을 구역별로 나누고 싶을 때 주로 사용한다.

<fieldset>
  ...입력 영역...
</fieldset>

✔ 특징

그룹 단위로 시각적으로 구분됨
입력 폼의 구조를 명확하게 만들 수 있음
웹 접근성과 가독성이 향상됨

✅ 2. <legend> — fieldset의 제목

legend는 fieldset의 제목 역할을 하며,
현재 그룹이 어떤 내용을 입력하기 위한 것인지 설명한다.

<legend>블로그 글쓰기</legend>

✔ 특징

반드시 fieldset 바로 안쪽에 작성
그룹의 목적을 한눈에 파악 가능
스타일 적용 시 제목처럼 꾸며 사용 가능

✅ 3. <textarea> — 여러 줄 텍스트 입력 영역

textarea는 긴 글, 설명, 블로그 글 같은 여러 줄 텍스트를 입력하는 태그이다.

<textarea id="desc" name="desc" rows="5" cols="30"></textarea>

✔ 특징

여러 줄 입력 가능하며 줄바꿈 가능
rows: 높이(보여줄 줄 수)
cols: 너비(보여줄 글자 수)
블로그 글쓰기·댓글·게시판 글 작성에 필수 요소
CSS로 자유롭게 크기 조절 가능

✨ 총정리

태그 기능

<fieldset>	입력 요소들을 하나의 그룹으로 묶는 박스
<legend>	fieldset의 제목 역할
<textarea>	여러 줄 텍스트를 입력하는 영역

비밀번호
비밀번호 확인

      <li>
        <label for="user_pw">비밀번호</label>
        <input type="password" id="user_pw" size="10">
      </li>
      <li>
        <label>비밀번호 확인<input type="password" id="user_pw_check" size="10"></label>
      </li>

아래는 주어진 두 가지 label 작성 방식이 모두 가능한 이유와,
각 방식의 차이·장단점을 블로그에 정리하기 좋은 형태로 자세하게 정리해준 내용

📌 HTML <label> 태그 두 가지 사용 방식 비교

HTML에서 <label>은 입력 요소(<input> 등)와 연결해
사용자가 클릭하기 편하도록 돕는 중요한 태그다.

아래 두 가지 방식은 모두 올바른 label 사용법이지만 구조와 용도가 조금 다르다.

✅ ① 방식 1 — label과 input을 따로 작성 (for + id 사용)

<label for="user_pw">비밀번호</label>
<input type="password" id="user_pw" size="10">

✔ 동작 방식

label의 for 속성이 입력 요소의 id와 연결됨
라벨을 클릭하면 해당 input이 자동으로 포커스됨

✔ 장점

가장 표준적이며 많이 사용하는 방식
라벨과 input을 독립적으로 배치 가능 → CSS 구성에 유리
화면 낭독기(Screen Reader)에 최적화 → 웹 접근성 우수
라벨과 입력창을 자유롭게 떨어뜨리거나 배치 가능

✔ 단점

for/id를 반드시 쌍으로 정확하게 작성해야 함
구조가 약간 길어질 수 있음

✅ ② 방식 2 — input을 label 내부에 포함시키기

<label>비밀번호 확인
  <input type="password" id="user_pw_check" size="10">
</label>

✔ 동작 방식

<label> 태그 안에 <input>이 들어가면
자동으로 해당 input이 label과 연결됨
(for, id 없이도 클릭 시 포커스 됨)

✔ 장점

for/id를 안 써도 됨 → 작성하기 간단함
라벨과 input이 하나의 요소처럼 묶이므로
“텍스트 + 입력창”이 한 덩어리처럼 구성됨
HTML 코드가 더 짧아짐

✔ 단점

라벨과 input의 배치를 자유롭게 떨어뜨리기 어려움
디자인(UI)을 세밀하게 구성하기에는 불리할 수 있음
label 안에 요소가 너무 많아지면 시멘틱 구조가 복잡해짐

🔎 두 방식의 공통점

둘 다 클릭 시 input에 포커스가 이동함
둘 다 올바른 HTML 구조임
접근성(스크린 리더 지원)은 두 방식 모두 문제 없음
실제 프로젝트에서도 둘 다 많이 사용됨

📝 언제 어떤 방식을 쓰면 좋을까?

상황 추천 방식

깔끔한 레이아웃, label과 input 위치를 자유롭게 조절	① for + id 방식
label과 input을 한 덩어리처럼 묶어 간단하게 구성	② label 내부 포함 방식
큰 폼, 여러 줄 구성, CSS 작업이 많은 경우	① 방식
작은 입력 박스, 일렬 구성처럼 심플한 UI	② 방식

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>웹 폼</title>
</head>
<form>
  <h1>회원 가입</h1>
  <fieldset>
    <legend>로그인 정보</legend>
    <ul>
      <li>
        <label>아이디 <input type="text" id="user_id" size="10"></label>
      </li>
      <li>
        <label for="user_pw">비밀번호</label>
        <input type="password" id="user_pw" size="10">
      </li>
      <li>
        <label>비밀번호 확인<input type="password" id="user_pw_check" size="10"></label>
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>개인 정보</legend>
    <ul>
      <li>
        <label>이름 <input type="name" id="user_name"></label>
      </li>
      <li>
        <label for="mail">메일 주소<input type="email" id="mail"></label>
      </li>
      <li>
        <label>전화번호<input type="tel" id="phone"></label>
      </li>
      <li>
        <label>블로그/홈페이지<input type="url" id="urll"></label>
      </li>
    </ul>
    
  </fieldset>
  <input type="submit" value="가입하기">
</form>
</body>
</html>

아래는 너가 작성한 전체 코드에서 “새로 배운 입력 타입들만” 정리한 설명이야.
(text, password 같은 기본 input은 제외하고 email, tel, url 중심으로 정리함)
또한 전체 구조 중 **폼 구조(fieldset, legend)**도 함께 설명해줄게!

📌 HTML 회원가입 폼 — 새로 배운 태그 정리

아래 예제는 회원가입 페이지를 구성하며, HTML5에서 제공하는 다양한 입력 타입을 활용하고 있다.
특히 email, tel, url 같은 유효성 검사가 자동 적용되는 입력 타입이 새로 등장했다.

✅ 1. <input type="email"> — 이메일 입력

<input type="email" id="mail">

✔ 특징

이메일 형식(aaa@bbb.com)인지 기본적으로 검사해줌
형식이 틀리면 submit 시 경고가 나타남
모바일에서는 이메일 입력에 최적화된 키보드가 열림

✔ 사용 예

회원가입
아이디 찾기
문의 폼 등

✅ 2. <input type="tel"> — 전화번호 입력

<input type="tel" id="phone">

✔ 특징

전화번호 전용 입력란
형식 제한은 없지만 모바일에서 숫자 키패드가 자동으로 열림
전화번호 패턴을 강제하고 싶으면 pattern 속성과 함께 사용 가능

예:

<input type="tel" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}">

✅ 3. <input type="url"> — 웹사이트 주소 입력

<input type="url" id="urll">

✔ 특징

URL 형식인지 자동으로 검사 (예: https://example.com)
잘못된 형식이면 submit 시 경고
블로그 주소, 개인 홈페이지 주소 입력에 사용됨

✅ 4. <fieldset> — 입력 영역 그룹화

<fieldset>
  <legend>로그인 정보</legend>
  ...
</fieldset>

✔ 역할

관련된 입력 요소들을 하나의 박스로 묶어줌
로그인 정보 / 개인 정보처럼 구역을 나눌 때 필수
시각적으로도 박스로 구분되어 읽기 편함

✅ 5. <legend> — fieldset의 제목

<legend>개인 정보</legend>

✔ 특징

fieldset 영역의 제목
어떤 내용을 입력하는 구역인지 명확하게 알려줌

✨ 전체 폼 구조에서 배울 수 있는 것

태그 의미

type="email"	이메일 형식 자동 검사
type="tel"	전화번호 입력 (모바일 숫자 키패드)
type="url"	URL 형식 자동 검사
<fieldset>	입력 구역을 논리적으로 묶음
<legend>	묶은 구역의 제목 표시
type="submit"	폼 전송 버튼

📌 전체적으로 배운 핵심 포인트

HTML5에서는 입력 타입에 따라 자동 검증 기능을 제공 → 올바른 형식 입력을 유도
모바일 환경에서 더 정확하고 편리한 입력 가능
fieldset/legend로 폼을 구조화하면 가독성·접근성도 향상
<label> 사용 방식도 두 가지 모두 가능
(for/id 연결 방식 & input 포함 방식)

개인 정보 입력 지역

     <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city" multiple>
          <!-- 디폴트 속성은 한개만 선택이지만 <select name="city" id="city" size="5" multiple>
          이렇게 쓰면 5개가 보여지고 ctrl누르고 선택하면 여러개를 선택 가능하다다 -->
           
          <option value="강북구">강북구</option>
          <option value="깅남구">강남구</option>
          <option value="서초구" selected>서초구</option>
          <!-- selected 속성은 이미 선택된 것 처럼 보이는 속성 -->
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </select>
        <input type="submit" value="등록">
     </fieldset>

아래는 수정된 최종 코드 multiple + selected

📌 HTML 선택 목록(select) — multiple + selected 속성 정리

이번 코드는 <select>에서
✔ 여러 개 선택 가능(multiple)
✔ 기본 선택값(selected)
등을 배우는 예제다.

✅ 1. <select multiple> — 여러 항목을 선택할 수 있는 목록

<select name="city" id="city" multiple>

✔ 역할

드롭다운이 아니라 리스트 박스 형태로 표시
Ctrl(윈도우) 또는 Command(맥)을 누르고 클릭하면
여러 개 항목을 동시에 선택할 수 있음
선택한 모든 값이 서버로 전송됨

✔ 주의점

multiple만 쓰면 size 기본값이 4~5 정도로 보이는 리스트 박스가 생성됨
직접 개수를 지정하고 싶으면 다음처럼 size를 사용할 수 있음

<select multiple size="5">

✅ 2. <option selected> — 기본으로 선택된 항목

<option value="서초구" selected>서초구</option>

✔ 역할

페이지가 처음 로드될 때 이미 체크된 상태처럼 보임
사용자가 변경하지 않아도 기본 선택값으로 제출됨

✔ 특징

multiple과 함께 사용하면
기본으로 여러 개 선택된 상태도 가능
selected는 여러 option에 붙여도 됨

🔎 전체 옵션 코드

<option value="강북구">강북구</option>
<option value="깅남구">강남구</option>
<option value="서초구" selected>서초구</option>
<option value="중원구">중원구</option>
<option value="분당구">분당구</option>

✅ 3. <input type="submit"> — 선택된 옵션 서버로 전송

<input type="submit" value="등록">

✔ 역할

목록에서 선택된 옵션들의 value 값을 서버에 전송
multiple 사용 시 선택된 항목이 여러 개 전송됨

✨ 요약 정리

속성/태그 기능

<select multiple>	여러 항목을 동시에 선택 가능
size="숫자"	여러 항목을 한 번에 보여주는 리스트 박스
<option>	실제 선택 항목
<option selected>	기본으로 선택되어 보이는 옵션
submit	선택한 값 서버로 전송

개인 정보 입력 지역

     <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city">
          <optgroup label="서울시">
          <option value="강북구">강북구</option>
          <option value="깅남구">강남구</option>
          <option value="서초구">서초구</option>
          </optgroup>
          <optgroup label="경기도 성남시">
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
          </optgroup>
        </select>
        <input type="submit" value="등록">
     </fieldset>

📌 HTML <optgroup> — 옵션을 그룹으로 묶기

<optgroup> 태그는 <select> 안의 여러 <option>들을
그룹(묶음) 형태로 정리할 때 사용한다.

대량의 옵션을 지역·카테고리 등으로 나눌 때 매우 유용하다.

✅ 1. <select> — 선택 목록의 전체 구조

<select name="city" id="city">
  ...
</select>

✔ 역할

여러 옵션 중 하나를 선택할 수 있는 드롭다운 메뉴 생성
name 속성은 서버로 값이 전송될 때의 변수 이름

✅ 2. <optgroup> — 옵션을 카테고리별로 묶는 태그

<optgroup label="서울시">
  <option>강북구</option>
  <option>강남구</option>
  <option>서초구</option>
</optgroup>

✔ 특징

옵션들을 카테고리(그룹) 단위로 구분하여 보여줌
label 속성이 그룹 제목으로 표시됨
시각적으로 들여쓰기가 자동으로 적용됨
사용자는 label을 선택할 수 없고, 옵션만 선택 가능

✔ 언제 사용하나?

지역별 구분 (서울 / 경기 / 인천 등)
카테고리별 구분 (전자제품 / 의류 / 식품 등)
많은 옵션을 정리해야 할 때

🔎 코드 전체 구조 예시

<select name="city" id="city">
  <optgroup label="서울시">
    <option value="강북구">강북구</option>
    <option value="깅남구">강남구</option>
    <option value="서초구">서초구</option>
  </optgroup>

  <optgroup label="경기도 성남시">
    <option value="중원구">중원구</option>
    <option value="분당구">분당구</option>
  </optgroup>
</select>

✅ 3. <option> — 실제 선택되는 항목

<option value="강북구">강북구</option>

✔ 역할

사용자가 선택하는 실제 값
화면 표시 텍스트와 서버 전송값(value) 설정 가능

🔹 4. <input type="submit"> — 제출 버튼

<input type="submit" value="등록">

폼에서 선택한 city 값을 서버로 전송하는 역할을 한다.

✨ 요약 정리

태그 설명

<select>	선택 목록 전체
<optgroup>	옵션들을 그룹으로 묶는 태그
label=""	optgroup의 그룹 제목
<option>	실제 선택 항목
submit	선택한 항목 서버로 전송

여름방학 특강 신청

수강 신청인

학번
이름
학과

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>웹 폼</title>
</head>
<body>
  <h1>여름방학 특강 신청</h1>
  <br>
  <fieldset>
    <legend>수강 신청인</legend>
    <ul>
      <li>
        <label for="hak">학번</label>
        <input type="text" id="hak">
      </li>
      <li>
        <label for="user_name">이름</label>
        <input type="text" id="user_name">
      </li>
      <li>
        <label for="sclass">학과</label>
        <select name="sclass" id="sclass">
          <optgroup label="공과대학">
            <option value="건축공학과" selected>건축공학과</option>
            <option value="기계공학과">기계공학과</option>
            <option value="전기전자공학과">전기전자공학과</option>
            <option value="컴퓨터공학과">컴퓨터공학과</option>
            <option value="화학공학과">화학공학과</option>
            </optgroup>
            <optgroup label="인문대학">
            <option value="사학과">사학과</option>
            <option value="어문학부">어문학부</option>
            <option value="철학">철학</option>
            </optgroup>
          </select>
      </li>
    </ul>
  </fieldset>
</body>
</html>

핵심 태그는 fieldset / legend / select / optgroup / option 이다.

📌 여름방학 특강 신청 폼 — HTML 태그 설명

이 예제는 입력 폼 구조를 만들면서,
**선택 목록을 그룹으로 나누는 방법(optgroup)**까지 포함하고 있다.

✅ 1. <fieldset> — 입력 구역을 묶는 태그

<fieldset>
  ...
</fieldset>

✔ 기능

여러 입력 요소를 **하나의 구역(그룹)**으로 묶어줌
시각적으로 테두리가 생겨 구역이 분리됨
폼이 복잡해질수록 필수적인 구조

✅ 2. <legend> — fieldset의 제목

<legend>수강 신청인</legend>

✔ 특징

fieldset의 제목 표시
어떤 정보를 입력하는 영역인지 사용자가 쉽게 알 수 있음

✅ 3. <select> — 선택 목록(드롭다운)

<select name="sclass" id="sclass">
  ...
</select>

✔ 특징

여러 항목 중 하나를 선택할 때 사용
name 속성은 서버로 전달되는 변수 이름
id는 label과 연결할 때 사용

✅ 4. <optgroup> — 옵션을 카테고리별로 묶기

<optgroup label="공과대학">
  <option>건축공학과</option>
  <option>기계공학과</option>
</optgroup>

✔ 특징

옵션 목록을 **대학 단위(공과대학 / 인문대학)**처럼 그룹으로 묶어서 보여줌
label 속성에 그룹 이름을 넣는다
optgroup은 선택할 수 없고, option만 선택 가능
많은 옵션을 정리하는 데 매우 효율적

✔ 장점

보기 편하고 구조적
사용자가 항목을 쉽게 찾을 수 있음
폼의 가독성 향상

✅ 5. <option> — 실제 선택하는 항목

<option value="건축공학과" selected>건축공학과</option>

✔ 특징

value → 서버로 전송되는 값
태그 안의 텍스트 → 화면에 표시되는 이름
selected → 기본으로 선택되어 보이도록 설정

이 코드에서는 "건축공학과"가 기본 선택값이다.

✨ 전체 구조 설명

이 폼은 공과대학 / 인문대학을 optgroup으로 묶어
사용자가 자신의 학과를 쉽게 고를 수 있게 만든 구조다.

구조는 다음처럼 나뉜다:

수강 신청인 정보 입력
 ├─ 학번 입력
 ├─ 이름 입력
 └─ 학과 선택 (공과대학 + 인문대학 그룹)

📝 요약 정리

태그 역할

<fieldset>	입력 요소들을 하나의 묶음으로 구성
<legend>	묶음의 제목
<select>	선택 목록 전체
<optgroup>	옵션을 그룹으로 분류
<option>	실제 선택 값, 화면에 표시되는 항목
selected	기본 선택 상태 표시

     <button type="submit">
      <img src="../images/login.png" alt="페이스북 버튼">
      페이스북에 등록하기
     </button>

📌 HTML <button> 태그 — 이미지 + 텍스트 버튼 만들기

이번 코드는 <button> 태그 안에 이미지 + 텍스트를 함께 넣는 방식으로
사용자에게 더 풍부한 UI 버튼을 제공하는 예제이다.

✅ 1. <button type="submit"> — 폼 제출 버튼

<button type="submit">
  ...
</button>

✔ 특징

클릭하면 **폼을 제출(submit)**하는 역할
<input type="submit">과 동일한 기능을 수행하지만
button은 내부에 다양한 요소(img, span, strong 등)를 자유롭게 넣을 수 있다는 장점이 있다.
디자인 다양화에 매우 적합

✔ 언제 사용하나?

아이콘 + 텍스트 버튼
이미지 기반 버튼
스타일링이 필요한 submit 버튼
SNS 로그인 버튼 등

✅ 2. 버튼 내부에 이미지 넣기

<img src="../images/login.png" alt="페이스북 버튼">

✔ 특징

버튼 내부에 이미지를 삽입하여 아이콘 형태의 버튼을 만들 수 있음
alt 속성은 이미지가 보이지 않을 때 대체 텍스트를 제공
이미지와 텍스트가 함께 표시되므로 시각적으로 더 풍부한 버튼 구성 가능

✅ 3. 버튼 내부 텍스트

페이스북에 등록하기

✔ 특징

이미지 오른쪽에 텍스트가 표시됨
SNS 로그인, 소셜 등록 같은 버튼을 직관적으로 안내할 수 있음

✨ 전체 코드 구조

<button type="submit">
  <img src="../images/login.png" alt="페이스북 버튼">
  페이스북에 등록하기
</button>

📌 <button> vs <input type="submit"> 비교

항목 <button> <input type="submit">

내부에 콘텐츠 삽입 가능?	가능(img, span 등)	불가능(텍스트만 가능)
디자인 자유도	매우 높음	제한적
텍스트만 넣기	가능	가능
이미지 버튼 만들기	✔ 매우 쉬움	✖ 속성으로 이미지 지정 불가

따라서 지금처럼 이미지와 텍스트를 함께 넣는 버튼을 만들고 싶으면
<button> 태그가 훨씬 적합하다.

📝 요약

<button>은 submit 기능 뿐 아니라 내부에 이미지·텍스트·아이콘 자유롭게 포함이 가능
SNS 로그인 버튼, 스타일 있는 버튼, 아이콘 버튼 등에 많이 사용됨
<input type="submit">보다 디자인 구성에 훨씬 유리함

개인 정보 입력 지역

     <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city">
          <optgroup label="서울시">
          <option value="강북구">강북구</option>
          <option value="깅남구">강남구</option>
          <option value="서초구">서초구</option>
          </optgroup>
          <optgroup label="경기도 성남시">
          <option value="중원구" disabled>중원구</option>
          <option value="분당구">분당구</option>
          </optgroup>
        </select>
        <input type="submit" value="등록">
     </fieldset>

아래는 option에 사용된 disabled 속성만 정리한 설명이야!

📌 <option disabled> — 선택할 수 없게 만드는 속성

HTML의 <option> 태그에서 disabled 속성을 사용하면
해당 항목을 선택 불가능한 상태로 만들 수 있다.

✅ 1. 기본 예시

<option value="중원구" disabled>중원구</option>

✅ 2. disabled의 특징

✔ 1) 선택할 수 없다

드롭다운 목록에 표시되지만
사용자는 이 항목을 선택할 수 없다.

✔ 2) 보통 흐린 색(비활성화된 상태)으로 표시됨

브라우저에서 자동으로 스타일이 적용되어
선택 불가 항목이라는 것을 바로 알 수 있음.

✔ 3) 폼 제출 시 전송되지 않음

선택이 불가능하므로 값이 서버로 전송될 일도 없다.

✔ 4) 안내 목적, 구분용으로도 사용 가능

예)

“현재 신청 마감된 지역”
“업데이트 예정 옵션”
“선택 불가 안내 항목”

✨ 언제 쓰면 좋을까?

특정 옵션을 임시로 비활성화해야 할 때
공지 또는 안내용 옵션을 넣되 선택 불가로 둘 때
유효하지 않은 선택지를 드롭다운에서 표시만 하고 싶을 때

📝 요약

속성 기능

disabled

해당 option을 선택할 수 없도록 비활성화

블로그 글쓰기 제목 내용

<fieldset>
  <legend>블로그 글쓰기</legend>
  <p> <label for="title"> 제목 <input type="text" id="title" name="title" value="제목입니다." readonly> </label> </p>
  <p> <label for="desc">내용 <textarea id="desc" name="desc" rows="5" cols="30" placeholder="150자 내로 입력해주세요요"></textarea>
    </label> </p>
</fieldset> 
<!-- 2번째 코드  -->
<form action="" method=""> <input type="hidden" value="사이트를 통한 직접 로그인"> <label>아이디: <input
      type="text" id="user_id" size="5" autofocus required></label> <label>비밀번호: <input type="password" id="user_pw"
      size="10" value="비밀번호"></label> <input type="image" src="../images/login.png" alt="로그인"> </form>

아래는 두 개의 코드 전체를 기준으로,
요청한 네 가지 속성(required / autofocus / readonly / placeholder)만 정리해준 설명이야!

📌 HTML 입력 속성 4가지 정리

(required · autofocus · readonly · placeholder)

이 속성들은 사용자의 입력을 도와주거나 입력 방식을 제한하는 역할을 한다.
특히 폼 검증과 편의성 향상에 자주 사용된다.

✅ 1. required — 필수 입력 항목 지정

<input type="text" id="user_id" required>

✔ 기능

반드시 입력해야만 폼 제출이 가능함
값이 비어 있으면 브라우저가 자동으로 경고 메시지 표시
자바스크립트 없이도 기본적인 폼 검증 가능

✔ 언제 사용?

회원가입 아이디, 비밀번호
이메일 입력 필드
필수 입력값이 필요한 모든 상황

✅ 2. autofocus — 페이지 로드시 자동 포커스 지정

<input type="text" id="user_id" autofocus>

✔ 기능

페이지가 로드되면 해당 입력창에 자동으로 커서가 위치
사용자가 바로 입력할 수 있어 편리

✔ 사용 예

로그인 페이지 아이디 입력창
검색창
가장 먼저 입력해야 하는 필드

✅ 3. readonly — 읽기 전용(수정 불가)

<input type="text" value="제목입니다." readonly>

✔ 기능

내용은 보이지만 사용자가 수정할 수 없다
폼 제출 시 값은 서버로 그대로 전송됨
비활성화(disabled)과 가장 큰 차이점:
✔ disabled는 제출되지 않지만
✔ readonly는 제출된다

✔ 사용 예

자동 생성된 게시글 번호
수정 불가한 제목/아이디 표시
시스템이 제공한 값만 보여주고 싶을 때

✅ 4. placeholder — 입력 안내문 표시

<textarea placeholder="150자 내로 입력해주세요"></textarea>

✔ 기능

입력란이 비어 있을 때 회색 안내 문구 표시
사용자가 어떻게 입력해야 하는지 예시를 보여줌
입력이 시작되면 placeholder는 사라짐

✔ 사용 예

“이름을 입력하세요”
“검색어를 입력하세요”
“150자 이내로 작성해 주세요” (현재 코드처럼)

✨ 네 가지 속성 차이 한눈에 보기

속성 기능

required	반드시 입력해야 제출 가능
autofocus	페이지 로드 시 자동으로 커서 위치
readonly	값 수정 불가하지만 제출 가능
placeholder	입력 안내 예시 텍스트 표시

📌 참고 코드 안에 등장한 위치

✔ readonly → 첫 번째 코드의 제목 입력창

<input type="text" value="제목입니다." readonly>

✔ placeholder → 첫 번째 코드의 textarea

<textarea placeholder="150자 내로 입력해주세요"></textarea>

✔ autofocus → 두 번째 코드의 아이디 입력창

<input type="text" autofocus>

✔ required → 두 번째 코드의 아이디 입력창

<input type="text" required>

<!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>
  <form>
  <h1>회원 가입을 환영합니다</h1>
  <fieldset>
    <legend>사용자 정보</legend>
    <ul style="list-style: none;">
      <li>
        <label style="width: 300px; display: inline-block;">아이디: <input type="text" id="user_id" 
          placeholder="4자 ~ 10자 사이, 공백없이" autofocus></label>
      </li>
      <li>
        <label for="mail" style="width: 300px; display: inline-block;">이메일
        <input type="email" id="mail" required></label>
      </li>
      <li>
        <label style="width: 300px; display: inline-block;">비밀번호: <input type="password" id="user_pw"
          placeholder="문자와 숫자, 특수 기호 포함" required></label>
      </li>
      <li>
        <labelstyle="width: 300px; display: inline-block;">비밀번호 확인: 
          <input type="password" id="user_pw_check" size="10" required></labelstyle=>
      </li>
      <li>
        <label for="haddress"style="width: 300px; display: inline-block;">가입경로</label>
        <select id="haddress">
          <option value="blog" selected>블로그</option>
          <option value="search">검색</option>
          <option value="sns">SNS</option>
          <option value="etc">기타</option>
        </select>
      </li>
      <li>
        <label for="memo"style="width: 300px; display: inline-block;">메모
          <textarea id="memo" rows="4" cols="40" placeholder="남길 말씀이 있다면 여기에"></textarea>
        </label>
      </li>
  </fieldset>
  <fieldset>
    <legend>이벤트와 새로운 소식</legend>
    <label><input type="radio" name="s_mail" value="yes">메일 수신</label>
    <label><input type="radio" name="s_mail" value="no" checked>메일 수신 안 함</label>
  </fieldset>
  <input type="submit" value="가입하기">
  <input type="reset" value="취소">
  <hr>
  <input type="button" value="가입하기">
  <input type="button" value="취소">
  </form>
</body>
</html>

📌 회원가입 폼 설명 (라벨 정렬 버전)

이번 버전에서는
✔ <label>과 <input>을 분리
✔ display: inline-block을 사용해 라벨을 정확한 위치에 정렬
하는 방식으로 UI가 훨씬 깔끔해졌다.

HTML 폼 구성 요소와 입력 속성을 배우는 데 매우 좋은 예제이다.

✅ 1. <fieldset> & <legend> — 입력 구역 묶기

두 영역으로 나뉜다.

✔ 사용자 정보 입력 구역

<fieldset>
  <legend>사용자 정보</legend>
  ...
</fieldset>

관련된 입력 요소를 하나의 박스로 묶어 가독성 증가
legend는 제목 역할

✔ 이벤트 수신 여부 구역

<fieldset>
  <legend>이벤트와 새로운 소식</legend>
  ...
</fieldset>

라디오 버튼으로 선택하도록 구성
회원가입 폼에서 자주 사용하는 패턴

✅ 2. 리스트 스타일 제거

<ul style="list-style: none;">

li 앞의 점(●)을 제거
정돈된 입력폼 형태로 보이게 함

✅ 3. 라벨 정렬을 위한 display: inline-block

각 label에 다음 스타일이 들어가 있다:

<label style="width: 100px; display: inline-block;">

✔ 효과

라벨이 고정 너비(100px) 를 갖도록 설정
label이 inline이지만 block처럼 너비를 가짐 → 깔끔한 좌우 정렬
입력창들이 모두 똑같은 위치에서 시작됨
폼 UI가 정리되어 전문적인 양식처럼 보임

✅ 4. 개별 입력 요소 설명

✔ 아이디

<input type="text" placeholder="4자 ~ 10자 사이, 공백없이" autofocus>

placeholder: 입력 예시
autofocus: 페이지 로드 시 자동 커서 이동
가장 먼저 입력해야 하는 항목에 적합

✔ 이메일

<input type="email" required>

이메일 형식 자동 검사
required: 입력 필수

✔ 비밀번호 / 비밀번호 확인

<input type="password" placeholder="문자와 숫자, 특수 기호 포함" required>

입력 내용 숨김
placeholder로 요구 형식 제시
required로 필수 입력 설정

✔ 가입경로 (select)

<select id="haddress">
  <option value="blog" selected>블로그</option>
  <option value="search">검색</option>
  <option value="sns">SNS</option>
  <option value="etc">기타</option>
</select>

드롭다운 메뉴 제공
selected로 기본 선택값 설정
value는 제출 시 서버로 전달되는 값

✔ 메모

<textarea id="memo" rows="4" cols="40" placeholder="남길 말씀이 있다면 여기에"></textarea>

여러 줄 입력 가능
cols=40으로 넓게 설정
placeholder로 설명 제공

✅ 5. 이벤트 수신 여부 (radio)

<input type="radio" name="s_mail" value="yes">
<input type="radio" name="s_mail" value="no" checked>

✔ 특징

같은 name → 둘 중 하나만 선택
checked: 기본 선택(메일 수신 안 함)

✅ 6. 세 가지 버튼의 차이

✔ 제출 버튼 (폼 전송)

<input type="submit" value="가입하기">

✔ 초기화 버튼 (입력값 삭제)

<input type="reset" value="취소">

✔ 일반 버튼 (기능 없음)

<input type="button" value="가입하기">
<input type="button" value="취소">

클릭해도 아무 일 없음
JavaScript 이벤트 추가할 때 사용

✨ 이번 버전에서 새롭게 배운 핵심

요소 설명

display: inline-block	라벨을 일정한 너비로 정렬
placeholder	입력 안내 메시지
autofocus	자동 커서 이동
required	필수 입력 지정
select + option	드롭다운 옵션 제공
textarea	여러 줄 텍스트 입력
radio	단일 선택 옵션

번호	상품명	수량	가격
1	콜라	1개	1,500원
2	사이다	2개	1,000원
3	탄산수	3개	1,000원

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>table</title>
  <style>
    table{
      border-collapse: collapse;
    } 
    th, td {
      border: 1px solid #ccc;
      text-align: center;
    }
    </style>
</head>
<body>
  <!-- 테이블의 시작을 의미 -->
   <table>
    <tr>
      <th>번호</th>
      <th>상품명</th>
      <th>수량</th>
      <th>가격</th>
    </tr>
    <tr>
      <td>1</td>
      <td>콜라</td>
      <td>1개</td>
      <td>1,500원</td>
    </tr>
    <tr>
      <td>2</td>
      <td>사이다</td>
      <td>2개</td>
      <td>1,000원</td>
    </tr>
    <tr>
      <td>3</td>
      <td>탄산수</td>
      <td>3개</td>
      <td>1,000원</td>
    </tr>
   </table>
</body>
</html>

📌 이번 코드에서 새로 배운 태그만 정리

✅ 1. <table> — 표를 만드는 태그

<table> ... </table>

✔ 역할

하나의 표(table)를 만든다.
내부에 <tr>, <th>, <td>를 포함하여 구조를 구성한다.

✅ 2. <tr> — 표의 한 줄(행)

<tr>
  <td>1</td>
  <td>콜라</td>
  ...
</tr>

✔ 역할

table row → 표의 가로줄을 의미한다.
한 개의 <tr> 안에 여러 개의 <th> 또는 <td>가 들어간다.

✅ 3. <th> — 표의 제목 셀(헤더 셀)

<th>번호</th>
<th>상품명</th>

✔ 특징

table header → 표의 제목(헤더) 역할
기본적으로 글자가 굵게(bold)
기본적으로 가운데 정렬(center)
제목을 표시할 때 사용

⚡ <td>는 이미 오래전에 배운 기본 태그이므로 제외!

추가 — 스타일 속성(선택)

CSS에서는 새로운 속성 하나가 등장했어.

✅ 4. border-collapse: collapse; — 테이블 선을 하나로 합침

table {
  border-collapse: collapse;
}

✔ 기능

테이블 셀(td, th) 사이의 이중선(double border)을 하나의 선으로 합치는 역할
테이블이 훨씬 깔끔하게 보임

✨ 요약 표

태그/속성 역할

<table>	표 전체 생성
<tr>	표의 행 생성
<th>	제목 셀(헤더)
border-collapse: collapse	테이블 선을 하나로 합쳐 깔끔하게 표시

국내에서 자주 사용하는 **모던 브라우저**
브라우저	제조업체	다운로드
크롬(Chrome)	Google	https://www.google.com/chrome/
파이어폭스(Firefox)	Mozilla	https://www.mozilla.org/ko/firefox/
엣지(Edge)	Microsoft	https://www.microsoft.com/ko-kr/windows/microsoft-edge

     <table border="1">
      <caption>국내에서 자주 사용하는 <b>모던 브라우저</b></caption>
      <tr>
        <th>브라우저</th>
        <th>제조업체</th>
        <th>다운로드</th>
      </tr>
      <tr>
        <th>크롬(Chrome)</th>
        <td>Google</td>
        <td>https://www.google.com/chrome/</td>
      </tr>
      <tr>
        <th>파이어폭스(Firefox)</th>
        <td>Mozilla</td>
        <td>https://www.mozilla.org/ko/firefox/</td>
      </tr>
      <tr>
        <th>엣지(Edge)</th>
        <td>Microsoft</td>
        <td>https://www.microsoft.com/ko-kr/windows/microsoft-edge</td>
      </tr>
     </table>

즉, <table>, <tr>, <td>, <th> 같은 기본 태그는 제외하고, 새로 등장한 태그만 설명!

✅ 이번 코드에서 새롭게 등장한 태그

✔ 1) <caption>

테이블의 제목(표 제목)을 표시하는 태그

역할

테이블 위쪽에 ‘표의 제목’을 표시해준다.
표를 설명하는 문장을 넣을 때 사용한다.
기본적으로 <table> 바로 안쪽 첫 줄에 위치해야 한다.

예시(이번 코드)

<caption>국내에서 자주 사용하는 <b>모던 브라우저</b></caption>

특징

테이블의 제목이기 때문에 표와 자연스럽게 연결된 제목처럼 보임
CSS로 caption-side: bottom; 같이 위치도 변경 가능(기본은 top)

✔ 2) <b>

글자를 굵게(볼드) 표시하는 태그

역할

텍스트를 단순히 시각적으로 굵게(bold) 보여줌
의미를 강조하는 태그는 아님(시각 효과만 있음)

예시

<b>모던 브라우저</b>

특징

의미 강조는 <strong>이 더 적절하지만
단순히 ‘굵게 보기’만 원할 때는 <b> 사용

📌 요약 (이번 코드에서 새롭게 등장한 태그)

태그 의미 설명

<caption>	표 제목	테이블의 제목을 만드는 태그
<b>	굵은 글씨	텍스트를 굵게 표시 (시각효과만 있음)

border="1" 도 새로 배운 내용으로 포함해서 설명

✅ border="1" 설명

✔ 이것은 HTML 태그가 아니라 'HTML 속성(attribute)'이기 때문

앞에서 너가 "새로운 태그만 설명해줘" 라고 했기 때문에
나는 <caption>, <b> 같은 태그(tag) 만 골라서 설명했어.

border는 태그가 아니라 속성(attribute) 이라서 일부러 설명에서 제외한 거야.

✅ 그럼 border="1"은 무엇인가?

✔ 1) <table> 태그의 HTML 속성(attribute)

<table border="1">

✔ 2) 테이블 외곽선(선) 두께를 지정함

border="1" → 얇은 선(1px 정도)
border="0" → 테이블 선 없음
HTML4 시절 방식이며, 최근에는 CSS 사용을 권장함

✅ 요즘 방식(CSS)

HTML 속성 대신 CSS를 이렇게 사용해:

<table style="border: 1px solid #000;">

또는 CSS에 따로 정의:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

'대우개발원 수업 내용 > 웹표준기술(HTML)' 카테고리의 다른 글

웹표준기술 4일 (1)	2025.12.03
웹표준기술 2일차 (0)	2025.12.01
웹표준기술 1일차 (0)	2025.12.01

mycommit

태그

최근글

댓글

공지사항

아카이브

날짜 지정하기

시간 지정하기

범위 제한하기

📌 HTML 날짜·시간 입력 + 범위 제한 태그 정리

✅ 1. 날짜 지정하기 (Date Inputs)

① <input type="date"> — 날짜 선택

② <input type="month"> — 월 단위 선택

③ <input type="week"> — 주(week) 선택

✅ 2. 시간 지정하기 (Time Inputs)

① <input type="time"> — 시간 선택

② <input type="datetime-local"> — 날짜 + 시간 선택

✅ 3. 범위 제한하기 (min / max)

📌 날짜 범위 제한 예시

📌 시간 범위 제한 예시

✨ 총정리 표

📌 HTML 폼 버튼 태그 (새로 배운 것만)

1️⃣ <input type="submit"> — 폼 전송 버튼

2️⃣ <input type="reset"> — 입력 내용 초기화 버튼

✨ 총정리

📌 HTML 폼 태그 — 새로 배운 입력 타입 정리

1️⃣ <input type="hidden"> — 화면에 보이지 않는 숨겨진 데이터

✔ 사용 목적

✔ 특징

2️⃣ <input type="image"> — 이미지를 버튼처럼 사용하는 타입

✔ 특징

✔ 추가 설명

✨ 총정리

📌 HTML 폼 그룹 & 여러 줄 입력 태그 정리

✅ 1. <fieldset> — 관련 입력을 하나의 그룹으로 묶기

✔ 특징

✅ 2. <legend> — fieldset의 제목

✔ 특징

✅ 3. <textarea> — 여러 줄 텍스트 입력 영역

✔ 특징

✨ 총정리

📌 HTML <label> 태그 두 가지 사용 방식 비교

✅ ① 방식 1 — label과 input을 따로 작성 (for + id 사용)

✔ 동작 방식

✔ 장점

✔ 단점

✅ ② 방식 2 — input을 label 내부에 포함시키기

✔ 동작 방식

✔ 장점

✔ 단점

🔎 두 방식의 공통점

📝 언제 어떤 방식을 쓰면 좋을까?

회원 가입

📌 HTML 회원가입 폼 — 새로 배운 태그 정리

✅ 1. <input type="email"> — 이메일 입력

✔ 특징

✔ 사용 예

✅ 2. <input type="tel"> — 전화번호 입력

✔ 특징

✅ 3. <input type="url"> — 웹사이트 주소 입력

✔ 특징

✅ 4. <fieldset> — 입력 영역 그룹화

✔ 역할

✅ 5. <legend> — fieldset의 제목

✔ 특징

✨ 전체 폼 구조에서 배울 수 있는 것

📌 전체적으로 배운 핵심 포인트

📌 HTML 선택 목록(select) — multiple + selected 속성 정리

✅ 1. <select multiple> — 여러 항목을 선택할 수 있는 목록

✔ 역할

✔ 주의점

✅ 2. <option selected> — 기본으로 선택된 항목

✔ 역할

✔ 특징

🔎 전체 옵션 코드

✅ 3. <input type="submit"> — 선택된 옵션 서버로 전송

✔ 역할

✨ 요약 정리

📌 HTML <optgroup> — 옵션을 그룹으로 묶기

✅ 1. <select> — 선택 목록의 전체 구조