코딩자율학습단 19기 | 4일차 학습일지 – 폼(Form) 기초, 시맨틱 태그, 글로벌 속성 정리

오늘 학습 정보

• 날짜/Day: 26/1/15 (Day4)
• 교재 범위: ~3.10 태그의 종류와 상관없이 사용하는 글로벌 속성 (종이책 p.81~127)

출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처

오늘의 핵심 키워드 3개

• 핵심 키워드 1: 폼(Form) 기본 구조
• 핵심 키워드 2: 시맨틱 태그로 웹 구조 잡기
• 핵심 키워드 3: 글로벌 속성(class/id)

태그/속성 정리

2-1. 폼(Form) 구성하기

form

역할: 입력 요소들을 묶어서 서버로 전송할 “폼”을 만든다.

형식: <form action="서버 url" method="get 또는 post"> ... </form>

자주 같이 쓰는 속성:

• action: 폼 데이터를 어디로(어떤 URL로) 보낼지 지정
• method: 폼 데이터를 어떤 방식으로 보낼지 지정 (예: get, post)

input

역할: 다양한 형태의 입력 필드

형식: <input type="종류" name="이름" value="초깃값">

자주 같이 쓰는 속성:

• type: 입력 형태(텍스트/비밀번호/체크박스 등) 결정 (필수)
• name: 서버로 전송될 때의 항목 이름(키) (선택)
• value: 기본값 또는 서버로 전달되는 값(버튼/체크 상태 등에도 영향) (선택)

input의 type 값

• text / password / tel / number / url / search / email / checkbox / radio / file / button / image / hidden/ date / datetime-local / month / week / time / range / color / submit / reset

input에서 같이 등장한 속성

placeholder

• 입력칸에 “힌트 문구”를 표시(값을 입력하면 힌트는 사라짐)

예시: <태그 placeholder="입력값에 대한 힌트">

maxlength

• 입력 가능한 최대 글자 수를 제한(입력 길이 제한이 필요할 때 사용)

예시: <태그 maxlength="숫자">

checked

• checkbox / radio를 기본 선택 상태로 지정(처음 로딩 시 체크된 상태)

예시: <태그 checked>

readonly

• 입력값을 수정하지 못하게 설정(읽기 전용, 값은 보이지만 변경 불가)

예시: <태그 readonly>

disabled

• 입력을 비활성화(사용 불가 상태)

예시: <태그 disabled>

label

역할: “이 입력칸이 무엇인지” 라벨을 붙여준다(접근성/클릭 편의)

형식: <label for="user-id">아이디</label> <input type="text" id="user-id">

자주 같이 쓰는 속성:

• for: 연결할 입력 요소의 id를 지정(라벨 클릭 시 해당 입력칸 선택)

fieldset / legend

역할: 관련 입력 요소를 그룹으로 묶고(구역 나누기), 그룹 제목을 붙인다.

형식:

<form action="#">
   <fieldset>
      <legend>그룹 이름</legend>
      <!-- 상호 작용 요소 -->
   </fieldset>
</form>

textarea

역할: 여러 줄 텍스트 입력 (초깃값은 필요한 경우에만 입력)

형식: <textarea>초깃값</textarea>

* input태그의 경우 초깃값을 정의하기 위해서 value 속성으로 정의

select / option / optgroup

역할: 드롭다운(선택형 입력)

형식:

<select>
   <optgroup label="그룹 이름">
      <option value="서버에 전송할 값">웹 브라우저에 표시할 값</option>
   </optgroup>
</select>

자주 같이 쓰는 속성:

• selected: 특정 option을 기본 선택으로 지정
• multiple: 한 번에 여러 개 선택 허용
• size: 화면에 보이는 옵션 개수 지정
• label: optgroup에 그룹 이름을 붙임

button

역할: 버튼(클릭 동작용)

형식: <button type="종류">버튼 내용</button>

2-2. 표(Table) 만들기

table / caption

역할: 표 전체 + 표 제목(설명)

형식:

<table>
   <caption>표 제목</caption>
</table>

• 태그 추가 설명
  • table: 표를 생성할 때 사용
  • caption: 표가 무엇에 대한 표인지 “제목/설명”을 붙임

tr / th / td

역할:

• tr: 행(row)
• th: 제목 셀(헤더)
• td: 데이터 셀

형식:

<tr>
   <th>제목 1</th>
   <th>제목 2</th>
</tr>
<tr>
   <td>내용 1</td>
   <td>내용 2</td>
</tr>

[위 코드 실행시 결과]

제목 1 제목 2

내용 1 내용 2

* 실제로 코드를 작동하여 가져온 이미지는 아니며 이론상의 결과값을 만들어 낸 것 입니다.(테두리까지 그리려면 CSS도 사용해야합니다.)

rowspan / colspan (셀 병합)

역할:

• rowspan: 행과 행을 병합(세로 방향)
• colspan: 열과 열을 병합(가로 방향)

형식:

• 세로 병합
• 가로 병합

자주 같이 쓰는 속성:

• rowspan: 세로(행) 방향으로 몇 칸 합칠지
• colspan: 가로(열) 방향으로 몇 칸 합칠지

* 코드를 작성한 위치를 기준으로 가로/세로 n칸을 병합

thead / tbody / tfoot (영역 구분)

역할:

• thead: 헤더 영역에 해당하는 행을 그룹
• tbody: 본문 영역에 해당하는 행을그룹
• tfoot: 푸터 영역에 해당하는 행을 그룹

형식:

<table>
   <thead>
      <th> ... </th>
      <!-- thead 태그로 그룹화 한 행은 th 태그로 열 생성!! -->
   </thead>
   <tfoot>
      <td> ... </td>
   </tfoot>
   <tbody>
      <td> ... </td>
   </tbody>
</table>

col / colgroup (+ span)

역할: 열 단위로 스타일/폭 등을 묶어서 관리

• col: 하나의 열을 그룹화
• colgrop: span 속성과 함께 2개 이상의 열을 그룹화
• 형식 (이해를 돕기 위해 예시로 값 입력)

<table>
   <col style="width:80px">
   <colgroup span="2" style="width:150px"></colgroup>
   <col style="width:100px">
   <tr> ... </tr>
</table>
* 위 예시의 경우 1열은 80px, 2~3열은 150px, 4열은 100px로 설정됨

자주 같이 쓰는 속성:

• span(colgroup): 몇 개의 열을 그룹으로 묶을지 지정

scope (접근성, th에서 사용)

역할: th가 “행 제목인지/열 제목인지” 같은 범위를 명확히 한다.

형식:
<th scope=“col”>열 제목</th>

<th scope=“row”>행 제목</th>

• 자주 같이 쓰는 값
  • col, colgroup: 열(세로 방향)
  • row, rowgroup: 행(가로 방향)

2-3. 멀티미디어 태그

audio / video

역할: 오디오/비디오 삽입

형식:

<audio src=“오디오 파일 경로”controls ></audio>

<video src=“비디오 파일 경로”controls ></video>

자주 같이 쓰는 속성:

• src: 파일 경로
• controls: 재생/일시정지 등 컨트롤 패널 표시

source

역할: 브라우저 지원 포맷이 다를 때, 여러 소스를 준비해 순서대로 제공

• 형식 (이해를 돕기 위해 비디오 파일을 예시로 입력)

<video controls>
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.webm" type="video/webm">
   지원하지 않는 웹 브라우저입니다.
</video>

* 먼저 작성한 source 태그의 파일 부터 확인한 후 지원하지 않는다면 다음 파일을 확인함 모든 source 태그를 확인했는데 전부 지원하지 않는 형식이라면 마지막에 작성한 텍스트가 사용자에게 노출됨

자주 같이 쓰는 속성:

• src: 파일 경로
• type: 미디어 타입(파일 형식 정보)

2-4. 시맨틱 태그

header

• 상단/머리말 영역(페이지 또는 섹션의 시작 부분)
• 보통 들어가는 것: 로고, 사이트 제목, 검색창, 상단 메뉴, 로그인 영역 등

형식: <header> ... </header>

nav

• 주요 내비게이션(메뉴/링크) 영역
• 포인트: 페이지에서 “이동을 위한 링크 묶음”이 핵심이면 nav로 묶어두는 게 좋음

형식: <nav> ... </nav>

section

• 관련 콘텐츠의 구역(주제 단위로 묶이는 영역)
• 포인트: “한 페이지 안에서 주제가 바뀌는 구간”을 나눌 때 사용

형식: <section> ... </section>

article

• 독립적으로 떼어내도 의미가 유지되는 콘텐츠
• 예: 게시글, 뉴스/칼럼, 카드형 글, 로그인 영역 등
• 포인트: 다른 곳에 복사/공유해도 ‘혼자서’ 의미가 살아 있으면 article이 어울림

형식: <article> ... </article>

aside

• 보조 영역(주요 흐름과 직접 관련은 낮지만 같이 붙는 영역)
• 예: 사이드바, 추천 글/관련 링크, 광고, 추가 정보 박스

형식: <aside> ... </aside>

footer

• 하단/바닥글 영역(페이지 또는 섹션의 마무리)
• 보통 들어가는 것: 저작권, 회사/운영자 정보, 연락처, 정책 링크 등

형식: <footer> ... </footer>

main

• 페이지의 핵심 본문 영역(“이 페이지에서 제일 중요한 내용”)
• 포인트: 보통 문서에서 1번만 사용하고, 반복되는 UI(헤더/사이드/푸터)는 제외한 핵심

형식: <main> ... </main>

* <main> 태그는 <article>, <aside>, <footer>, <header>, <nav> 등의 모든 페이지 태그 앞에 위치함.

2-5. 글로벌 속성(태그 종류와 상관없이 공통)

class

• 의미: 여러 요소를 같은 그룹으로 묶고 클래스명을 지정하여 CSS/JS에서 다루기 좋게 함

형식: <p class="red-color">...</p>

id

• 의미: 요소에 아이디를 지정(중복 X)

형식: <h1 id="title">...</h1>

style

• 의미: 요소에 인라인 CSS를 직접 적용

형식: <p style="font-size:14px;">...</p>

title

• 의미: 마우스를 올렸을 때 추가 설명(툴팁) 표시

형식: <span title="World Wide Web Consortium">W3C</span>

lang

• 의미: 문서/요소의 언어 코드 지정

형식: <html lang="ko">, <p lang="de">...</p>(한국어가 기본 언어인 코드에서 독일어 사용)

hidden

• 의미: 요소를 화면에서 숨김

형식: <p hidden>...</p>

data-*

• 의미: 사용자 정의 데이터를 HTML 속성으로 저장(나중에 JS에서 읽어 쓰기 좋음)

형식: <p data-name="spiderMan" data-hero="true">...</p>

이슈 로그

오늘은 개념 정리 위주라서 따로 막힌 부분은 없었습니다. 양이 많았던 만큼 완벽히 숙지하지 못했기 때문에 다시 한 번 읽어보고 약간의 암기도 필요할 것 같네요.

학습단 도서

• 「코딩 자율학습 HTML+CSS+자바스크립트」