http://www.homejjang.com/05/layout.php - 태그참조링크
제목 글자 태그
태그이름 | 설명 |
h1 | 첫 번째로 큰 제목 글자 태그 |
h2 | 두 번째로 큰 제목 글자 태그 |
h3 | 세 번째로 큰 제목 글자 태그 |
h4 | 네 번째로 큰 제목 글자 태그 |
h5 | 다섯 번째로 큰 제목 글자 태그 |
h6 | 여섯 번째로 큰 제목 글자 태그 |
본문 태그
태그이름 | 설명 |
p | 본문 글자 태그 |
br | 개행 태그 |
hr | 수평 줄 태그 |
앵커태그
a | 앵커태그 -> herf속성 사용 이동하고자하는 웹페이지 지정. ex) <a href="http//naver.com">네이버</a> | |
※빈링크 사용시 href="#"사용 ※ 내부 페이지 이동시 id="abc"속성부여후 href="abc"사용. | ||
글자형태
b | 굵은 글자 태그 |
i | 기울어진 글자 태그 |
small | 작은 글자 태그 |
sub | 아래에 달라 붙는 글자 태그 |
sup | 위에 달라붙는 글자 태그 |
ins | 밑줄 글자 태그 |
del | 가운데 줄이 그어진 글자 태그 |
루비문자 (글자위의 작은글씨 주로 일본어에 사용)
ruby | 루비 문자 선언 태그 |
rt | 위에 위치하는 작은 문자 태그 |
rp | ruby 태그를 지원할 경우 출력되지 않는 태그 |
<body> <ruby> <span>大韓民國</span> <rt>대한민국</rt> </ruby> </body> | |
목록태그
ul | 순서가 없는 목록 태그 (ex. 1,2,3) |
ol | 순서가 있는 목록 태그 (ex. °) |
li | 목록 요소 |
<ol> <li>페이스북</li> <li>트위터</li> <li>카카오스</li> </ol> | |
정의 목록
dl (definition list) | 정의 목록 태그 |
dt (definition term) | 정의 용어 태그 |
dd (definition description) | 정의 설명 태그 |
테이블 태그
tr | 표 내부의 행 태그 |
th | 행 내부의 제목 셀 태그 |
td | 행 내부의 일반 셀 태그 |
<body> <table border="1"> <tr> <th>제목1(1,1)</th> <th>제목2(1,2)</th> </tr> <tr> <td>내용1(2,1)</td> <td>내용2(2,2)</td> </tr> </table> </body> | |
테이블 태그 속성
border
| 표의 테두리 두께를 지정 |
th태그와 td태그 속성
rowspan | 셀의 너비 지정 |
colspan | 셀의 높이 지정 |
<th rowspan="3">제목1</th> <td colspan="3">내용1</td> | |
이미지 태그
src | 이미지의 경로 지정 |
alt | 이미지가 없을 때 나오는 글자 지정 |
width | 이미지의 너비 지정 |
height | 이미지의 높이 지정 |
<body> <img src="사진.jpg" alt="그림이 존재하지 않습니다." width="300" /> </body> ※HTML 페이지와 이미지가 한폴더에 있을시 파일명만 적는다. | |
오디오 태그 속성
MP3, OGG, WAV지원 | |
src | 음악 파일의 경로 지정 |
preload | 음악을 재생하기 전에 모두 불러올지 지정 |
autoplay | 음악을 자동 재생할지 지정 |
loop | 음악을 반복할지 지정 |
controls | 음악 재생 도구를 출력할지 지정 |
<body> <audio src="club.mp3" controls="controls"></audio> </body> | |
source 태그
- 확장자 지원에 따른 브라우저 문제를 해결하기위해 사용 | |
<body> <audio controls="controls"> <source src="club.mp3" type="audio/mp3" /> </audio> </body>
|
video 태그의 속성(오디오와 사용법 동일)
MP4, WebM, OGV 지원 | |
src | 비디오 파일의 경로 지정 |
poster | 비디오 준비 중일 떄의 이미지 파일 경로 지정 |
preload | 비디오를 재생하기 전에 모두 불러올지 지정 |
autoplay | 비디오를 자동 재생할지 지정 |
loop | 비디오를 반복할지 지정 |
controls | 비디오 재생 도구를 출력할지 지정 |
width | 비디오의 너비를 지정 |
height | 비디오의 높이를 지정 |
입력 양식 태그
action | 입력 데이터의 전달 위치를 지정합니다. |
method | 입력 데이터의 전달 방식을 선택합니다. |
※ from 태그에 지정된 action 속성의 장소로 method 속성에 적힌 방식으로 전달. <body> <form action="HTMLPage1.html" method="get"> <input type ="text" name="search" /> <input type="submit" /> </form> </body> | |
input 태그
button | 버튼을 생성합니다. |
checkbox | 체크박스를 생성합니다. |
file | 파일 입력 양식을 생성합니다. |
hidden | 보이지 않습니다. |
image | 이미지 형태를 생성합니다. |
password | 비밀번호 입력 양식을 생성합니다. |
radio | 라디오 버튼을 생성합니다. |
reset | 초기화 버튼을 생성합니다. |
submit | 제출 버튼을 생성합니다. |
text | 글자 입력 양식을 생성합니다. |
<body> <form> <input type="text" /><br /> <input type="button" /><br /> <input type="checkbox" /><br /> <input type="file" /><br /> <input type="hidden" /><br /> <input type="image" /><br /> <input type="password" /><br /> <input type="radio" /><br /> <input type="reset" /><br /> <input type="submit" /> </form> </body> | |
HTML5 입력 양식 태그
color | 색상 선택 양식을 생성합니다. |
date | 일 선택 양식을 생성합니다. |
datatime | 날짜 선택 양식을 생성합니다. |
datatime-local | 지역 날짜 선택 양식을 생성합니다. |
| 이메일 입력 양식을 생성합니다. | |
month | 월 선택 양식을 생성합니다. |
number | 숫자 생성 양식을 생성합니다. |
range | 범위 선택 양식을 생성합니다. |
search | 검색어 입력 양식을 생성합니다. |
tel | 전화 번호 입력 양식을 생성합니다. |
time | 시간 선택 양식을 생성합니다. |
url | URL 주소 입력 양식을 생성합니다. |
week | 주 선택 양식을 생성합니다. |
※ 오페라 브라우저에서만 모든 input 태그가 정상 작동. <body> <form> <input type="color" /><br /> <input type="date" /><br /> <input type="datetime" /><br /> <input type="datetime-local" /><br /> <input type="email" /><br /> <input type="month" /><br /> <input type="number" /><br /> <input type="range" /><br /> <input type="search"/><br /> <input type="tel"/><br /> <input type="time" /><br /> <input type="url" /><br /> <input type="week" /> </form> </body> | |
textarea 태그
cols | 태그의 너비를 지정합니다. |
rows | 태그의 높이를 지정합니다. |
<body> <textarea cols="50" rows="10"> TextArea Text</textarea> </body> | |
select 태그
select | 선택 양식을 생성합니다. |
optgroup | 옵션을 그룹화합니다. |
option | 옵션을 생성합니다. |
※ 다중선택 원할시 <select multiple="multiple"> 추가 <body> <select> <optgroup label="분식"> <option>튀김</option> <option>김밥</option> </optgroup> <optgroup label="일식"> <option>스시</option> <option>가츠동</option> </optgroup> </select> </body> | |
fieldset 태그와 legend 태그
<body> <fieldset> <legend>입력 양식</legend> <table> <tr> <td><label for="name">이름</label></td> <td><input id="name" type="text" /></td> </tr> <tr> <td><label for="mail">이메일</label></td> <td><input id="maill" type="email" /></td </tr> </table> <input type="submit" /> </fieldset> |
div 태그와 span 태그
※ div 태그는 block 형식으로 공간분할. ※ span 태그는 inline 형식으로 공간분할. block -> 웹 페이지의 너비만큼 차지하며 쌓아올라감 inline -> 한 줄 안에 차례차례 위치하는 형식 | |
div | block 형식으로 공간을 분할합니다. |
span | inline 형식으로 공간을 분할합니다. |
<body> <div>div입니다.</div> <div>div입니다.</div> <div>div입니다.</div> <div>div입니다.</div> <span>span입니다.</span> <span>span입니다.</span> <span>span입니다.</span> <span>span입니다.</span> </body> | |
HTML5 시멘틱 구조 태그
semantic : 의미론적인 시멘틱 태그는 모두 div 태그와 같은 기능을 수행함. | |
header | 헤더를 의미 |
nav | 내비게이션을 의미 |
aside | 사이드에 위치하는 공간을 의미 |
section | 여러 중심 내용을 감싸는 공간을 의미 |
article | 글자가 많이 들어가는 부분을 의미 |
footer | 푸터를 의미 |
한빛미디어HTML5CSS3입문참조.
'Web > HTML' 카테고리의 다른 글
| HTTP 에러 코드 (0) | 2013.07.17 |
|---|