HTML 태그 정리

HTML에서 자주 쓰는 기능성 태그를 정리하였습니다.

태그 이름	설명	사용법 및 적용후 이미지
title	문서의 제목을 만들어 주는 태그 웹 페이지를 띄우면 자바스크립트라고 뜨는 타이틀이 되는 부분.	<title>자바스크립트</title>
p	단락을 만들어 주는 태그(자동 줄바꿈)	<p>안녕하세요</p>안녕
br	줄바꿈 해주는 태그	안녕 <br>하세요
b, strong	굵은 글씨체 (요즘은 strong을 많이씀)	<b>안녕</b> <strong>안녕</strong>
mark	중요부분을 노란색 형광색으로 색칠함	<mark>안녕하세요</mark>
h1~h6	본문의 타이틀을 만드는 태그 (h1이 제일 큰글씨 뒤로 갈수록 글씨가 작아짐, 자동 줄바꿈) 헤드라인을 적을때 주로 사용한다	<h1>안녕</h1> <h2>안녕</h2>
hr	줄을 만드는 태그	<hr>
u	밑줄 태그	<u>안녕</u>
small	작게 표시 되는 태그	<small>안녕</small>
sub	아랫첨자	H<sub>2</sub>O
sup	윗첨자	x<sup>2</sup>=4
ul, li	unordered list의 약자 목록을 만드는 태그 (순서가 없는 리스트)	<ul>    <li>떡볶이</li>    <li>라면</li>    <li>돈가스</li> <ul>
ol, li	ordered list의 약자 목록을 만드는 태그 (순서가 있는 리스트) <ol type="A">...</ol> // 숫자 대신 A, B, C 타입 <ol type="a">...</ol> // a, b, c 타입 <ol type="I">...</ol> // I, II, III, IV 로마타입 <ol type="i">...</ol> // i, ii, iii, iv 로마타입	<ol>    <li>떡볶이</li>    <li>라면</li>    <li>돈가스</li> <ol>
dl, dt, dd	용어를 설명하는 목록을 생성 <ul> 태그와 비슷하게 순번이 없는 목록으로 정렬 할 때 사용 dl : definition list의 약자(설명하는 구역을 생성) dt : definition term의 약자(제목을 넣을때 사용) dd : definition description의 약자(내용을 적을때 사용)	<dl>    <dt>HTML</dt>    <dd>마크업</dd> </dl>
a href	글씨에 링크를 걸 때 사용 추가로 <a href="google.co.kr" target="_blank"> target="_blank"을 적어주면 새창에서 링크 열림	<a href="google.co.kr">구글</a>
text-decoration:none	링크에 밑줄을 없을 때 사용	<a href="google.co.kr" style="text-decoration:none">밑줄없애기</a>
img src	이미지를 삽입 할 때 사용 기본<img src="폴더주소/파일명/파일형식"> 이미지있는 폴더 열고 아래 사진과 같이 빈공간을 클릭하면 복사 가능함 응용<img src="폴더주소" weight="50px" height="50px"> 가로, 세로 크기 px 또는 % 또는 vw(폭), vh(높이)로 응용 가능 vw, vh는 반응형으로 브라우저창이 줄어들면 이미지도 같이 작아지는 효과가 있다	<img src="C:\Users\PC\Desktop\Javascript 학습자료\Javascript\d.jpg" weight="50px" height="50px">
&nbsp;	html 언어에서는 띄어쓰기를 2회이상 해도 1번만 입력이 된다 하지만 &nbsp;을 사용하면 띄어쓰기를 계속 할 수 있다.	안&nbsp;&nbsp;&nbsp;&nbsp;녕
&lt;	부등호(<)	3 &lt; 5
&gt;	부등호(>)	3 &gt; 5
&amp;	엠퍼센드(&) 기호	&amp;
&quot;	쌍따옴표(")	&quot;안녕&quot;