HTML + CSS - 2

1) 표 사용하기 (<table>)

기본 구조

1부터 9까지 표로 나열

1	2	3
4	5	6
7	8	9

• <table>: 표 전체
• <caption>: 표 제목
• <tr>: 가로줄(row)
• <td>: 데이터 셀

영역 태그

• <thead>: 머리(컬럼명), <tbody>: 본문, <tfoot>: 요약/결산
• <th>: 헤더 셀(기본 굵게+가운데 정렬)

달력 형태 예시(요약)

• 월 최대 31일 기준, 가로 6줄 × 세로 7열이 최대
• Emmet: table>caption+(tr*6>td*7)

셀 병합: rowspan, colspan (예: td colspan="2")

열 스타일 묶기: <colgroup><col span="2"><col class="price"></colgroup>

---

2) 링크 (<a>)

<a href="https://www.google.com" target="_blank">새창에서 구글 열기</a>
<!-- 이미지도 링크 가능 -->
<a href="https://www.google.com" target="_blank">
  <img src="google_logo.webp" alt="구글 로고">
</a>

• href: 이동할 주소
• target: _self(현재 창), _blank(새 탭)
• 내부 이동: 요소에 id 부여 후 href="#그id"

연락처 링크

<a href="tel:010-1234-5678">전화</a>
<a href="mailto:a@test.com">이메일</a>

---

3) 사용자 입력 받기 (<form>)

<form action="/result" method="get" autocomplete="on">
  <label for="name">이름</label>
  <input id="name" name="my-name" type="text">

  <label for="age">나이</label>
  <input id="age" name="my-age" type="number">

  <button type="submit">제출</button>
  <button type="reset">초기화</button>
</form>

• <form>

  • action: 제출할 주소(결과 페이지/서버)
  • method: get(조회), post(등록/수정 시 주로 사용)
  • autocomplete="off"로 자동완성 끄기 가능

• <label for="..."> ↔ <input id="..."> : 클릭 영역/접근성 향상

• <button type="submit|reset">

관련 그룹 묶기

<fieldset>
  <legend>회원 정보</legend>
  ...
</fieldset>

---

4) <input> 타입별 핵심

텍스트 계열

<input type="text" placeholder="이름" minlength="2" maxlength="20">
<input type="password">
<input type="search">
<input type="tel"> <!-- 모바일에서 숫자 키패드 -->

숫자/날짜/범위

<input type="number" min="0" max="10">
<input type="range" min="0" max="100" step="20">
<input type="date" min="2020-01-01" max="2030-12-31">

체크/라디오

<!-- checkbox: 복수 선택 -->
<input id="organic" type="checkbox" checked>
<label for="organic">유기농</label>

<!-- radio: name이 같은 것 중 단일 선택 -->
<input type="radio" name="fruit" id="f_apple"  value="apple" checked>
<label for="f_apple">사과</label>
<input type="radio" name="fruit" id="f_grape"  value="grape">
<label for="f_grape">포도</label>

• name으로 같은 그룹을 묶으면 라디오는 한 개만 선택
• value: 서버로 전송되는 실제 값(영문/코드 값 권장)

파일/숨김/이메일

<input type="file" accept="image/png, image/jpeg" multiple>
<input type="hidden" name="token" value="abc123">
<input type="email" required>

공통 속성 요약

• value: 전송되는 값(placeholder와 다름)
• autofocus: 페이지 로드 시 자동 포커스
• readonly: 읽기 전용(전송됨)
• disabled: 비활성(전송 안 됨)
• required: 필수 입력

---

5) 긴 텍스트 (<textarea>)

<label for="message">본문</label><br>
<textarea id="message" cols="64" rows="10">기본값(전송됨)</textarea>

• value 속성 대신 태그 사이의 내용이 기본값/전송값

---

6) 옵션 선택 (<select>, option, optgroup, datalist)

<label for="lang">프로그래밍 언어</label>
<select id="lang">
  <option value="">-- 언어 선택 --</option>
  <option value="html" selected>HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

• option의 value가 전송됨(placeholder처럼 보이는 항목은 보통 value="")

<!-- 카테고리(선택 불가) 묶기 -->
<select>
  <optgroup label="과일">
    <option value="f_apl">사과</option>
    <option value="f_grp">포도</option>
  </optgroup>
  <optgroup label="채소">
    <option value="v_crt">당근</option>
  </optgroup>
</select>

<!-- 입력 제안(datalist) -->
<input id="job" list="jobs">
<datalist id="jobs">
  <option value="학생"><option value="디자이너">
  <option value="퍼블리셔"><option value="개발자">
</datalist>

• datalist: 입력 보조 제안(필수 아님)

---

7) <div> vs <span> (디자인 없이 묶는 태그)

• <div>: block 요소(한 줄 전체 차지)
• <span>: inline 요소(내용만큼만 차지)

CSS로 display 속성 변경 가능해서, 실제 배치는 스타일에 따라 달라짐

---

8) 시맨틱 태그(Semantic Tags)

의미 있는 이름을 가진 레이아웃 태그. 기능은 div와 같지만 의미/구조/접근성/SEO에 이점.

• <header>: 상단 영역(로고/헤더 내 내비)
• <nav>: 내비게이션(링크 모음)
• <main>: 페이지의 핵심 내용(문서당 1개만)
• <footer>: 하단 영역(회사 정보/저작권/링크)
• <aside>: 보조 내용(사이드바)
• <section>: 주제별 구획(더 쪼개면 div)
• <article>: 독립적/재사용 가능한 컨텐츠(게시글/카드/댓글)
• <figure> + <figcaption>: 이미지와 캡션 묶기

---

🔎 실전 팁 요약

• 표 달력 레이아웃: 6행 × 7열 기준으로 설계(Emmet: table>caption+(tr*6>td*7))
• 라디오 단일 선택은 name 동일해야 함
• 서버로 가는 값은 value (보여지는 텍스트와 다를 수 있음)
• required, min, max, step 등으로 프론트 1차 검증
• 시맨틱 태그로 접근성/SEO/가독성 향상, 유지보수 쉬워짐