반응형
텍스트 태그
<h1>~<h6>
제목(heading)을 표시할 때 사용합니다.
<h1>heading1</h1>
<h2>heading2</h2>
<h3>heading3</h3>
<h4>heading4</h4>
<h5>heading5</h5>
<h6>heading6</h6>
<p>
한 단락(paragraph)을 표시할 때 사용합니다.
(html에서 줄 바꿈은 인식하지 않으며 <p>등으로 줄 바꿈을 대신합니다.)
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam vestibulum cursus erat, in fringilla nunc feugiat in.
Nam vel purus convallis, molestie nisl sit amet, mattis massa.
Nullam eget ipsum nec ipsum luctus commodo non nec tellus.
Aliquam blandit neque sed nunc cursus pretium. Ut vehicula,
eros sit amet placerat ultrices, sapien felis venenatis ante,
quis pretium lorem dui a nunc. Donec id metus vel nisl rutrum pulvinar.
Aenean fermentum placerat congue. Pellentesque ornare lorem augue.
Duis consectetur interdum arcu in imperdiet.
Praesent sed tincidunt mi, sed faucibus tortor.</p>
<p>Pellentesque lacinia dolor in ipsum tristique bibendum.
Vestibulum id mollis risus. Proin tempus mi nec quam feugiat feugiat.
Fusce sollicitudin ultricies nisi non sodales. Nulla facilisi.
Cras nec dui dapibus, blandit augue ac, lacinia justo.
Curabitur dignissim libero suscipit lacus commodo cursus.
Mauris vitae magna et arcu ultrices ullamcorper laoreet a felis.
Fusce ultricies sagittis elit ut faucibus.</p>
<br>
줄을 바꿀때(line breaking) 사용합니다.
(<br>은 self-closing 태그로 태그를 닫지 않아도 되며 <br/>과 같이 표시해도 됩니다.)
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Aliquam vestibulum cursus erat, in fringilla nunc feugiat in. <br>
Nam vel purus convallis, molestie nisl sit amet, mattis massa. <br>
Nullam eget ipsum nec ipsum luctus commodo non nec tellus. <br>
Aliquam blandit neque sed nunc cursus pretium. Ut vehicula, <br>
eros sit amet placerat ultrices, sapien felis venenatis ante, <br>
quis pretium lorem dui a nunc. Donec id metus vel nisl rutrum pulvinar. <br>
Aenean fermentum placerat congue. Pellentesque ornare lorem augue. <br>
Duis consectetur interdum arcu in imperdiet. <br>
Praesent sed tincidunt mi, sed faucibus tortor.</p>
<hr>
수평 줄(horizontal rule)을 표시하고 단락이나 구역을 나눌 때 사용합니다.
(<hr>은 self-closing 태그로 태그를 닫지 않아도 되며 <hr/>과 같이 표시해도 됩니다.)
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam vestibulum cursus erat, in fringilla nunc feugiat in.
Nam vel purus convallis, molestie nisl sit amet, mattis massa.
Nullam eget ipsum nec ipsum luctus commodo non nec tellus.
Aliquam blandit neque sed nunc cursus pretium. Ut vehicula,
eros sit amet placerat ultrices, sapien felis venenatis ante,
quis pretium lorem dui a nunc. Donec id metus vel nisl rutrum pulvinar.
Aenean fermentum placerat congue. Pellentesque ornare lorem augue.
Duis consectetur interdum arcu in imperdiet.
Praesent sed tincidunt mi, sed faucibus tortor.</p>
<hr>
<p>Pellentesque lacinia dolor in ipsum tristique bibendum.
Vestibulum id mollis risus. Proin tempus mi nec quam feugiat feugiat.
Fusce sollicitudin ultricies nisi non sodales. Nulla facilisi.
Cras nec dui dapibus, blandit augue ac, lacinia justo.
Curabitur dignissim libero suscipit lacus commodo cursus.
Mauris vitae magna et arcu ultrices ullamcorper laoreet a felis.
Fusce ultricies sagittis elit ut faucibus.</p>
텍스트 속성 태그
<b>
텍스트를 굵게(bold) 표시합니다.
<b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit.
<i>
텍스트를 기울어지게(italic) 표시합니다.
<i>Lorem ipsum</i> dolor sit amet, consectetur adipiscing elit.
<small>
텍스트를 작게(small) 표시합니다.
<small>Lorem ipsum</small> dolor sit amet, consectetur adipiscing elit.
<sub>
텍스트를 아래 첨자(subscript)로 표시합니다.
<sub>Lorem ipsum</sub> dolor sit amet, consectetur adipiscing elit.
<sup>
텍스트를 위 첨자(superscript)로 표시합니다.
<sup>Lorem ipsum</sup> dolor sit amet, consectetur adipiscing elit.
<ins>
텍스트에 밑줄(insert)을 표시합니다.
<ins>Lorem ipsum</ins> dolor sit amet, consectetur adipiscing elit.
<del>
텍스트에 취소선(delete)을 표시합니다.
<del>Lorem ipsum</del> dolor sit amet, consectetur adipiscing elit.
목록 태그
<ul>
순서가 없는 목록(unordered list)을 생성합니다.
<ul>
<li>사과</li>
<li>딸기</li>
<li>포도</li>
</ul>
<ol>
순서가 있는 목록(ordered list)을 생성합니다.
<ol>
<li>사과</li>
<li>딸기</li>
<li>포도</li>
</ol>
<li>
목록(list)의 요소를 생성합니다.
<li>사과</li>
<li>딸기</li>
<li>포도</li>
테이블 태그
<table>
표(table)를 생성합니다.
| 속성 | 설명 |
| border | 표의 외곽선 두께 |
<tr>
표의 행(table row)을 생성합니다.
<th>
표의 제목(table heading)을 생성합니다.
| 속성 | 설명 |
| colspan | 가로 셀 병합 개수 |
| rowspan | 세로 셀 병합 개수 |
<td>
표의 데이터(table data)를 생성합니다.
| 속성 | 설명 |
| colspan | 가로 셀 병합 개수 |
| rowspan | 세로 셀 병합 개수 |
<table>
<tr>
<th>이름</th>
<th>성별</th>
<th>나이</th>
</tr>
<tr>
<td>Jack</td>
<td>남</td>
<td>18</td>
</tr>
<tr>
<td>Marie</td>
<td>여</td>
<td>28</td>
</tr>
<tr>
<td>Robert</td>
<td>남</td>
<td>34</td>
</tr>
</table>
미디어 태그
<img>
이미지(image)를 삽입합니다.
(<img>은 self-closing 태그로 태그를 닫지 않아도 되며 <img/>과 같이 표시해도 됩니다.)
| 속성 | 설명 |
| src | 이미지의 URL |
| width | 이미지의 너비 |
| height | 이미지의 높이 |
| title | 오버시 보이는 텍스트 |
| alt | 이미지 설명 (시각 장애인을 위한 설명) |
<img src="html5.png" width="200px" alt="html5" title="html5">
<audio>
오디오(audio)를 삽입합니다.
| 속성 | 설명 |
| src | 오디오의 URL |
| controls | 오디오 재생 도구 표시 여부 (웹 브라우저마다 도구가 다르게 표시됩니다.) |
| autoplay | 오디오 자동 재생 여부 (일부 웹 브라우저에서는 작동하지 않습니다.) |
| loop | 오디오 반복 재생 여부 |
| preload | 오디오 데이터를 모두 불러온 후 재생 여부 (보통 오디오는 데이터를 조금씩 불러오며 재생합니다) |
<audio src="audio.mp3" controls></audio>
<video>
비디오(video)를 삽입합니다.
| 속성 | 설명 |
| src | 비디오의 URL |
| poster | 비디오를 불러오는 동안 표시될 이미지 URL |
| controls | 비디오 재생 도구 표시 여부 (웹 브라우저마다 도구가 다르게 표시됩니다.) |
| autoplay | 비디오 자동 재생 여부 (일부 웹 브라우저에서는 작동하지 않습니다.) |
| loop | 비디오 반복 재생 여부 |
| preload | 비디오 데이터를 모두 불러온 후 재생 여부 (보통 비디오는 데이터를 조금씩 불러오며 재생합니다) |
| width | 비디오의 너비 |
| height | 비디오의 높이 |
<video src="video.mp4" width="500px" controls></video>
반응형