HTML]HTML Tag

HTML 텍스트 작성

hn 태그

제목이나 주제를 나타내는 텍스트를 표현할 때 사용
h1부터 h6까지 존재 : h는 head, n에 들어가는 숫자는 중요도 표시
h1이 가장 중요하며 h6이 상대적으로 가장 덜 중요
중요도가 높을수록 글자가 가장 크고 굵고, 중요도가 낮을수록 크기가 작고 가늘어짐
hn 태그는 중간 숫자를 건너뛰지 말고 단계적으로 사용해야함 : 검색엔진에서 검색 시 순차적으로 검색하기 때문

<hn>제목</hn>

p 태그

본문의 문단 작성 시 사용

<p>문단내용</p>

br 태그

문단에서 줄 바꿈 시 사용

<br>다음 내용

blockquote 태그

출처에서 인용한 문단 단위의 텍스트를 작성할 때 사용
출처가 확실한 인용문은 cite 속성으로 출처 경로 명시
cite속성 입력은 선택 사항이며, 웹 브라우저에서는 보이지않음
들여쓰기가 됨(인용문이 아닌 부분과 줄 간격이 벌어짐)
p태그 안에는 블록요소 태그가 들어갈 수 없음
cite 태그를 활용해 인용구 제목 표시 가능
cite태그를 사용하면 웹 브라우저에 기울어진 이탤릭체로 표시

        
      
<blockquote cite="출처 URL">
<p>문단 단위 인용문</p>
<cite>이탤릭체로 표시 될 인용구 제목</cite>
</blockquote>

문단 단위 인용문

이탤릭체로 표시 될 인용구 제목 </blockquote>

q 태그

문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용
q태그를 사용한 콘텐츠는 큰따옴표로 묶임

        
      
<p>문단의 내용 <q cite="출처 URL">짧은 인용문</q></p>

문단의 내용 짧은 인용문

ins와 del 태그

ins 태그 : 새로 추가된 텍스트임을 나타낼 때 사용(밑줄)
del 태그 : 기존에 있던 텍스트가 삭제된 텍스트임을 나타낼 때 사용(~~취소선~~)

        
<ins>추가된 텍스트</ins>
<del>삭제된 텍스트</del>

sub와 sup 태그

sub 태그 : 아래 첨자(H₂O)
sup 태그 : 위 첨자(2²)

        
<sub>아래점자</sub>
<sup>위 첨자</sup>

그룹

div 태그

블록 요소와 인라인 요소를 그룹으로 묶을 때 사용
영역별로 그룹, 공간 분할

<div>블록 요소와 인라인 요소</div>

span 태그

인라인 요소를 그룹으로 묶을 때 사용
하나의 태그 안에서 공간 분할
내부 콘텐츠를 그룹으로 묶어 요소의 공간을 분할하면 분할된 요소에 CSS로 스타일 적용 가능

        
      
<p>이 문자은 <span>인라인 요소</span> 설명을 위한 문장이다</p>

ul 태그

순서가 없는 비순서형 목록 생성
목록은 li 태그로 구성
목록 내용마다 글머리 기호가 붙음

        
      
<ul>
	<li>목록1</li>
	<li>목록2</li>
</ul>

ol 태그

순서형 목록 생성
li 태그로 목록 내용 구성

        
      
<h1>오늘 할일</h1>
<ol>
	<li>목록1</li>
	<li>목록2</li>
</ol>

목록1
목록2

dl 태그

정의형 목록 생성
정의형 목록 : 용어와 용어 설명을 나열한 형태의 목록
dt 태그 : 용어
dd 태그 : 용어 설명

        
      
<dl>
	<dt>용어</dt>
	<dd>용어 설명</dd>
</dl>

용어
용어 설명

링크와 이미지

링크는 문서와 문서 간 연결을 의미 : a 태그
사진과 같은 이미지 객체 삽입 : img 태그

a 태그

HTML에서 내부나 외부 링크 생성
대상 경로를 의미하는 href 속성을 필수로 사용
href 속성 외 target, title 속성을 선택해서 사용 가능

        
      
<a href="대상 경로"target="링크 연결 방식"title="링크 설명"></a>

        
      
- href 속성
	- a 태그로 생성하는 링크의 대상 경로 입력
	- 속성값 : 대상 경로의 주소(URL), 내부 문서의 id 속성값
	- 연결해야 하는 대상의 주소가 불분명한 경우 # 사용 : <a hrdf="#">링크</a>
	- 속성값 # 사용 시 a 태그를 클릭해도 다른 페이지로 연결되지 않음

- target 속성
	- a 태그로 링크를 생성할 때 대상이 연결되는 방식 지정
	- 속성값 : _blank, _parent, _ self, _top
	- _blank : 새 창으로 열리는 방식(_blak 외에는 거의 사용하지 않음)
	- 생략 가능

- title 속성
	- 링크를 설명할 수 있는 텍스트 작성(a 태그의 콘텐츠만으로 표현하지 못한 설명 작성)
	- 생략 가능

img 태그

HTML에서 이미지 객체 삽입
src 속성, alt 속성으로 구성

        
      
- src 속성
	- 삽입하려는 이미지 경로 입력
	- HTML에서의 이미지 경로 : 항상 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준
	- 경로 입력에만 사용할 수 있는 몇 가지 약속된 기호 존재
		- 삽입하려는 이미지 파일이 HTML파일과 같은 폴더에 있는 images 폴더에 존재할 경우 : <img src="./images/이미지이름.확장자명>
		- 삽입하려는 이미지 파일이 HTML파일의 상위 폴더에 잇는 images 폴더에 존재할 경우 : <img src="../images/이미지이름.확장자명>
		- 상위 폴더 기호는 여러번 사용 가능 : 기호 한 번당 하나의 상위 폴더를 의미("../../images/이미지이름.확장자명"은 상위 폴더의 상위 폴더 의미)

경로 입력 기호	설명
./	현재 폴더
../	상위 폴더

        
      
- alt 속성
	- 이미지 객체를 설명할 수 있는 텍스트 삽입
	- alt 속성으로 추가한 이미지 설명은 그림 위에 마우스를 올려두면 확인 가능
	- 웹 표준에서는 필수 사용 권고

        
      
<img src="./이미지이름.확장자명" alt="이미지 설명">

이미지 링크

a 태그 안에는 텍스트뿐만 아니라 여러 요소가 올 수 있음
: img 태그를 a 태그 안에 사용하면 이미지를 클릭했을 때 특정 링크로 이동하게 할 수 있음(= 이미지 링크)

        
      
<a href="대상경로">
	<img src="이미지 경로" alt="대체 텍스트">
</a>

텍스트 강조

strong 태그

굵게 강조
중첩해서 사용 가능 : 중첩할 수록 더욱더 강조(실행결과에서 강조 효과는 동일하지만 구조적으로 더 중요한 부분임을 의미)

        
      
<p>이 문장에서 <strong>여기</strong>를 강조할 것입니다</p>

이 문장에서 여기를 강조할 것입니다

em 태그

기울여 강조
중첩해서 사용 가능 : 중첩할 수록 더욱더 강조(실행결과에서 강조 효과는 동일하지만 구조적으로 더 중요한 부분임을 의미)

        
      
<p>이 문장에서 <em>여기</em>를 강조할 것입니다</p>

이 문장에서 여기를 강조할 것입니다

폼 구성

HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식

form 태그

폼 양식을 의미하는 태그
HTML의 폼을 구성하는 태그는 모두 form 태그 안에 작성
form 태그는 action과 method 속성을 함께 사용

        
      
<form action="서버 url" method="get 또는 post"></form>

        
      
- action 속성 : 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소 작성(= 입력 값을 받을 서버의 URL)

- method 속성 : 입력받은 값을 서버에 전송할 때 송신 방식
	- 속성값 : get 또는 post 사용
		- post : 보안이 요구되는 정보
		- get : 보안이 요구되지 않는 정보

input 태그

입력받는 요소 생성 시 사용 : 로그인 페이지의 아이디와 비밀번호가 예시
속성 : type, name, value 속성
- type : 필수
- name, value : 선택

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

        
      
- type 속성
	- 입력된 값에 따라 상호작용 요소의 종류 결정
	- 입력 요소 : 아이디, 비밀번호, 콤보박스, 파일 업로드, 체크박스, 라디오 버튼 등

속성값	설명
text	한 줄 텍스트를 입력할 수 있는 요소 생성
password	비밀번호를 입력할 수 있는 요소 생성
tel	전화번호 형식을 입력할 수 있는 요소를 생성
number	숫자만 입력할 수 있는 요소 생성
url	URL 주소 형식을 입력할 수 있는 요소 생성
search	검색용 텍스트를 입력할 수 있는 요소 생성
email	이메일 형식을 입력할 수 있는 요소 생성
checkbox	체크박스 요소 생성
radio	라디오버튼 요소 생성
file	파일 업로드 요소 생성
button	버튼 요소 생성
image	이미지로 버튼 요소 생성, 따라서 img 태그처럼 src 속성 사용(alt 속성은 미사용)
hidden	사용자 눈에 보이지 않는 입력 요소 생성
date	날짜(연, 월, 일)를 선택할 수 있는 입력 요소 생성
datetime-local	사용자 시간대에 맞는 날짜(연, 월, 일, 시, 분)를 선택할 수 있는 입력 요소 생성
month	날짜(연, 월)를 선택할 수 있는 입력 요소 생성
week	날짜(연, 주차)를 선택할 수 있는 입력 요소 생성
time	시간을 선택할 수 있는 입력 요소 생성
range	숫자 범위를 선택할 수 있는 요소 생성
color	색상을 선택할 수 있는 요소 생성
submit	폼 전송 역할을 하는 버튼 요소 생성
reset	폼 요소에 사용자가 입력한 값을 초기화하는 버튼 요소 생성

        
      
<input type="text">
<input type="password">
<input type="tel">
<input type="number">
<input type="url">
<input type="search">
<input type="email">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="button">
<input type="hidden">
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="time">
<input type="range">
<input type="color">
<input type="submit">
<input type="reset">

        
      
- name 속성 : 입력 요소의 이름 작성
	- 입력 요소가 form 태그에 의해 서버로 전송될 때, name 속성에 적힌 값이 이름으로 지정됨
	- 서버에서는 지정된 이름으로 입력 요소 식별

- value 속성 : 입력 요소의 초깃값 작성
	- 입력 요소는 보통 사용자에게서 수동으로 값을 입력받지만, 상황에 따라 초깃값을 설정해야 하는 경우 사용

label 태그

form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용
label 태그만 클릭해도 상호작용 요소를 선택할 수 있도록 사용 가능
시각 장애인이 웹을 탐색할 때 사용하는 보조 도구인 스크린 리더기가 label 태그로 연결된 상호작용 요소를 쉽게 식별할 수 있어서 웹 접근성 향상을 위해서도 필수로 사용하기를 권장
사용하는 방법에 따라 암묵적 방법과 명시적 방법으로 구분
- 암묵적 방법 : label 태그에 상호작용 요소 포함
- 명시적 방법 : label 태그의 for 속성과 상호작용 요소의 id 속성을 같은 값으로 설정

        
      
- 암묵적 방법
<label>
	아이디
	<input type="text"> <!-- 상호작용 요소 -->
</label>

- 명시적 방법 : for 속성 = id 속성
<label for="userpw">비밀번호</label> <!-- for "userpw"(for 속성값) -->
<input type="password" id="userpw"> <!-- id="userpw"(id 속성값) -->

- 암묵적 방법 + 명시적 방법
<label for="username"> <!-- for 속성값 -->
	<input type="text" id="username">이름 <!-- id 속성값 + 상호작용 요소 -->
</label>

fieldset와 legend 태그

form 태그 안에 사용된 다양한 상호작용 요소를 fieldest 태그를 사용해 그룹 형성
fieldset 태그로 그룹 시 그룹별로 박스 모양 테두리 생성
fieldset 태그로 그룹 지은 요소들은 legend 태그로 이름 붙이기 가능

        
      
<form>
	<fieldset>
		<legend>기본 정보</legend>
		<p>
			<label for="userid">아이디</label>
			<input type="text" id="userid">
		</p>
		<p>
			<label for="passwd">비밀번호</label>
			<input type="password" id="passwd">
		</p>
	</fieldset>
	<fieldset>
		<legend>선택 정보</legend>
		<p>
			<label for="age">나이</label>
			<input type="number" id="age">
		</p>
		<p>
			<label for="renimmneder">추천인</label>
			<input type="text" id="renimmneder">
		</p>
	</fieldset>
</form>

textarea 태그

여러 줄의 입력 요소 생성 시 사용
웹 사이트에서 글을 작성할 때 사용하는 입력 요소는 대부분 textarea 태그로 생성
닫는 태그 존재
textarea 태그로 생성한 여러 줄의 입력 요소는 콘텐츠 영역에 초깃값을 정의

        
      
<form action="#" method="post">
	<fieldest>
		<legend>블로그 글쓰기</legend>
		<p>
			<label for="title">제목
				<input type="text" id="title" name="title">
			</label>
		</p>
		<p>
			<label for="desc">내용
				<textarea id="desc" name="desc"> <!-- 여러줄 입력 가능 -->
				</textarea>
			</label>
		</p>
	</fieldest>
</form>

select, option, optgroup 태그

select 태그 : 콤보박스 생성 가능
option 태그 : 콤보박스에 항목 하나 추가
- 서버에 전송할 값을 value 속성으로 지정 가능
- 속성을 생략하면 option 태그의 콘텐츠로 적은 텍스트가 값으로 전송
optgroup 태그 : 항목들을 그룹으로 묶음
- optgroup 태그로 항목들을 그룹 지을 때는 반드시 label 속성으로 그룹명 지정

        
      
- size 속성 : 콤보박스에서 화면에 노출되는 항목 갯수를 지정하는 속성
	- 속성값으로 숫자 이용 > 생략할 경우 기본으로 1개 항목 표시

- multiple 속성 : 콤보박스의 여러 항목을 동시에 선택 가능
	- 콤보박스에서 항목 하나를 선택한 상태로 ctrl을 누르고 다른 항목 클릭

- selected 속성 : 기본 선택 항목 변경(콤보박스는 첫 번째 option 태그의 값이 기본 선택된 상태로 표시)
> 여러 개의 option 태그에 selected 속성을 적용하려면 selected 속성이 마지막으로 사용된 option 태그가 기본값으로 선택되어 표시

        
      
<fieldset>
	<legend>개인 정보 입력</legend>
		<select name="city" id="city" size="2" multiple>
			<optgroup label="서울시">
				<option value="강북구">강북구</option>
				<option value="강남구">강남구</option>
				<option value="서초구">서초구</option>
			</optgroup>
			<optgroup label="성남시">
				<option value="중원구">중원구</option>
				<option value="분당구">분당구</option>
			</optgroup>
		</select>
</fieldset>

개인 정보 입력

button 태그

button 태그의 type 속성
- submit : 폼을 서버에 전송할 목적
- reset : 상호작용 요소에 입력된 내용을 초기화 하는 버튼일 경우
- button : 단순 버튼
input 태그로 생성한 버튼과 button 태그로 생성한 버튼 차이점
- button 태그 : 단순한 텍스트 외에도 이미지, 태그 같은 것들을 포함할 수 있어서 버튼 요소를 꾸미기가 더 수월함

        
      
<button type="submit">
	네이버
</button>

폼 관련 태그에서 사용할 수 있는 추가 속성

disabled 속성
- input, textarea, select, button 태그에 사용 가능
- 상호작용 요소를 비활성화
- 태그가 비활성화되면 입력 요소는 텍스트를 입력할 수 없음
- 목록 상자는 항목 선택 불가
- 버튼 요소는 버튼 클릭 불가능

        
<input type="text" disabled>
<button type="button" disabled>비활성</button>

readonly 속성
- 상호작용 요소를 읽기 전용으로 변경
- 읽기 전용
  - 입력 요소에 텍스트 입력 불가능
  - 요소를 선택하거나 드래그해서 내용 복사 가능
- textarea, input 태그에 사용 가능
  - input 태그 : text, search, url, tel, email, password, date, month, week, time, datetime-local, number 속성값에서만 사용 가능
disabled 속성과 readonly 속성의 차이점

둘다 상호작용 요소를 사용하지 못하게 한다는 점은 비슷하지만, disabled 속성은 from 태그로 서버에 값을 전송할 때 값이 아예 전송되지 않지만, readonly는 값이 전송됨

        
<input type="password" readonly>
<textarea readonly></textarea>

maxlength 속성
- 입력할 수 있는 글자 수 제한
- 속성값으로는 숫자 입력
- textarea, input 태그 사용 가능
  - input 태그 : text, search, url, tel, email, password, date, month, week, time, datetime-local, number 속성값에서만 사용 가능

        
<input type="url" maxlength="4">
<textarea maxlength="4"></textarea>

checked 속성
- 요소를 선택된 상태로 표시
- input 태그의 type 속성값이 checkbox, radio 요소에만 사용가능 : 선택 요소가 있어야하기 때문

        
      
<fieldset>
	<legend>좋아하는 과일</legend>
	<input type="checbox" id="banana" name="banana" value="banana">
	<label for="banana">banana</label><br>
	<input type="checkbox" id="apple" name="apple" value="apple">
	<label for="apple">apple</label><br>
	<input type="checkbox" id="orange" name="orange" value="orange" checked>
	<label for="orange">oranege</label><br>
</fieldset>

좋아하는 과일 banana
apple
oranege

palceholder 속성
- 입력 요소에 어떠한 값을 입력하면 되는지 힌트를 적는 용도로 사용

        
      
<input type="tel" placeholder="010-0000-0000">

표 만들기

2차원 격자로 구성된 데이터
행(가로), 열(세로), 셀(한칸) 구성

table 태그

표 생성 시 사용되는 태그
표 관련 태그는 모두 table 태그 안에서 사용

caption 태그

표 제목 지정

        
      
<table>
	<cation>표 제목</cation>
</table>

tr 태그

행 생성
여러개의 행을 생성할 경우 tr 태그를 여러번 사용

        
      
<table>
	<tr></tr>
</table>

th, td 태그

열 생성
th 태그 : 표에서 제목을 나타내는 열 생성
td 태그 : 표에서 일반적인 데이터를 나타내는 열 생성

        
      
<table>
	<tr>
		<th>번호</th>
		<th>상품명</th>
		<th>수량</th>
		<th>가격</th>
	</tr>
	<tr>
		<td>1</td>
		<td>콜라</td>
		<td>1개</td>
		<td>1,500원</td>
	</tr>
	<tr>
		<td>2</td>
		<td>사이다</td>
		<td>2개</td>
		<td>1,000원</td>
	</tr>
	<tr>
		<td>3</td>
		<td>탄산수</td>
		<td>3개</td>
		<td>1,000원</td>
	</tr>
</table>

번호	상품명	수량	가격
1	콜라	1개	1,500원
2	사이다	2개	1,000원
3	탄산수	3개	1,000원

rowspan과 colspan 속성

rowspan 속성 : 행과 행 병합
colspan 속성 : 열과 열 병합

        
      
<table>
	<tr>
		<th>번호</th>
		<th>상품명</th>
		<th>수량</th>
		<th>가격</th>
	</tr>
	<tr>
		<td>1</td>
		<td>콜라</td>
		<td>1개</td>
		<td>1,500원</td>
	</tr>
	<tr>
		<td>2</td>
		<td>사이다</td>
		<td>2개</td>
		<td rowspan="2">1,000원</td>
	</tr>
	<tr>
		<td>3</td>
		<td>탄산수</td>
		<td>3개</td>
		<!-- 3행 4열과 병합됨 -->
	</tr>
	<tr>
		<td>총 금액</td>
		<td colspan="3">6,500원</td> <!-- 열병합 -->
	<!-- 5행 2열부터 열 3개 병합 -->
	</tr>
</table>

번호	상품명	수량	가격
1	콜라	1개	1,500원
2	사이다	2개	1,000원
3	탄산수	3개	1,000원
총 금액	6,500원

3행 4열에서 4행 4열을 행 병합하므로 4행 4열은 생성하지않음
5행 2열부터 4열까지 열 병합하므로 5행 3열부터는 생성하지않음

thead, tfoot, tbody 태그

thead 태그 : 헤더 영역에 해당하는 행 그룹화
tfoot 태그 : 푸터 영역에 해당하는 행 그룹화
tbody 태그 : 본문 영역에 해당하는 행 그룹화
thead > tfoot > tbody 순서로 사용
thead와 tfoot 태그는 한 번만 사용 가능
thead 태그로 그룹화한 행은 th태그로 열을 생성해야 함
표에서 표현하려는 데이터 형식에 따라 사용하지 않을 수도 있음
thead, tfoot, tbody 태그 사용하는 이유

웹 전근성 향상

        
      
<table>
	<thead>
		<tr>
			<th>번호</th>
			<th>상품명</th>
			<th>수량</th>
			<th>가격</th>
		</tr>
	</thaed>
	<tfoot>
		<tr>
			<td>총 금액</td>
			<td colspan="3">6,500원</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>1</td>
			<td>콜라</td>
			<td>1개</td>
			<td>1,500원</td>
		</tr>
		<tr>
			<td>2</td>
			<td>사이다</td>
			<td>2개</td>
			<td rowspan="2">1,000원</td>
		</tr>
		<tr>
			<td>3</td>
			<td>탄산수</td>
			<td>3개</td>
		</tr>
	</tbody>
</table>

col과 colgroup 태그

col 태그 : 하나의 열을 그룹화
colgroup 태그 : span 속성과 함께 사용해 2개 이상의 열을 그룹화
열 전체를 그룹화하여 통일된 적용을 목적으로 많이 사용
caption 태그를 사용 시 : caption 태그 > col 태그 혹은 colgroup 태그 > tr 태그
반드시 두 태그의 개수와 사용한 열 개수가 일치해야함

        
      
<table>
	<col style="width:80px">
	<colgroup span="2" style="width:150px"></colgroup>
	<col style="width:100px">
		<tr>
			<th>번호</th>
			<th>상품명</th>
			<th>수량</th>
			<th>가격</th>
		</tr>
		<tr>
			<td>1</td>
			<td>콜라</td>
			<td>1개</td>
			<td>1,500원</td>
		</tr>
		<tr>
			<td>2</td>
			<td>사이다</td>
			<td>2개</td>
			<td rowspan="2">1,000원</td>
		</tr>
		<tr>
			<td>3</td>
			<td>탄산수</td>
			<td>3개</td>
		</tr>
		<tr>
			<td>총 금액</td>
			<td colspan="3">6,500원</td>
		</tr>
</table>

번호	상품명	수량	가격
1	콜라	1개	1,500원
2	사이다	2개	1,000원
3	탄산수	3개	1,000원
총 금액	6,500원

scope 속성

순전히 웹 접근성 향상을 목적으로 사용
제목을 나타내는 셀의 범위 지정 : th 태그(표 제목)에서만 사용 가능
속성값 : col(세로), row(가로), ~group(병합 셀)
- 제목이 colspan이나 rowspan으로 병합된 셀 : colgroup, rowgroup 사용

        
      
<table>
	<tr>
		<th scope="col">구분</th>
		<th scope="col">중간고사</th>
		<th scope="col">기말고사</th>
	</tr>
	<tr>
		<th scope="row">전공</th>
		<td>A+</td>
		<td>B+</td>
	</tr>
	<tr>
		<th scope="row">교양</th>
		<td>C-</td>
		<td>B</td>
	</tr>
</table>

구분	중간고사	기말고사
전공	A+	B+
교양	C-	B

멀티미디어 설정하기

audio 태그

audio 태그는 항상 src 속성과 함께 사용
src 속성값 : 삽입하려고 하는 오디오 파일의 경로
controls 속성 : 오디오 컨트롤 패널이 웹 브라우저에 노출되도록 설정

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

지원 파일 포맷과 미디어 타입

웹브라우저	MP3	WAV	OGG
인터넷 익스플로러(IE)	지원	미지원	미지원
엣지(Edge)	지원	지원	지원
크롬(Chrome)	지원	지원	지원
파이어폭스(Firefox)	지원	지원	지원
사파리(Safari)	지원	지원	미지원
오페라(Opera)	지원	지원	지원

오디오 파일 포맷별 미디어 타입

파일 포맷	미디어 타입
MP3	audio/mpeg
WAV	audio/wav
OGG	audio/ogg

video 태그

video 태그는 항상 src 속성과 함께 사용
src 속성값 : 삽입하려고 하는 비디오 파일의 경로
controls 속성 : 비디오 컨트롤 패널이 웹 브라우저에 노출되도록 설정

        
      
<video src="비디오 경로" controls></video>

웹 브라우저별 지원 비디오 파일 포맷

웹브라우저	MP4	WebM	Ogg
인터넷 익스플로러(IE)	지원	미지원	미지원
엣지(Edge)	지원	지원	지원
크롬(Chrome)	지원	지원	지원
파이어폭스(Firefox)	지원	지원	지원
사파리(Safari)	지원	지원	미지원
오페라(Opera)	지원	지원	지원

비디오 파일 포맷별 미디어 타입

포맷	미디어 타입
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

source 태그

audio 태그와 video 태그에서 리소스(파일)의 경로와 미디어 타입 명시에 사용
멀티미디어(audio, video) 태그 사용 시 필수는 아님
원하는 포맷을 우선 지원하고 어쩔 수 없는 경우 다른 포맷을 지원하도록 할 때 유용 : 웹 접근성 향상

        
      
<audio controls>
	<source src="파일 경로" type="audio/wav"> <!-- wav파일 우선 -->
	<source src="파일 경로" type="audio/mp3"> <!-- mp3파일 차선 -->
	지원하지 않는 웹 브라우저입니다. <!-- 위 포맷 모두 지원 안 될 경우 사용자에게 노출될 텍스트 -->
</audio>

웹 페이지 구조를 설계하는 시맨틱 태그

웹 페이지의 헤더 영역 구분
웹 사이트의 최상단이나 좌측에 위치
로고, 검색, 메뉴와 같은 요소 포함

<header>
	헤더 구성 요소
</header>

nav 태그

웹페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역 구분
보통 헤더 영역에서의 메뉴나 목차와 같은 요소
내부나 외부를 연결하는 링크가 전부 nav 태그일 필요는 없음
웹 사이트의 주요 탐색 링크 영역만 포함하면 됨

<nav></nav>

section 태그

웹 페이지에서 논리적으로 관련 있는 내용 영역 구분 > 보통 내용의 제목을 나타내는 hn 태그 중 하나 포함

<section></section>

article 태그

웹 페이지에서 독립적인 영역 구분
section 태그와 차이점
- section 태그 : 웹 페이지 안에서 관련 있는 내용을 구분
- article 태그 : 어떤 웹 페이지에서든 독립적으로 사용될 수 있는 영역 구분(ex_로그인 영역)

<article></article>

aside 태그

웹 페이지 안에서 주력 내용이나 독립적인 내용으로 보기 어려워 article 태그나 section 태그로 영역 구분이 안될 때 사용

<aside></aside>

웹 페이지에서 푸터 영역 구분
웹 페이지의 최하단

main 태그

웹 페이지의 주요 내용 지정 시 사용하는 태그
문서에서 반복해서 등장하는 요소를 포함해서는 안됨
article, aside, footer, header, nav 태그 하위에 포함할 수 없음

태그 종류에 상관없이 사용하는 글로벌 속성

태그 종류 상관없이 모든 태그에서 공통으로 사용할 수 있는 속성

속성	값	설명
class	value	요소에 클래스 값 지정. 클래스 값은 CSS에서 클래스 선택자로 활용
id	value	요소에 아이디 값 지정. 아이디 값은 CSS에서 아이디 선택자로 활용
style	style	요소에 클래스 값 지정. 클래스 값은 CSS에서 클래스 선택자로 활용
title	text	요소에 추가 정보 지정 마우스를 요소 위에 올리면 툴팁으로 추가 정보 표시 툴팁은 요소에 마우스 커서를 올렸을 때 추가 설명이 뜨는 말풍선 형태의 그래픽 요소를 말함
lang	language	요소에 사용한 텍스트의 언어 정보 지정
hidden	hidden	요소를 화면에서 감춤
data-*	value	사용자가 임의의 속성을 만들 수 있음

class 속성

요소에 클래스명 지정 시 사용
- 클래스명 : CSS에서 클래스 선택자로 활용. 같은 클래스명은 여러 요소가 중복해서 가질 수 있음

        
      
<p class="red-color">...</p>

id 속성

요소에 아이디 지정 시 사용
- 아이디 : CSS에서 아이디 선택자로 활용. 중복될 수 없음

        
      
<h1 id="title">...</h1>

style 속성

CSS 코드를 인라인으로 작성할 때 사용

title 속성

요소에 추가 정보를 넣을 때 사용
title 속성에 넣은 값은 요소에 마우스를 올리면 툴팁으로 표시

        
      
<p><span title="World Wide Web Consortium">W3C</span>는 국제 웹 표준 개발 기구입니다.</p>

W3C는 국제 웹 표준 개발 기구입니다.

lang 속성

요소에 사용한 텍스트의 언어 코드를 지정할 때 사용

        
      
<html lang="ko">
<p lang="de">Guten Morgen</p> 
<!-- 한국어(ko)로 기본 설정된 문서에서 독일어가 나올때 독일어 언어 코드(de)를 명시하면 웹 접근성을 올릴 수 있음 -->

data-* 속성

사용자 커스텀 속성 생성

        
      
<p data-name="spiderMan" data-hero="true">...</p> <!-- data-name과 data-hero 속성 생성 -->

HTML]HTML Tag

HTML 텍스트 작성

hn 태그

p 태그

br 태그

blockquote 태그

q 태그

ins와 del 태그

sub와 sup 태그

그룹

div 태그

span 태그

목록

ul 태그

ol 태그

dl 태그

링크와 이미지

a 태그

img 태그

이미지 링크

텍스트 강조

strong 태그

em 태그

폼 구성

form 태그

input 태그

label 태그

fieldset와 legend 태그

textarea 태그

select, option, optgroup 태그

button 태그

폼 관련 태그에서 사용할 수 있는 추가 속성

표 만들기

table 태그

caption 태그

tr 태그

th, td 태그

rowspan과 colspan 속성

thead, tfoot, tbody 태그

col과 colgroup 태그

scope 속성

멀티미디어 설정하기

audio 태그

video 태그

source 태그

웹 페이지 구조를 설계하는 시맨틱 태그

header 태그

nav 태그

section 태그

article 태그

aside 태그

footer 태그

main 태그

태그 종류에 상관없이 사용하는 글로벌 속성

class 속성

id 속성

style 속성

title 속성

lang 속성

data-* 속성

Further Reading

HTML]HTML 기본

CSS]CSS Basic

CSS]CSS Selector