전부 다
<body>
태그 안에 입력!
<h1>
, <h2>
, <h3>
, <h4>
, <h5>
,<h6>
[예시]
<body>
<h1>제목 글자</h1>
<h2>제목 글자</h2>
<h3>제목 글자</h3>
<h4>제목 글자</h4>
<h5>제목 글자</h5>
<h6>제목 글자</h6>
<p>
: 본문 문단 생성 (paragraph)<br>
: 줄 바꿈 (break)<hr>
: 수평 줄 삽입 (horizontal rule)<a>
: 다른 웹 페이지 or 웹 페이지 내부의 특정 위치로 이동. (anchor)
href
속성 (hyper reference)
<다른 웹 페이지로 이동>
<a href="URL 주소">출력 글자</a>
[예시]
<a href="http://hanbit.co.kr">한빛미디어</a>
<웹 페이지 내부에 연결하기>
id속성
입력.<a>
태그의 href
속성에 "#id 속성
" 입력.[예시]
<body>
<a href="#alpha">Alpha 부분</a>
<h1 id="alpha">Alpha</a>
다양한 경로
1) 절대 경로
: 링크의 전체 경로 (전부 다 기입)
http://naver.com
2) 상대 경로
: 같은 프로젝트 폴더 내의 경로
현재 문서와 동일한 위치
animal.jpg
현재 문서를 기준으로 하위 폴더
[표기]: 슬래시 기호(/)
image/animal.jpg
현재 문서를 기준으로 상위 폴더
[표기]: 마침표 2개(..)+슬래시 기호(/)
../animal.jpg
3) 아이디 경로
: 같은 문서 내의 경로
#name
-> id 속성이 name인 태그의 위치로 이동.
[예시]
<body>
<a href="#name">Alpha 부분</a>
<h1 id="name">Alpha</a>
<b>
: 굵은 글자 (bold)<i>
: 기울어진 글자 (italic)<small>
: 작은 글자<sub>
: 아래 첨자 (subscript)<sup>
: 위 첨자 (superscript)<ins>
: 밑줄 글자 (insert)<del>
: 취소선이 그어진 글자 (delete)※ 단, 글자 모양 태그 내부에 제목 글자 태그 <h1~h6>
와 본문 글자 태그 <p>, <br>, <hr>
를 넣을 수 X.
<i>
<h1>웹 표준 위반</h1>
<p>웹 표준 위반</p>
</i>
: 내비게이션 메뉴
를 만들기 위해 사용되는 태그.
※ 내비게이션 메뉴
란?
: 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼.
• <ul>
: 순서가 없는 목록 생성. (unordered list)
• <ol>
: 순서가 있는 목록 생성. (ordered list)
• <li>
: 목록 요소 생성. (list item)
[예시-중첩 목록 만들기]
<body>
<ul>
<!---첫 번째 목록>
<li>
<b>과일</b>
<ol>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ol>
</li>
</ul>
</body>
<table>
: 표 삽입<tr>
(table row): 표에 행 삽입<th>
(table heading): 표의 제목 셀 생성. (볼드체)<td>
(table data): 표의 일반 셀 생성.<thead>
, <tbody>
: <table>
안의 내용을 head와 body로 나눔. (필수 태그 X)<table>
border
: 표의 테두리 두께 지정<th>, <td>
colspan
(열): 셀의 너비 (가로, 열을 합친 것)rowspan
(행): 셀의 높이 (세로, 행을 합친 것)[예시-행.열 병합표 만들기]
방법)
1. <tr>
태그로 행 먼저 구성.
2. <table>
태그의 border
속성으로 테두리 생성.
3. <th>,<td>
태그의 colspan
, rowspan
속성으로 행 병합 또는 열 병합 생성.
4. 행 기준으로 각 셀을 작성.
<body>
<table border="1">
<tr>
<th colspan="2">지역별 홍차</th>
</tr>
<tr>
<th rowspan="3">중국</th>
<td>정산소중</td>
</tr>
<td>기문</td>
<tr>
<td>운남</td>
</tr>
<tr>
<th rowspan="4">인도 및 스리랑카</th>
<td>아삼</td>
</tr>
<tr>
<td>실론</td>
</tr>
<tr>
<td>다질링</td>
</tr>
<tr>
<td>닐기리</td>
</tr>
</table>
</body>
: 이미지, 오디오, 비디오 등 멀티미디어를 넣기 위해 사용되는 태그.
<audio>
: <audio> </audio>
<video>
: <video> </video>
<img>
<img>
src
: 이미지의 경로 지정alt
: 이미지가 없을 때 나오는 글자 지정width
: 이미지의 너비 지정height
: 이미지의 높이 지정[예시]
<body>
<img src="Penguins.jpg" alt="그림이 존재하지 않습니다. width="300" height="200">
</body>
<audio>, <video>
src
: 음악, 비디오 파일의 경로 지정. (value: URL
)
type
: 웹브라우저가 음악 파일을 다운로드한 후 재생 가능한 파일인지 확인하는 작업을 대신 해줌 (value: audio or video / 확장자
)
controls
: 음악, 비디오 재생 도구 출력 여부 지정
preload
: 음악, 비디오를 준비 중일 때 데이터를 미리 불러올지 여부 지정.
preload
의 value: auto
: 전체가 띄워짐.metadata
: metadata만 띄워짐.none
: 아무것도 띄워지지 않음.autoplay
: 음악, 비디오의 자동 재생 여부 지정.
loop
: 음악, 비디오의 반복 여부 지정.
[예시]
<body>
<audio controls autoplay loop preload="autoplay">
<source src="Kalimba.mp3" type="audio/mp3">
<source src="Kalimba.ogg" type="audio/ogg">
</audio>
</body>
<video>
width
: 비디오의 너비 지정height
: 비디오의 높이 지정poster
: 동영상을 불러오는 동안 사용자에게 보여줄 이미지 지정. (value:URL
)[예시]
<body>
<video controls poster="http://placehold.it/640*360">
<source src="Wildlife.mp4" type="video/mp4">
<source src="Wildlifr.webm" type="video/webm">
</video>
</body>
<source>
: 웹 브라우저마다 지원하는 음악 파일 확장자가 다른 문제를 해결.