HTML

배창민·2025년 11월 16일

TIL html 한화시스템 BEYOND SW 캠프

한화시스템 BEYOND SW 캠프_20기

목록 보기

83/133

HTML

1) HTML 개요

HTML은 웹 페이지 구조와 콘텐츠를 정의하는 표준 마크업 언어. 브라우저가 해석해 화면에 그린다.

기본 골격

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>
  </head>
  <body>...</body>
</html>

<!DOCTYPE html>: HTML5 선언, head: 메타데이터, body: 실제 콘텐츠.

작성 시 주의: 태그는 소문자 권장, 여는 태그는 닫아주기, 공백은 한 칸만 인식(추가 공백은  ).

2) 글자 관련 태그

강조/표기: mark(형광펜), u(밑줄), small(부가정보), sub/sup(아래·위 첨자), s(취소선) 등.
약어/코드/입력/인용: abbr(약어 툴팁), code(코드), kbd(키보드 입력), cite(참고 표기).
문단: p는 공백 1칸·줄바꿈 태그 필요, pre는 공백/줄바꿈 그대로.

예시:

<p>보통 문단은 <mark>p</mark>로, 코드 조각은 <code>code</code>로!</p>
<abbr title="HyperText Markup Language">HTML</abbr>

3) 목록 관련 태그

비순서 목록: ul—불릿(circle/disc/square, CSS로 모양 변경).
순서 목록: ol—type(a/A/1/i/I), start, reversed.
정의 목록: dl 안에 dt(용어) + dd(정의).

예시:

<ol type="1" start="3" reversed>
  <li>세 번째</li>
  <li>두 번째</li>
  <li>첫 번째</li>
</ol>

4) 표 관련 태그

기본 구성: table > tr(행) > th(제목 셀)/td(데이터 셀).
병합: colspan(열), rowspan(행).
구역화: thead(1개), tbody(여러 개), tfoot(1개, thead 뒤).
예시 스타일링 포함 샘플 코드 제공.

예시:

<table border="1">
  <thead><tr><th>이름</th><th>점수</th></tr></thead>
  <tbody><tr><td>A</td><td>90</td></tr></tbody>
  <tfoot><tr><td colspan="2">총원 1</td></tr></tfoot>
</table>

5) 영역 관련 태그

div: 블록 요소, 수직으로 영역 분할. span: 인라인 요소, 수평으로 영역 분할.
줄바꿈·배치 차이와 간단 예제가 함께 수록.

예시:

<div style="width:120px;height:60px;border:1px solid #000;">블록</div>
<span style="border:1px solid #000;">인라인</span>

6) 이미지 관련 태그

img 핵심 속성: src(경로), alt(대체 텍스트 접근성), width/height(크기).
이미지 맵: map/area로 영역별 링크 지정.
alt는 경로 오류·스크린 리더 대비에 필수. 크기는 px/퍼센트 등 혼용 가능.

예시:

<img src="/images/hero.jpg" alt="행사 메인 배너" width="100%" />

7) 미디어 관련 태그

오디오: audio src + controls/autoplay/loop/preload. 브라우저별 포맷 지원 상이(MP3/OGG/WAV 등).
비디오: video src + controls/autoplay/loop/preload/poster/width/height.

예시:

<video src="/video/intro.mp4" controls poster="/img/poster.png" width="640"></video>

8) 하이퍼링크 관련 태그

기본: <a href="...">텍스트/이미지</a>—외부·내부(문서 내 #id) 이동 가능.
새창/현재창: target="_blank" / "_self".
링크의 핵심성과, 텍스트·이미지 링크 가능, 실습 예시 포함.

예시:

<a href="#section-1" target="_self">섹션 1로 이동</a>

9) 폼 관련 태그

form action(전송 위치) + method(GET/POST). 입력값은 input/select/textarea로 구성.
input type 다양: text/password/checkbox/radio/submit/reset/file/date/email/tel/url/color/range/time/search/number 등.
select > option(옵션) / optgroup(그룹), size/multiple 속성.
fieldset/legend로 폼 영역 묶기, button 타입 주의.
textarea: 여러 줄 입력, rows/cols, resize 제어 가능.

예시:

<form action="/search" method="post">
  <fieldset>
    <legend>검색</legend>
    <label>키워드</label>
    <input type="search" name="q" required />
    <button type="submit">검색</button>
  </fieldset>
</form>