HTML 태그 정리

◆HTML 태그 사용법

<태그이름 옵션(또는 속성)="옵션값">내용</태그이름>

 

◆HTML body 태그 안에 사용되는 태그

●글씨 관련 태그

<b>

bold 약자로 글자를 굵게 만드는 태그이다.

<i>

italic 약자로 글자를 기울게 만드는 태그이다.

<u>

underline 약자로 글자에 밑줄을 만드는 태그이다.

<strike>

취소선 태그로, 글자에 선을 긋는 태그이다.

<em>

강조 태그이다. <i>태그와 비슷하기만 브라우저에서 음성지원시 음성강조 효과가 있다.

●글자 관련 태그

<h1>,<h2>,<h3>,<h4>,<h5>

h의 숫자가 작아지면 글씨 크기가 커진다. 자동줄바뀜과 위아래가 조금 띄어져 있다.

<ruby>

한자를 표시해주는 태그이다.

<rt>

한자의 음과 뜻을 설명해줄때 사용하는 태그이다. <ruby>태그의 위에 표시된다.

<p>

단락 태그이다. 자동 줄바뀜 된다. 밑과 조금 띄어져 있다.

●파일 관련 태그

<img>

이미지를 넣는 태그이다.

• 옵션

src="url주소 or 파일위치.파일확장자"
width="가로크기px"
height="세로크기px"

src : 이미지의 파일위치를 지정하는 옵션이다.
width : 가로크기를 지정한다.
height : 세로크기를 지정한다.

<video>

비디오를 넣는 태그이다.

• 옵션

src="url주소 or 파일위치.파일확장자"
width="가로크기px"
height="세로크기px"
controls
autoplay
loop
muted
poster="url주소 or 파일위치.파일확장자"

src : 비디오의 파일위치를 지정하는 옵션이다.
width : 가로크기를 지정한다.
height : 세로크기를 지정한다.
controls : 영상 컨트롤러를 표시한다.
autoplay : 영상 자동재생
loop : 영상 무한재생
muted : 영상 음소거
poster : 영상 썸네일을 지정한다.

웹브라우저가 html5 의 video 태그를 지원하지 않을때 경고하는 메세지를 띄우려면 그냥<video>태그 안에 경고할 메세지를 기술하면 된다.

만약 코덱을 따로 지정하고 싶다면 video 태그 안에 src 옵션을 넣지않고 video 태그안에 source 옵션을 따로 생성후 그 안에 src 옵션과 type 옵션을 넣어야 한다.

* 예제

<video autoplay width="300" height="300" controls> 
	<source src="./snowboard.mp4" type="video/mp4"> 
	<source src="./snowboard.ogg" type="video/ogg"> 
</video>
<iframe>

<video>태그와 옵션이 비슷하다. 유튜브 영상을 퍼올때 주로 사용한다.

Youtube영상 가져오기
유튜브에 공유하기 -> 퍼가기 -> 소스코드 복사
유튜브 src옵션의 url주소 맨뒤에 ? 를 붙힌뒤 원하는 옵션 ="값 0 or 1" 을 지정하면됨

ex )

src="https://www.youtube.com/embed/fuY6iwj4kbI?autoplay=1 하면 autoplay(자동재생)됨

 

<audio>

오디오를 넣는 태그이다.

audio 태그에 contols 옵션을 지정하면 오디오 컨트롤러가 표시된다.

ex )

<audio contorls>

audio 태그 안에 확장자별로 기술할 수 있다.

* 예제

<audio controls> 
	<source src="./sia-snowman.mp3" type="audio/mp3"> 
	<source src="./sia-snowman.mp4" type="audio/mp4"> 
</audio>

●이동 관련 태그

<a>

지정해둔 문서나 url로 이동한다. <img> 태그와 같이 사용하면 유용하다.

• 옵션

href="url주소 or 문서위치.문서확장자"
target="_self or blank"

href : 이동할 url주소나 문서를 지정한다.
target : 이동방식을 지정한다.

>> _self : 현재창으로 이동한다 >> _blank : 새창을열어서 이동한다

●리스트 관련 태그

<ol>

번호가 붙는 리스트 태그이다. 자동 줄바뀜된다.

<ul>

번호가 붙지 않는 리스트 태그이다. 자동 줄바뀜된다.

<li>

<ol>이나 ul태그 안에 사용하는 리스트 태그이다.

* 예제

 <ol> 
 	<li>java</li> 
 	<li>python</li> 
 	<li>c++</li> 
 </ol>

●표 관련 태그

<table>

표를 생성하는 태그.<tr> 태그와<td> 태그와<th> 태그를 같이 사용한다.

<table> 태그와 <tr> 태그의 옵션

border="사이즈px"
bordercolor="16진수색상값"
align="center or left or right"
bgcolor="16진수색상값"
cellspacing="값px"
cellpadding="값px"
heigth="세로크기px"
width="가로크기px"

align : 테이블을 어디에 정렬할지 지정

>> left >> center >> right

bgcolor : 테이블의 배경색 지정
background : 테이블의 배경그림 지정
border : 테이블의 테두리 두께 지정
bordercolor : 테이블의 테두리 색상 지정
cellspacing : 셀과 셀의 간격 지정
cellpadding : 셀 안의 내용과 여백 지정
height : 높이 크기 지정
width : 가로 크기 지정

<tr>

새로운 열을 생성한다.

<td>

새로운 행을 생성한다.

<th>

표의 이름이나 제목을 지정한다. 자동 가운데 정렬됨.

* 예제

<table> 
	<tr align="center" bgcolor="skyblue" > 
		<td>월</td> 
		<td>화</td> 
		<td>수</td> 
		<td>목</td> 
		<td>금</td> 
		<td>토</td> 
		<td>일</td> 
	</tr> 
	<tr align="center" bgcolor="black" style="color:white"> 
		<td>운동</td> 
		<td>공부</td> 
		<td>여행</td> 
		<td>취미</td> 
		<td>아파트장</td> 
		<td colspan="2">놀기</td> 
<!-- td (셀)태그에 colspan 으로 가로셀을 합칠 수 있다 .. rowspan 으로 세로셀을 합칠 수 있다.. --> 
	</tr> 
</table>

td 태그에 colspan 옵션으로 으로 가로 셀을 합치거나 rowspan으로 세로셀을 합칠 수 있다.

●구역 관련 태그

<div>

영역을 지정하는 태그이다.

<span>

in-line 형식으로 영역을 지정하는 태그이다.

<header>

보통 웹 상단에 웹서비스의 로고, 메뉴등이 위치하는 구역 태그이다.

<footer>

보통 웹 하단에 회사의 정보등이 위치하는 구역 태그이다.

<nav>

보통 메뉴를 위치하는 구역 태그이다.

<section>

보통 서브제목과 관련된 내용을 표시하는 구역태그이다.

<article>

보통 신문기사나 블로그에 글을 작성할때 사용되는 구역태그이다.

●form(전송) 관련 태그

<input>

입력을 하는 태그이다. 많은 옵션들이 존재한다.

• 옵션

type="type명"
name="서버로 전달될 파라메터명"
value="값"
placehorlder="미리입력될값"

type : input 태그의 type을 지정한다.
name : 백엔드 서버로 전달될 파라메터값 이름을 지정한다.
value : 지정한 값이 미리 쓰여있게 하거나 버튼에 값을 넣을 수 있다.
placehorlder : input 태그의 입력창에 미리 표시되는 내용이다.

ex )

<input type="text" value="userID" placeholder="ID를 입력하세요"/>

input 태그의 type 들

text
password
checkbox
radio
button
file
search
reset
submit
email
url
number
color
range
date

text : 글자를 입력하는 타입이다. 흔히 아이디나 주소 입력시 사용된다.
password : 비밀번호를 입력하는 타입이다. 암호화 된다.
checkbox : 체크박스 타입이다. 흔히 취미 체크시 사용된다. input 태그의 마지막에 checked 옵션을 주면 미리 체크가 된 상태로 표시된다.

ex )

<input type="checkbox" name="hobby" value="music" checked />

radio : 라디오 버튼형 체크 박스이다. 한개밖에 선택하지 못한다. 흔히 남녀 선택시 사용된다.

여러 라디오 버튼중 하나만 선택할 수 있게 하려면 라디오 버튼들의 id 태그가 모두 같아야 한다.

button : 버튼형 타입.
file : 파일 업로드형 타입.
search : 검색창형 타입. 옆에 검색어를 자동으로 지워주는 버튼이 존재함.
reset : 초기화버튼을 만듦. 모든 입력창이 초기화됨.
submit : 전송 버튼을 만듦. 백엔드 서버나 form태그의 action 속성에 지정된 페이지로 입력값을 전송함.
email : 이메일 입력창을 만듦. 해당 입력창에는 무조건 @ 과 이메일 형식이 있어야함.
url : 주소를 입력하는 창을 만듦. 주소형식을 갖추지 않으면 전송이 되지 않음.
number : 숫자입력에 사용된다. 문자는 입력되지 않는다.

스마트폰에서 사용할 경우 숫자 키패드가 나타나게 하려면 pattern="/d*" 를 태그 마지막에 작성해야 한다.

color : 색을 선택하는 기능을 한다.
range : 바를 만들어서 마우스나 손으로 바를 움직여 숫자를 조절해주는 기능을 한다.
date : 날짜를 선택하는 기능을 한다.

<label>

해당 입력창 또는 선택창에 명칭을 부여한다. input 태그의 radio 타입이나 check타입과 같이 사용하면 유용하다.
label 태그의 for 옵션과 input 태그의 id 옵션이 일치하면 label(글자)를 누르는 것만으로도 체크가 된다.

* 예제

<label for="woman">여성</label> 
<input type="radio" name="gender" value="여자" id="woman"/> 
<label for="man">남성</label> 
<input type="radio" name="gender" value="남자" id="man"/>

<select>

select 태그는 선택할 수 있는 창을 사용할때 쓴다. 주로 직업선택을 선택할 때 쓰인다.
option 태그와 같이 사용한다.

• 옵션

name="서버로 전달될 파라메터명"
name : 백엔드 서버로 전달될 파라메터명을 지정한다.

<select> 태그 안에 <option> 태그를 지정하여 사용한다.

* 예제

<select name="job"> 
	<option value="student">학생</option> 
	<option value="teacher">교사</option> 
	<option value="criminal">회사원</option> 
</select>