HTML 태그/문 정리

알고 있던 태그들

텍스트/구조

• <p> : 문단
• <h1>~<h6> : 제목
• <br> : 줄바꿈
• <hr> : 수평선
• <strong> : 굵은 글씨
• <em> : 기울어진 글씨
• <mark> : 형광펜 효과
• <pre> : 있는 그대로 표시 (공백, 줄바꿈 유지)
• <blockquote cite=""> : 인용구 (들여쓰기, cite 속성으로 출처 지정)

컨테이너

• <div> : 블록 레벨 컨테이너
• <span> : 인라인 컨테이너

미디어

• <img src="" alt="" width="" height=""> : 이미지
  • src : URL 또는 파일 경로
  • alt : 대체 텍스트
• <figure>, <figcaption> : 이미지/오디오/비디오와 자막
• <picture>, <source> : 화면 크기별 유동적 이미지
• <audio src=""> : 오디오
  • 불리언 속성: controls, autoplay, muted, loop
• <video src=""> : 비디오

링크

• <a href="" target=""> : 링크
  • target="_self" : 현재 탭에서 열기
  • target="_blank" : 새 탭에서 열기
  • href에 tel: (전화 걸기), mailto: (메일 보내기)도 가능

목록

• <ul>, <li> : 순서 없는 목록
• <ol start="" type="">, <li> : 순서 있는 목록
  • 예: start="3" type="a" → c, d, e, f, ...

표

• <table> : 표 전체
• <tr> : 행
• <th> : 제목 셀
• <td> : 데이터 셀
• <thead> : 표 제목 영역
• <tbody> : 표 본문 영역
• <tfoot> : 표 요약 영역

폼

• <input placeholder="" type="" name="" value=""> : 입력 필드
  • type 종류: text, password, number, color, button, radio, checkbox
• <label> : input과 짝을 이뤄 라벨 지정
• <select>, <option> : 드롭다운
• <textarea cols="" rows=""> : 여러 줄 텍스트 입력
• <progress value="" max=""> : 진행 바

---

처음 알게된 태그들

시맨틱 레이아웃 태그

• <section> : 영역 구분
• <article> : 독립적인 콘텐츠 영역
• <aside> : 보조 정보
• <header> : 머릿말
• <nav> : 네비게이션 링크
• <footer> : 하단 요약
• <meta> : 문서 메타데이터

---

엔티티 코드 (Entity Code)

&로 시작하고 ;로 끝나는 특수문자 표현 방식

표현	엔티티 코드	설명
(공백)	 	연속 공백 (스페이스바 여러 번 대신 사용)
<	&lt;	부등호 (less than)
>	&gt;	부등호 (greater than)
&	&amp;	앰퍼샌드
"	&quot;	큰따옴표
©	&copy;	저작권 기호

---

전역 속성 (Global Attributes)

• id : 요소에 고유한 이름을 부여하는 식별자
• class : 요소를 그룹별로 묶는 식별자
• title : 요소에 대한 추가 정보. 마우스를 올리면 툴팁으로 표시됨