HTML5 - 기본 태그와 멀티미디어 태그

태그 사용하기

 

텍스트 관련 태그

• <b> : 볼드체 로 표시해준다 (<strong> 태그도 있는데 사실상 차이가 없으니 몰라도 된다!)
• :이탤릭체 로 표시
• <em> : 마찬가지로 이탤릭체 로 표시해주는 태그지만 더 범용성이 높다고하니 그냥 이거로 써내리자...
• <sub> : 아랫 첨자로 조금 더 키가 작은 텍스트로 표시해준다.
• <sup> : <sub>의 반대인 윗첨자로 텍스트를 더 높게 표시해줘 붕 떠있는 것 처럼 보일 것이다.
• <ins> : 텍스트에 밑줄을 치는 underline이다.
• <del> : 취소선이다
• <mark> : 하이라이트 표시를 해주는 태그 <small>
• <small> : 작게 표시
• <pre>: 사전 서식을 유지한 텍스트를 표시한다. 공백과 줄 바꿈이 그대로 표시된다.
• <hr>: 수평선을 그어준다.
  • align: 수평선의 정렬을 지정한다.
  • noshade: 그림자 효과를 제거한다.
  • size: 수평선의 두께를 지정한다.
  • width: 수평선의 길이를 지정한다.

• <p>: 단락을 만든다.
• <br>: 줄 바꿈을 한다.

<p>이것은 <b>볼드체</b>와 <em>이탤릭체</em> 예시입니다.</p>
<p>H<sub>2</sub>O와 x<sup>2</sup> 표기 예시</p>
<p><ins>밑줄</ins>과 <del>취소선</del> 그리고 <mark>하이라이트</mark> 예시</p>
<p><small>작은 텍스트</small> 예시</p>
<pre>
코드나 시와 같이
    들여쓰기와
        줄바꿈을 
그대로 유지하고 싶을 때
</pre>
<hr>

 

 

<a>태그

 

  <a>태그는 보통 다른 사이트나 같은 문서 내 다른 위치로 이동할 때 사용하는데 <a href="URL주소"> 형태로 쓰인다. <a> 태그는 href와 target 속성이 있는데 href는 연결하고자 하는 URL을 지정하는데 사용하며 target은 링크를 클릭했을 때 웹 사이트가 열릴 곳을 지정해주는 속성이다.

 

href

• href="http://www.dovies401.tistory.com" 처럼 절대적인 경로를 표기하는 방법
• <base> 태그에 기반이 되는 URL을 지정하고 href="hello.html" 같이 상대적인 경로를 표기하는 방법

 

target

• _blank : 웹페이지를 새로운 탭에 띄운다.
• _self : 현재 탭에 웹페이지를 띄운다.

<a href="https://www.google.com" target="_blank">구글 새 탭으로 열기</a>
<a href="index.html" target="_self">같은 창에서 이동</a>

 

리스트 태그

• <ul>: 순서 없는 리스트를 만든다.
• <li>: 리스트 항목을 나타낸다. <ul>, <ol> 안에 사용된다.
• <ol>: 순서 있는 리스트를 만든다.
• <dl>: 정의 리스트를 만든다.
• <dt>: 정의 리스트의 용어를 나타낸다.
• <dd>: 정의 리스트의 용어에 대한 설명을 나타낸다.

<ul>
    <li>순서 없는 리스트 항목 1</li>
    <li>순서 없는 리스트 항목 2</li>
</ul>

<ol>
    <li>순서 있는 리스트 항목 1</li>
    <li>순서 있는 리스트 항목 2</li>
</ol>

<dl>
    <dt>HTML</dt>
    <dd>웹 페이지를 만드는 마크업 언어</dd>
    <dt>CSS</dt>
    <dd>웹 페이지의 스타일을 정의하는 언어</dd>
</dl>

 

테이블 (표) 태그

• <table>: 표를 만든다.
• <tr>: 표의 행을 만든다.
• <td>: 표의 데이터를 나타낸다. 셀을 만든다.
• <th>: 표의 헤더 셀을 만든다.
• rowspan: 셀을 여러 행에 걸쳐 병합한다.
• colspan: 셀을 여러 열에 걸쳐 병합한다.
• <caption>: 표의 제목을 지정한다.

<table border="1">
    <caption>학생 성적표</caption>
    <tr>
        <th>이름</th>
        <th>국어</th>
        <th>영어</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>90</td>
        <td>85</td>
    </tr>
    <tr>
        <td>김철수</td>
        <td colspan="2">결석</td>
    </tr>
</table>

 

임베디드 콘텐츠 태그

 

<img>태그

• src: 이미지 파일의 경로를 지정한다.
• alt: 이미지의 대체 텍스트를 지정한다.
• width: 이미지의 너비를 지정한다.
• height: 이미지의 높이를 지정한다.
• style: 스타일을 지정한다.
• border: 테두리를 지정한다.

 

<audio>태그

• loop : 오디오를 반복 재생한다.
• muted : 오디오를 음소거한다.
• controls : 오디오 컨트롤을 표시한다.
• autoplay : 오디오를 자동 재생한다.
• preload : 오디오를 미리 로드한다.

 

<video>태그

• poster : 비디오의 포스터 이미지, 즉 썸네일을 지정한다.
• 그 외 audio 태그와 동일한 태그들 (loop, muted, controls, autoplay, preload)

 

<source> : 미디어 요소의 다양한 소스 파일을 지정한다.

<canvas> : 그래픽을 그릴 수 있는 캔버스를 만든다.

<track> : 비디오나 오디오 요소에 자막 파일을 지정한다.

<img src="example.jpg" alt="예시 이미지" width="300" height="200">

<audio controls>
    <source src="song.mp3" type="audio/mpeg">
</audio>

<video controls width="400">
    <source src="movie.mp4" type="video/mp4">
</video>

 

개체 삽입 태그

• <object> : HTML 문서에 플러그인 콘텐츠를 삽입한다.
• < embed> : 외부 애플리케이션이나 인터랙티브 콘텐츠를 삽입한다.

<object width="400" height="300" data="animation.swf">
    <embed src="animation.swf" width="400" height="300">
</object>