정리 기준
1. 평소에 사용하면서도 애매하게 알고 있었던 것
2. 있다는 건 알고 있지만 평소에 잘 사용하지 않아 이번 기회에 다시 한번 짚고 가는 것
Empty tag(빈 태그)
종료 태그 없이 사용하는 태그
Empty tags contain only the opening tag but they perform some action in the webpage
<br>, <img src=''>, <input type=''>공백 무시
기본적으로 HTML은 두 칸 이상의 공백을 모두 무시
텍스트 표현 태그
<b> : bold 태그는 글자를 굵게 표현하는 태그
<i> : italic 태그는 글자를 기울여서 표현하는 태그
특정 이유(기술적인 용어, 외국어 문구, 소설속 인물의 생각 등)로 다른 글자와 구분하기 위해 사용
<u> : underline 태그는 글자의 밑줄을 표현하는 태그
<s> : strike 태그는 글자의 중간선을 표현하는 태그dl 태그
dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용
dl은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조
<dt> : 용어를 나타내는 태그
<dd> : 용어에 대한 정의 또는 설명을 나타내는 태그
상대경로와 절대경로
상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로를 뜻하며, './'는 페이지가 있는 현재 폴더를 나타냄
절대경로는 실제 그 이미지가 위치한 곳의 전체 경로
<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">
<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">이미지 파일 형식
gif : 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식
jpg : 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식(투명을 지원하지 않음)
png : 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식
input 태그
type="submit": form의 값을 전송하는 버튼
type="reset": form의 값을 초기화하는 버튼
type="image": 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함)
type="button": 아무 기능이 없는 버튼
button 태그
<button type="submit|reset|button">버튼 안에 들어갈 텍스트</button>label 태그
label은 form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용하며, 모든 form 요소에 사용할 수 있음
form 요소의 id 속성값과 label의 for 속성값을 같게 적어주어야 함
또한, 스크린 리더기를 통해 듣게 되면 해당 form 요소에 접근 시 label을 함께 읽어줌
label은 사용성, 접근성적인 측면으로 중요한 역할을 하므로 반드시 써주는 것이 좋음 -> 잘 안썼던 거 같은데 반성....
<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>fieldset, legend
form 요소를 구조화 하기 위해 필요한 태그
fieldset: 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
legend: 폼 요소의 제목으로 fieldset 내부에서 반드시 최상단에 위치해야 함
<fieldset>
<legend>기본 정보</legend>
... 폼 요소들 ...
</fieldset>form
form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그
대표적인 속성 2가지
- action: 데이터를 처리하기 위한 서버의 주소
- method: 데이터를 전송하는 방식을 지정
get: 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출됨
post: 데이터가 전송될 때 데이터가 노출되지 않음
<form action="" method="">
<fieldset>
<legend>기본 정보</legend>
... 폼 요소들 ...
</fieldset>
</form>Content Models
Metadata
콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들
ex) link, meta, script, style, title
Flow
문서의 자연스러운 흐름에 의해 배치되는 요소들
ex) a, button, canvas, details, form, p, section 등 대부분
Sectioning
문서의 구조와 관련된 요소들
ex) article, aside, nav, section
Heading
각 section의 header를 정의하는 heading 태그
ex) h1~h6
Phrasing
문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들
ex) abbr, code, embed, iinput, ruby, ...
Embedded
외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들
ex) audio, canvas, embed, math, object, svg
Interactive
사용자와 상호작용을 하는 요소들
ex) audio, form, menu, select, ...
HTML5 시멘틱 요소
article, aside, figcaption, figure, footer, header, main, mark, nav, section, time
