웹표준기술 2일차

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

이미지 파일은 만들때 있던 파일이라 여기서는 깨져보인다.

<!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>
  <div><a href="https://sso.induk.ac.kr/svc/tk/Auth.eps?ac=Y&ifa=N&id=PORTAL&">인덕대학교</a></div>
  <img src="images/img1.jpg" alt="멋진해변">
  <img src="images/img1.jpg" alt="멋진해변" width="320" height="240">
  <img src="images/img1.jpg" alt="멋진해변" width="10%"> 
  <!-- 브라우져 사이즈의 비율이다(원본사진 크기가 기준이 아님) -->

  <div><a href="https://www.naver.com/" target="_black">
      <img src="../../img2.jpg" alt="이미지2번"></a></div>
      <!-- 외부 폴더에 있는건 ../를 이용하는거지만 라이브서버가 아닌 디버그 실행을 해야 뜬다  -->
</body>
</html>

이번 코드에서 **앞에서 이미 설명한 태그들(h1, p, ul, ol, meta, title, blockquote 등)**은 제외하고,
여기서 새롭게 나온 태그/속성만 정확하게 정리해줄게.

📘 이번 코드에서 새로운 태그 & 속성 설명

✅ 1. <a> ― 하이퍼링크(Anchor 태그)

웹페이지에서 다른 페이지나 사이트로 이동할 때 사용하는 태그.

✔ 주요 속성

href="주소"
이동할 링크(웹사이트, 파일 등)를 지정.
target="_blank"
링크를 새 탭에서 열도록 지정하는 속성
(코드에 _black이라고 되어 있는데 오타! → _blank가 맞음)

예:

✅ 2. <img> ― 이미지 삽입 태그

웹 페이지에 이미지를 표시하는 태그로, 닫는 태그 없이 단독으로 사용한다.

✔ 주요 속성

src="경로" : 이미지 파일의 위치
alt="설명" : 이미지가 안 뜰 때 표시되는 대체 텍스트
width / height : 이미지 크기 조절
- 숫자(px)
- 비율(%) → 브라우저 창 너비 기준

예:

<img src="images/img1.jpg" alt="멋진해변">
<img src="images/img1.jpg" alt="멋진해변" width="320" height="240">
<img src="images/img1.jpg" alt="멋진해변" width="10%">

✔ 추가 설명

width="10%"
→ 원본 크기가 기준이 아니라 브라우저 화면 기준 비율로 표시

✅ 3. 상대경로(../) ― 폴더 이동 개념

이미지 경로에 "../../img2.jpg"처럼 사용된 부분이 중요!

✔ ../ 의미

한 폴더 상위 디렉터리로 이동
../../ 는 두 단계 상위 폴더로 이동

예:

현재 폴더 → 상위 폴더 → 그 상위 폴더 → img2.jpg

✔ Live Server(라이브 서버) 사용 시 주의점

Live Server는 웹 서버처럼 경로를 처리하기 때문에
../가 의도대로 동작하지 않을 때가 있음.
이미지가 안 뜨면 Live Server가 아닌 "디버그 실행"으로 해야 잘 나타난다는 의미.

📌 전체 요약

태그/속성 설명

<a>	링크를 만드는 태그
href	이동할 주소
target="_blank"	새 창/새 탭에서 열기
<img>	이미지를 표시하는 태그
src	이미지 파일 위치
alt	이미지 대체 텍스트
width, height	이미지 크기 설정(픽셀 또는 %)
../	상위 폴더로 이동하는 경로 표현

링크 만들기

포털 사이트

포털 사이트

네이버
다음
신문 사이트

예제 2-17 네이버로이동
웹문서
웹문서2
pdf열기

이건PDF 파일입니다.

여기서부터는 위험하니까 절대로 지나가지 마세요.

<!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>
  <h3>링크 만들기</h3>
<hr>
<li>포털 사이트</li>
<p>포털 사이트</p>
<ul>
  <li><a href="https://www.naver.com/">네이버</a></li>
  <li><a href="https://www.daum.net/">다음</a></li>
</ul>
<li>신문 사이트</li>
<ul>
  <li><img src="../images/img3.jpg" alt="이미지3" width="10%"><a href="https://www.naver.com/"></a></li>
  <li><img src="../images/img4.jpg" alt="이미지4" width="10%"></li>
  <!-- 외부 폴더에 있는건 ../를 이용하는거지만 라이브서버가 아닌 디버그 실행을 해야 뜬다  -->
   <!-- 하지만 Front내부 서버에 있는 이미지 파일은 라이브 실행을 해도 뜬다 -->
    <li><div><a href="https://www.naver.com/" target="_black">
      <img src="../../img2.jpg" alt="이미지2번" width="10%"></a></div>
      <!-- 외부 폴더에 있는건 ../를 이용하는거지만 라이브서버가 아닌 디버그 실행을 해야 뜬다  --></li>
</ul>
<hr>
<a href="https://www.naver.com/" target="_blank">예제 2-17 네이버로이동</a>
<br>
<a href="/1st/web.html">웹문서</a>
<br>
<a href="/2st/etc.html">웹문서2</a>
<br>
<a href="웹표준기술_Part1.pdf">pdf열기</a>
<p>이건<a href="웹표준기술_Part1.pdf"><strong>PDF 파일</strong></a>입니다.</p>
<p>여기서부터는 위험하니까 <em>절대로</em> 지나가지 마세요.</p>
</body>
</html>

아래는 앞에서 이미 설명한 태그는 제외하고,
이번 코드에서 새롭게 배울 수 있는 내용만 정확하게 정리해서 설명한 버전입니다.

📘 이번 코드에서 새롭게 등장한 태그 & 속성 정리

✅ 1. <li> ― 목록 항목(List Item)

<ul>(순서 없는 목록)이나 <ol>(순서 있는 목록) 안에서 쓰는 목록 요소
단독으로 쓰면 문법적으로는 맞지 않지만 브라우저는 표시해 줌
→ 그래도 실제 프로젝트에서는 <ul>·<ol> 내부에서만 사용하는 것이 정석

예:

<li>포털 사이트</li>

✅ 2. <a href="/경로"> ― 사이트 내부 링크

앞에서는 외부 링크만 있었다면, 이번 코드는 사이트 내부 파일로 이동하는 링크가 나옴.

✔ 절대 경로 형식 ( / 로 시작 )

/폴더명/파일명
웹 프로젝트의 root(루트) 기준으로 탐색

예:

<a href="/1st/web.html">웹문서</a>

→ 사이트의 최상위(root) 기준으로 1st/web.html 파일을 찾아 이동

✅ 3. PDF 파일 링크

HTML <a>로 PDF 파일을 직접 열 수 있다

<a href="웹표준기술_Part1.pdf">pdf열기</a>

브라우저는 PDF 파일을 자동으로 열거나 다운로드함.

✅ 4. <strong> ― 강조(Strong Emphasis)

의미적으로 아주 중요한 요소를 나타낼 때 사용
기본 스타일은 굵은 글씨(볼드)

<strong>PDF 파일</strong>

✅ 5. <em> ― 기울임 강조(Emphasis)

중요한 표현이나 의미적 강조
기본 스타일은 기울임체

예:

여기서부터는 위험하니까 <em>절대로</em> 지나가지 마세요.

✅ 6. 이미지 + 링크 결합

이미지를 클릭했을 때 링크로 이동시키는 구조.

→ 이미지 자체가 버튼 역할을 하게 됨.

✅ 7. 내부 이미지 경로 설명 (상대경로)

이미지를 불러올 때 아래처럼 경로를 이동할 수 있다.

✔ ../ → 상위 폴더로 이동

✔ ../../ → 상위 폴더 두 단계 이동

예:

<img src="../images/img3.jpg">
<img src="../../img2.jpg">

✔ Live Server 사용 시 주의

Live Server는 상위 경로(../) 참조가 제한될 때가 있음
디버그 실행(run without debugging) 또는 실제 서버에서 테스트해야 정상적으로 뜸

코드 주석에서도 설명 중:

외부 폴더에 있는건 ../를 이용하지만 라이브서버에서는 잘 안 뜬다

📘 전체 코드 요약 설명

<li>로 카테고리 제목 표시
<ul> 안에 포털 사이트 리스트(네이버, 다음)
이미지 + 링크 조합
상대경로(../, ../../) 개념 등장
절대경로(/폴더/파일) 링크
PDF 링크 열기
<strong>, <em>을 통한 텍스트 강조

📌 전체 새로운 요소 표 정리

요소 설명

<li>	목록 항목
<a href="/파일">	사이트 내부 절대경로 링크
PDF 링크	PDF 파일을 브라우저에서 바로 열기
<strong>	의미적 강조(굵게)
<em>	기울임 강조
이미지+링크	이미지 클릭 시 링크 이동
../, ../../	상대경로: 상위 폴더 이동

수습 국원 모집

방송에 관심 있는 새내기 여러분 환영합니다

교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부나 전공에 상관없습니다.
평소 방송에 관심있었던 여러 학우들의 지원바랍니다.

모집 기간 : 3월 2일 ~ 3월 11일
모집 분야 : 아나운서, PD, 엔지니어
지원 방법 : 양식 작성 후 이메일 접수
지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.

혜택

수습기자 활동 중 소정의 활동비 지급
정기자로 진급하면 장학금 지급

<!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>
  <h2>방송에 관심 있는 새내기 여러분 환영합니다</h2>
  
  <p>교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부나 전공에 상관없습니다.
  <br>평소 방송에 관심있었던 여러 학우들의 지원바랍니다.</p>
  <ul>
    <li><strong>모집 기간</strong> : 3월 2일 ~ 3월 11일</li>
    <li><b>모집 분야</b> : 아나운서, PD, 엔지니어</li>
    <li><strong>지원 방법</strong> : 양식 작성 후 이메일 접수<br>
    <em>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</em></li>
  </ul>
  <h3>혜택</h3>
    <ol type="a">
      <li>수습기자 활동 중 소정의 활동비 지급</li>
      <li>정기자로 진급하면 장학금 지급</li>
    </ol>
    <a><img src="/images/img1.jpg" alt="이미지1" width="10%"></a>
</body>
</html>

아래는 앞에서 이미 설명한 태그는 제외하고,
이번 코드에서 새롭게 등장한 부분만 정확하고 깔끔하게 정리한 설명입니다.

📘 이번 코드에서 새롭게 설명할 요소

✅ 1. <h2>, <h3> ― 제목 계층 구조

앞에서 <h1>은 설명했지만, 이번 코드에서는 **다른 레벨의 제목(h2, h3)**이 등장함.

✔ 의미

HTML 제목은 계층 구조를 가지며 문서 구조를 나타냄
<h1>이 가장 상위 제목
<h2>는 h1의 하위 내용
<h3>는 h2의 하위 내용

예:

<h1>수습 국원 모집</h1>
<h2>방송에 관심 있는 새내기 여러분 환영합니다</h2>
<h3>혜택</h3>

✅ 2. <b> ― 단순 굵은 글씨

이전 예제에서는 <strong>만 나왔고
이번에는 <b> 태그가 포함됨.

✔ strong vs b 차이

태그 의미 용도

<strong>	“중요하다”는 의미 강조	의미적 강조(O)
<b>	단순히 굵게	의미적 강조(X), 시각적 강조만

예:

<b>모집 분야</b>

✅ 3. <em> ― 기울임 강조

(처음 아님, 하지만 이번 코드 맥락에서 따로 설명)

여기서는 주의 문장이나 부가 설명을 강조할 때 쓰임.

<em>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</em>

✅ 4. <ol type="a"> ― 알파벳 목록 (Ordered List)

앞에서는 숫자 목록이 있었는데
이번에는 알파벳(a, b, c…)으로 표시하는 목록이 등장함.

✔ type 속성 종류

1 : 숫자 1, 2, 3… (기본값)
a : 소문자 알파벳(a, b, c…)
A : 대문자 알파벳(A, B, C…)
i : 소문자 로마 숫자(i, ii, iii…)
I : 대문자 로마 숫자

예:

<ol type="a">
  <li>수습기자 활동 중 소정의 활동비 지급</li>
  <li>정기자로 진급하면 장학금 지급</li>
</ol>

✅ 5. <a> 태그가 href 없이 이미지 감싸기

이 코드는 <a> 태그의 href 속성이 비어 있음.
즉, 링크 기능은 없는 상태에서 단순히 이미지만 감싼 구조다.

<a>
  <img src="/images/img1.jpg" alt="이미지1" width="10%">
</a>

✔ 원래 의도

원래는 이미지를 클릭하면 링크 이동하도록 사용하는 구조:

<a href="어떤링크">
  <img src="이미지.jpg">
</a>

하지만 여기서는 href가 없으므로 클릭해도 아무 일도 일어나지 않음.
수업 실습 중 흔히 발생하는 상황이라 언급할 가치가 있음.

📌 전체 새로운 요소 표 정리

요소 설명

<h2>, <h3>	제목 계층 (h1의 하위 제목들)
<b>	단순 굵은 글씨(의미 없음 / strong과 다름)
<ol type="a">	알파벳 순서 목록(a, b, c…)
<a> (href 없음)	이미지 감싸지만 링크 기능 없음
<em>	기울임 텍스트 강조 (주의·부가설명 표현)

<!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="">
    <label>아이디: <input type="text" id="user_id" size="5"></label>
    <!-- 사이즈는 입력하는 박스의 크기 -->
    <label>비밀번호: <input type="password" id="user_pw" size="10"></label>
    <label><input type="submit" value="로그인"></label><br>
    <label>검색: <input type="search" id="search_ex" size="10"></label>
    <!-- search 태그를 사용하면 x표시가 생김 -->

    <fieldset>
      <legend>상품 선택</legend>
      <p><b>주문할 상품을 선택해 주세요.</b></p>
        <label><input type="checkbox" value="s_3"checked>선물용 3kg</label>
        <label><input type="checkbox" value="s_5">선물용 5kg</label>
        <label><input type="checkbox" value="f_3">가정용 3kg</label>
        <label><input type="checkbox" value="f_5">가정용 5kg</label>
        <p><b>포장 선택</b></p>
        <label><input type="radio" name="gift" value="yes">선물 포장</label>
        <label><input type="radio" name="gift" value="no">선물 포장 안 함</label>
      </ul>
     </fieldset>
     
     <fieldset>
      <legend>배송정보</legend>
      <ul>
        <li>
          <label for="user-name">이름</label>
          <input type="text" id="user-name">
        </li>
        <li>
          <label for="addr">배송주소</label>
          <input type="text" id="addr">
        </li>
        <li>
          <label for="mail">이메일</label>
          <input type="email" id="mail">
        </li>
        <li>
          <label for="phone">연락처</label>
          <input type="tel" id="phone">
        </li>
        <li>
          <input type="url" id="url">
        </li>
      </ul>
      <input type="submit" value="전송">
     </fieldset>
  </form>
</body>
</html>

아래는 앞에서 이미 설명한 태그들은 제외하고,
이번 코드에서 새롭게 등장한 태그와 속성을 완전히 정리한 설명이다.
(폼 태그라서 새 개념이 많음 → 이해하기 쉽게 구조별로 설명해줄게!)

📘 이번 코드에서 새롭게 등장한 태그 & 속성 정리

✅ 1. <form> ― 사용자 입력을 서버로 전송하는 태그

<form action="" method="">

✔ 속성

action=""
입력한 데이터를 보낼 서버 주소
(지금은 빈 값 = 현재 페이지로 보냄)
method=""
데이터를 보내는 방식
- GET : 주소(URL)에 붙여서 전송
- POST : 주소에 보이지 않게 전송

지금은 값이 비어 있으므로 둘 다 기본값 사용.

✅ 2. <input> ― 사용자 입력을 받는 태그

입력 창을 만드는 태그. type 속성에 따라 기능이 달라짐.

이번 코드에는 다양한 type이 등장함.

📌 입력 유형(type)별 정리

✔ 1) type="text" ― 일반 텍스트 입력

예: 아이디, 이름, 주소 등

<input type="text" id="user_id" size="5">

size : 입력창의 가로 크기(글자 수 기준)

✔ 2) type="password" ― 비밀번호 입력

<input type="password" id="user_pw">

입력한 글자가 ●●●● 로 가려짐.

✔ 3) type="submit" ― 전송 버튼

<input type="submit" value="로그인">

value는 버튼에 표시되는 글자

✔ 4) type="search" ― 검색 입력

<input type="search">

브라우저에서 검색용 입력 UI 제공 (X 버튼 자동 생성)

✔ 5) type="checkbox" ― 체크박스 (복수 선택 가능)

<input type="checkbox" value="s_3" checked>

✔ 특징

여러 개를 체크할 수 있다.
checked 속성: 기본으로 선택된 상태

✔ 6) type="radio" ― 라디오 버튼 (단일 선택)

<input type="radio" name="gift" value="yes">

✔ 특징

name이 같은 radio끼리만 단일 선택 그룹을 이룬다
name="gift" → 이 두 개는 그룹

✔ 7) type="email" ― 이메일 입력

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

✔ 특징

자동 이메일 형식 검사
(예: @ 없으면 오류 표시)

✔ 8) type="tel" ― 전화번호 입력

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

문자 입력도 가능하지만
모바일에서는 전화번호 키패드가 뜸

✔ 9) type="url" ― URL(웹 주소) 입력

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

http:// 또는 https:// 형태를 입력하지 않으면 경고 발생

📘 새로운 구조 태그

✅ 3. <fieldset> ― 폼 내용 그룹화

폼 안에서 여러 입력 영역을 묶는 용도.

<fieldset>
  ...
</fieldset>

✅ 4. <legend> ― fieldset 제목

fieldset 상단에 제목이 표시됨.

<legend>상품 선택</legend>

✅ 5. <label> ― 입력창 설명 및 연결

<label for="user-name">이름</label>
<input type="text" id="user-name">

✔ label의 역할

클릭하면 해당 입력창이 자동으로 활성화
접근성 향상 (시각장애인용 리더에서도 사용됨)

✔ 연결 조건

<label for="id값">
<input id="id값">

📌 전체 새로운 요소 요약표

요소 설명

<form>	사용자 입력을 서버로 보내는 폼 영역
action	데이터를 보낼 서버 주소
method	GET/POST 전송 방식
<fieldset>	입력 영역 묶기
<legend>	fieldset 제목
<label>	입력창 설명 및 연결
type="text"	일반 입력
type="password"	비밀번호 입력
type="search"	검색 입력(X버튼 생성)
type="submit"	전송 버튼
type="checkbox"	체크박스(여러 개 선택 가능)
type="radio"	라디오 버튼(한 개만 선택)
type="email"	이메일 형식 검사
type="tel"	전화번호 입력
type="url"	URL 형식 검사

회원 가입을 환영합니다

사용자 정보

아이디:
이메일
비밀번호:
비밀번호 확인:

이벤트와 새로운 소식 메일 수신 메일 수신 안 함

<!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>
  <fieldset>
    <legend>사용자 정보</legend>
    <ul>
      <li>
        <label>아이디: <input type="text" id="user_id" size="10"></label>
      </li>
      <li>
        <label for="mail">이메일</label>
        <input type="email" id="mail">
      </li>
      <li>
        <label>비밀번호: <input type="password" id="user_pw" size="10"></label>
      </li>
      <li>
        <label>비밀번호 확인: <input type="password" id="user_pw_check" size="10"></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">메일 수신 안 함</label>
  </fieldset>
</body>
</html>

아래는 앞에서 이미 설명한 태그는 제외하고,
이번 코드에서 새롭게 등장하거나 중요한 요소만 정리해서 설명한 버전이야.
(폼 구조는 앞에서 이미 다뤘으니 새로 추가된 부분 위주로 설명해줄게!)

📘 이번 코드에서 새롭게 설명할 요소

✅ 1. <h1> 내부 문구: 회원 가입을 환영합니다

태그 자체는 기존에 배운 것이지만,
이번 예제의 핵심은 폼을 페이지 구조에 맞게 배치하는 방법을 보여준다는 점.

즉, <h1> 아래에 여러 개의 <fieldset>을 둬서
여러 입력 그룹을 구분하는 전형적인 회원가입 구조를 만든 예제다.

📘 입력 요소에서 새로 체크해야 할 포인트

✅ 2. 동일 ID 사용 문제 (중요 포인트)

코드에서 문제가 되는 부분:

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

✔ ID는 HTML 문서에서 “고유해야 한다”

→ 같은 문서 내에서 중복된 id는 절대 사용하면 안 됨

예:

id="user_pw" 두 번 사용됨 → 잘못된 코드

✔ 올바른 예

<input type="password" id="user_pw">
<input type="password" id="user_pw_check">

입력값 비교할 때도 구분이 안 되기 때문에
현업에서는 반드시 구분해 사용한다.

📘 이번 코드의 핵심 요소(새롭게 등장)

✅ 3. 그룹 나누기 구조(회원가입 양식의 표준 패턴)

이 예제는 HTML 폼 작성에서 많이 사용하는 2단 구분 구조를 보여줌:

✔ (1) 사용자 정보 입력 구역

아이디
이메일
비밀번호
비밀번호 확인

✔ (2) 이메일 수신 동의 구역

라디오 버튼(name 속성으로 단일 선택)

이 구조는 실제 회원가입, 쇼핑몰, 기업 사이트 등에서 가장 많이 쓰는 레이아웃.

📘 type 속성에서 중요하게 다뤄야 할 부분

✅ 4. type="email"의 자동 검증 기능

입력값이 이메일 형식이 아니면 자동으로 오류 표시:

aaa@bbb → OK
aaa → 오류
aaa@ → 오류
aaa@bbb. → 오류

이메일 입력 검증이 되는 이유는 HTML5에서 기본 제공하는 기능.

📘 라디오 버튼 관련 설명 (중복 설명X, 중요 포인트만)

✅ 5. name="s_mail"로 그룹화된 radio 버튼

둘 다 같은 name을 가지므로 메일 수신 여부는 하나만 선택 가능.

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

name이 다르면 2개 모두 선택되는 문제가 생김.

📌 전체 새로운 요소 정리표

요소 설명

비밀번호 확인 input	ID 중복 문제 발생 → 고유 ID 필수
type="email"	자동 이메일 형식 검증 기능
fieldset 분리 구조	회원가입 양식의 기본 패턴 구성
radio 그룹(name)	단일 선택 형태 만들기 위한 핵심 속성

신청 과목

이달에 신청할 과목을 선택하세요(1과목만 가능)

회화 문법 작문

메일링

메일로 받고 싶은 뉴스 주제를 선택해 주세요 (복수 서택 가능)

해외 단신 5분 회화 모닝팝스

<!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>
  <fieldset>
    <legend><b>신청 과목</b></legend>
    <p>이달에 신청할 과목을 선택하세요(1과목만 가능)</p>
    <label><input type="radio" name="subj" value="subj1">회화</label>
    <label><input type="radio" name="subj" value="subj2">문법</label>
    <label><input type="radio" name="subj" value="subj3">작문</label>
  </fieldset>
  <fieldset>
    <legend><b>메일링</b></legend>
    <p>메일로 받고 싶은 뉴스 주제를 선택해 주세요 (복수 서택 가능)</p>
  <label><input type="checkbox" name="mailing1" value="news">해외 단신</label>
  <label><input type="checkbox" name="mailing2" value="dialog">5분 회화</label>
  <label><input type="checkbox" name="mailing3" value="pops">모닝팝스</label>
  </fieldset>
</body>
</html>

겹치는 설명 없이 이번 정답 코드에 맞춘 설명만 깔끔하게 정리한 버전입니다.

코드에 사용된 요소 중 새롭게 강조할 부분만 설명해, 깔끔하고 읽기 편하도록 구성했어.

📘 HTML 폼 예제: 신청 과목 & 메일링 선택하기

이번 코드는 사용자가 신청할 과목을 선택하고,
받고 싶은 메일링 주제를 체크하는 간단한 폼 구성 예제입니다.

라디오 버튼(radio)과 체크박스(checkbox)의 차이,
그리고 name/value 속성의 역할을 자연스럽게 이해할 수 있는 구조로 되어 있습니다.

✅ 1. 신청 과목 (라디오 버튼 — 단일 선택)

<fieldset>
  <legend><b>신청 과목</b></legend>
  <p>이달에 신청할 과목을 선택하세요(1과목만 가능)</p>

  <label><input type="radio" name="subj" value="subj1">회화</label>
  <label><input type="radio" name="subj" value="subj2">문법</label>
  <label><input type="radio" name="subj" value="subj3">작문</label>
</fieldset>

⭐ 핵심 설명

✔ ① type="radio"

라디오 버튼은 하나만 선택할 수 있는 입력 방식이다.

✔ ② name="subj"

세 개의 라디오 버튼은 모두 같은 name을 사용한다.
→ 같은 name 그룹에서는 오직 1개만 선택 가능

즉, 회화·문법·작문 중 한 과목만 선택하도록 만든 구조.

✔ ③ value 속성

각 버튼의 실제 전달 값.

회화 선택 → subj=subj1
문법 선택 → subj=subj2
작문 선택 → subj=subj3

✅ 2. 메일링 선택 (체크박스 — 복수 선택 가능)

<fieldset>
  <legend><b>메일링</b></legend>
  <p>메일로 받고 싶은 뉴스 주제를 선택해 주세요 (복수 서택 가능)</p>

  <label><input type="checkbox" name="mailing1" value="news">해외 단신</label>
  <label><input type="checkbox" name="mailing2" value="dialog">5분 회화</label>
  <label><input type="checkbox" name="mailing3" value="pops">모닝팝스</label>
</fieldset>

⭐ 핵심 설명

✔ ① type="checkbox"

여러 개를 동시에 선택할 수 있는 입력 방식
메일링처럼 다양한 주제를 선택할 때 유용

✔ ② name 속성이 서로 다름

코드에서는 name을 mailing1, mailing2, mailing3처럼 각각 다르게 사용했다.

이 구조는 다음과 같은 특징을 가짐:

각각의 체크박스가 독립적인 항목
선택 여부와 상관없이, 체크된 항목만 서버로 전달됨

예:

해외 단신 + 모닝팝스 선택 →
mailing1=news, mailing3=pops

✔ ③ value 속성

서버에 전달되는 실제 데이터 값.

해외 단신 → news
5분 회화 → dialog
모닝팝스 → pops

📌 전체 코드가 보여주는 핵심

기능 의미

fieldset / legend	큰 입력 그룹 나누기
radio + 동일 name	하나만 선택 가능한 구조
checkbox	여러 개 선택 가능한 구조
value	서버에 전달되는 실제 값
label + input	클릭 영역 확장 → UX 향상

등록 정보

참여인원(최대10명)
지원물품(1인당 5개)
희망 단계(하, 중, 상)

     <fieldset>
      <legend> 등록 정보 </legend>
      <ul>
        <li>
          <label for="member">참여인원<small>(최대10명)</small></label>
          <input type="number" id="member" value="1" min="0" max="10">
        </li>
        <li>
          <label for="stuffs">지원물품<small>(1인당 5개)</small></label>
          <input type="number" id="stuffs" value="1" min="0" max="50">
        </li>
        <li>
          <label for="satis">희망 단계<small>(하, 중, 상)</small></label>
          <input type="range" id="satis" value="1" min="1" max="3">
        </li>
      </ul>
     </fieldset>

아래는 겹치는 설명 없이,
이번 코드에 새로 등장한 입력 타입(type="number", type="range")과 속성들만 정리한 설명이다.

📘 HTML 입력 폼 예제: 숫자 입력 & 범위 선택

이번 예제는 <input> 태그의 **숫자 입력(number)**과 범위 선택(range) 기능을 활용해
참여 인원, 지원 물품 수량, 희망 단계 등을 입력받는 구조로 구성되어 있습니다.

특히 min, max, value 같은 속성으로
입력값을 제한하는 방법을 자연스럽게 배울 수 있는 좋은 예제입니다.

✅ 1. 참여 인원 / 지원 물품 입력 (type="number")

<label for="member">참여인원<small>(최대10명)</small></label>
<input type="number" id="member" value="1" min="0" max="10">

⭐ 핵심 설명

✔ type="number"

숫자만 입력할 수 있게 제한하는 입력 방식
키보드 입력 외에도 ▲▼ 버튼으로 숫자를 증감시킬 수 있음
모바일에서는 숫자 전용 키패드가 뜸

✔ value="1"

페이지 로드 시 기본값(초기값)을 1로 설정

✔ min="0" / max="10"

입력 가능한 숫자의 최소/최대 범위를 지정
예: 0 미만 또는 10 초과 값은 입력 불가

✅ 2. 지원 물품 수량(type="number"), 최대 50개

<label for="stuffs">지원물품<small>(1인당 5개)</small></label>
<input type="number" id="stuffs" value="1" min="0" max="50">

✔ 설명

동일한 number 타입
max=50 → 최대 50개까지 입력 가능

✅ 3. 희망 단계 선택 (type="range")

<label for="satis">희망 단계<small>(하, 중, 상)</small></label>
<input type="range" id="satis" value="1" min="1" max="3">

⭐ 핵심 설명

✔ type="range"

막대(슬라이더)를 움직여 값을 선택하는 UI
시각적으로 직관적이며 모바일에서도 조작 편리

✔ min="1" / max="3"

선택 범위를 1~3으로 지정
예: 1=하, 2=중, 3=상 처럼 의미를 부여할 때 유용

✔ value="1"

기본 단계 = 1(하)

📌 전체 예제가 보여주는 핵심 포인트

요소 설명

type="number"	숫자만 입력 가능, ▲▼ 버튼 제공
min / max	입력 범위 제한
value	기본값 설정
type="range"	슬라이더로 값 조정하는 입력 방식
small 태그	설명 문구를 작게 표시하는 장식 요소

✨ 요약

이 예제는 HTML 입력 폼에서 숫자형(number)과 범위(range) 타입을
min, max, value 속성과 함께 사용하는 방법을 보여주며,
실제 회원 등록, 예약 시스템, 주문 수량 입력 등 다양한 UI에 활용할 수 있는 구조입니다.

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

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

mycommit

태그

최근글

댓글

공지사항

아카이브

📘 이번 코드에서 새로운 태그 & 속성 설명

✅ 1. <a> ― 하이퍼링크(Anchor 태그)

✔ 주요 속성

✅ 2. <img> ― 이미지 삽입 태그

✔ 주요 속성

✔ 추가 설명

✅ 3. 상대경로(../) ― 폴더 이동 개념

✔ ../ 의미

✔ Live Server(라이브 서버) 사용 시 주의점

📌 전체 요약

링크 만들기

📘 이번 코드에서 새롭게 등장한 태그 & 속성 정리

✅ 1. <li> ― 목록 항목(List Item)

✅ 2. <a href="/경로"> ― 사이트 내부 링크

✔ 절대 경로 형식 ( / 로 시작 )

✅ 3. PDF 파일 링크

✅ 4. <strong> ― 강조(Strong Emphasis)

✅ 5. <em> ― 기울임 강조(Emphasis)

✅ 6. 이미지 + 링크 결합

✅ 7. 내부 이미지 경로 설명 (상대경로)

✔ ../ → 상위 폴더로 이동

✔ ../../ → 상위 폴더 두 단계 이동

✔ Live Server 사용 시 주의

📘 전체 코드 요약 설명

📌 전체 새로운 요소 표 정리

수습 국원 모집

방송에 관심 있는 새내기 여러분 환영합니다

혜택

📘 이번 코드에서 새롭게 설명할 요소

✅ 1. <h2>, <h3> ― 제목 계층 구조

✔ 의미

✅ 2. <b> ― 단순 굵은 글씨

✔ strong vs b 차이

✅ 3. <em> ― 기울임 강조

✅ 4. <ol type="a"> ― 알파벳 목록 (Ordered List)

✔ type 속성 종류

✅ 5. <a> 태그가 href 없이 이미지 감싸기

✔ 원래 의도

📌 전체 새로운 요소 표 정리

📘 이번 코드에서 새롭게 등장한 태그 & 속성 정리

✅ 1. <form> ― 사용자 입력을 서버로 전송하는 태그

✔ 속성

✅ 2. <input> ― 사용자 입력을 받는 태그

📌 입력 유형(type)별 정리

✔ 1) type="text" ― 일반 텍스트 입력

✔ 2) type="password" ― 비밀번호 입력

✔ 3) type="submit" ― 전송 버튼

✔ 4) type="search" ― 검색 입력

✔ 5) type="checkbox" ― 체크박스 (복수 선택 가능)

✔ 특징

✔ 6) type="radio" ― 라디오 버튼 (단일 선택)

✔ 특징

✔ 7) type="email" ― 이메일 입력

✔ 특징

✔ 8) type="tel" ― 전화번호 입력

✔ 9) type="url" ― URL(웹 주소) 입력

📘 새로운 구조 태그

✅ 3. <fieldset> ― 폼 내용 그룹화

✅ 4. <legend> ― fieldset 제목

✅ 5. <label> ― 입력창 설명 및 연결

✔ label의 역할

✔ 연결 조건

📌 전체 새로운 요소 요약표

회원 가입을 환영합니다

📘 이번 코드에서 새롭게 설명할 요소

✅ 1. <h1> 내부 문구: 회원 가입을 환영합니다

📘 입력 요소에서 새로 체크해야 할 포인트

✅ 2. 동일 ID 사용 문제 (중요 포인트)

✔ ID는 HTML 문서에서 “고유해야 한다”

✔ 올바른 예

📘 이번 코드의 핵심 요소(새롭게 등장)

✅ 3. 그룹 나누기 구조(회원가입 양식의 표준 패턴)

✔ (1) 사용자 정보 입력 구역

✔ (2) 이메일 수신 동의 구역