HTML 기초 #2 [HTML Tag]

오늘은 알파벳 'A'로 시작하는 태그에 대해 알아보겠습니다. 만약 찾고 싶은 태그가 있으시다면 키보드의 Ctrl + F를 누르신 후 '태그이름'으로 검색해주십시오.

<!-- -->

주석(설명)을 나타냅니다. 코드상에만 존재하며 본문에는 표시되지 않습니다.

<!-- 설명글입력 -->

<!DOCTYPE>

HTML 문서 형식에 관한 버전 정보(DTD)를 설정합니다. 웹표준에서는 반드시 모든 HTML 문서의 맨 앞에 있어야하며, HTML 문서의 구성 요소는 아니지만 <!DOCTYPE>에 따라 스타일 속성과 태그가 변하게 되니 알아두시면 좋습니다. 더 자세한 내용은 HTML 기초 #1에 설명되어 있습니다.

<a>

링크를 나타내는 태그이며 앵커(anchor)라 발음합니다. 페이지 이동, 자료 다운로드, 문서 내 이동(책갈피) 등의 기능을 활용할 때 사용됩니다.

<a href="연결될주소" target="연결될윈도우">링크이름</a>

<a name="책갈피이름"></a>
<a href="#이동할책갈피이름">이동할책갈피이름</a>

미리보기 : 링크이름

target 속성

_blank

새 창에 링크를 엽니다.

_parent

현재 창이 프레임으로 구성되어 있고 프레임이 중첩되어 있을 때, 링크된 페이지를 부모 프레임에 열게됩니다. 만약 프레임이 중첩되어 있지 않으면 "_top"과 같은 결과가 됩니다.

_self

현재 창(또는 프레임)에 링크를 엽니다. [기본값]

_top

현재 창이 프레임으로 구성되어 있을 경우 프레임은 사라지고 링크된 페이지가 웹 브라우저 전체에 표시됩니다.

<abbr>

축약된 텍스트를 정의하는데 사용되며 내용은 마우스 오버시 툴팁으로 표시고 'www', 'IT', 'WHO'처럼 한 글자씩 발음되는 약어를 지정할 때 사용합니다. 해당 태그는 IE6이하에서는 지원되지 않습니다.

홈페이지 제작에 사용되는 언어는 <abbr title="Hyper Text Markup Language">HTML</abbr> 입니다.

미리보기 : 홈페이지 제작에 사용되는 언어는 HTML 입니다.

<acronym>

줄임말을 정의하는데 사용되며 내용은 마우스 오버시 툴팁으로 표시되고 'ASAP', 'NATO', 'SOHO'처럼 한 단어로 발음되는 약어를 지정할 때 사용합니다. 해당 태그는 HTML5에서 지원되지 않습니다. 대신 HTML5에서는 <abbr>을 사용하라고 지정되었습니다.

Can I get this <acronym title="as soon as possible">ASAP</acronym>?

미리보기 : Can I get this ASAP?

<address>

문서 또는 문서의 작성자/소유자의 연락처 정보를 정의합니다. 만약 <article> 태그 내에 <address>태그가 있을 경우 해당 글에 대한 연락처 정보를 나타냅니다. <address> 태그는 기본적으로 이탤릭체가 적용되어 있습니다.

<address>
Author. Noeul<br />
Group. ThreeMonster.
</address>

미리보기 :

Author. Noeul
Group. ThreeMonster.

<applet>

웹 브라우저에서 실행되는 자바 프로그램(Java Applet)을 실행시켜주는 태그입니다. HTML5에서는 <embed>나 <object>를 사용하도록 지향하고 있습니다.

<applet code="Applet문서경로" width="넓이값" height="높이값"></applet>

<area>

이미지의 특정 구역을 선택하여 이미지맵을 제작하는 태그입니다. 해당 이미지맵은 shape 옵션으로 도형의 유형을 선택하고, coords 옵션을 통해 좌표를 선택하여 영역을 지정하며, href 옵션을 통해 링크, 북마크, 다운로드 등등의 기능을 활용할 수 있습니다.

<img src="area_map.png" usemap="#testmap" alt="image-map" />
<map name="testmap">
    <area shape="circle" coords="46,40,36" href="http://naver.com" alt="Naver" />
    <area shape="rect" coords="104,4,176,76" href="http://google.com" alt="Google" />
    <area shape="poly" coords="198,32,234,4,270,32,256,76,212,76" href="http://daum.net" alt="Daum" />
</map>

이때 중요한 점은 img 태그에 usemap="#이름"과 map의 name="이름" 값이 같아하며 img 태그에 usemap 속성값 앞에는 앵커태그의 책갈피와 같이 '#'이 붙어야 합니다.
그리고 이미지의 크기는 유동적으로 변경되지 않고 고정되어 있어야 합니다.

미리보기
 

coords 계산방법

shape="rect" [기본값]

이미지의 좌측상단을 기준으로 사각형의 좌측면, 상단면, 우측면, 하단면의 위치를 표시합니다.

<img src="rect.png" usemap="#rectmap" alt="rect" />
<map name="rectmap">
    <area shape="rect" coords="50,60,190,200" href="#rect" alt="Rect" />
</map>

shape="circle"

이미지 좌측에서부터 원의 중심까지 X좌표, 이미지 상단에서부터 원의 중심까지 Y좌표, 원의 크기/2

<img src="circle.png" usemap="#circlemap" alt="circle" />
<map name="circlemap">
    <area shape="circle" coords="120,130,70" href="#circle" alt="Circle" />
</map>

shape="poly"

이미지 좌측 상단을 기준으로 각 꼭지점의X좌표1, 꼭지점의Y좌표1, 꼭지점의X좌표2, 꼭지점의Y좌표2, 꼭지점의X좌표3, 꼭지점의Y좌표3...

<img src="poly.png" usemap="#polymap" alt="poly" />
<map name="polymap">
    <area shape="poly" coords="60,200,104,30,208,130" href="#poly" alt="poly" />
</map>

<article>

독립된 콘텐츠를 표현합니다. 예를 들면 사이트 문서내의 포럼 게시물, 블로그 포스트, 뉴스, 댓글 등등을 나타낼 수 있습니다.
<article> 태그만 따로 분리하여 다른 문서에 삽입하여도 온전히 독립적인 하나의 콘텐츠가 될 수 있어야 하며, <article> 태그에는 제목과 내용이 포함되어야 합니다.

• 본문과 별개로 구성되어 다른 영역에 영향을 주거나 받지 않고 독립적으로 배포되거나 재사용할 수 있습니다.
• 게시판의 게시물, 블로그 포스트, 댓글, 위젯에 담긴 콘텐츠등이 article에 해당됩니다.
• 일반적인 상황에서는 section 요소가 article 요소를 포함하지만, 독립적으로 구성된 내용이 몇 개의 섹션으로 구성된 경우라면 article 요소가 section 요소를 포함할 수도 있습니다.
• section 요소가 관련 있는 내용을 묶는 역할이라면 article 요소는 관련 있는 내용 중에서 독립적으로 구성된 글을 별도로 묶는 역할입니다.
• article 영역 내에 <header>와 <footer>를 둘 수 있습니다.
• article 요소안에 article 요소가 들어갈 경우, 밖의 요소의 내용과 안쪽의 요소의 내용이 관련이 있는 내용이라는 것을 의미합니다.

<article>
    <h1>제목</h1>
    <p>내용</p>
</article>

<article>
    <header>
        <h1>제목</h1>
        <p>발행일자 <time datetime="2016-05-15T09:00">2016년5월15일 09:00</time></p>
    </header>

    <p>본문 내용</p>

    <footer>작성자. 노을</footer>

    <!-- 코멘트 시작 -->
    <article>
        <header>
        Name : <a href="">Guest</a> <time datetime="2016-05-15T10:00">2016년5월15일 10:00</time>
        </header>

        <p>코멘트 내용</p>
    </article>
    <!-- 코멘트 끝 -->
</article>

<aside>

페이지 전체 내용과는 어느정도 관련성이 있지만 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있습니다.

• 흔히 사이드바라고 부르는 영역으로 배너, 용어 설명, 관련 상품 등 본문 내용과 직접적인 관련성이 적거나 없는 내용으로 구성된다.
• aside 요소로 구성된 것을 검색엔진은 무시하고 본문 위주로 색인을 진행할 수 있고 스크린리더 사용자는 해당 영역이 어떤 성격의 영역인지 신속하게 파악할 수 있으므로 곧바로 다른 영역으로 이동할 수도 있다.

<aside>
    <section>
        <h3>최근에 올라온 글</h1>
        <ul>
            <li>글목록1</li>
            <li>글목록2</li>
        </ul>
    </section>
    <section>
        <h3>조회수 많은 글</h1>
        <ul>
            <li>글목록1</li>
            <li>글목록2</li>
        </ul>
    </section>
</aside>

<audio>

오디오 객체를 재생하는데 사용되며 Internet Explorer의 경우 9.0이상에서 지원합니다.

• 오디오의 포멧형식은 mp3, ogg, wav를 지원합니다.
• 브라우저에 따라 지원되지 않는 포멧이 있을 수 있습니다.
• 특정 포멧이 지원되지 않을 경우 <source> 태그를 추가하여 대처할 포멧형식의 오디오를 지정해 줄 수 있습니다.
• 하나의 audio 태그에 존재하는 <source> 태그들은 포멧형식이 다르더라도 모두 같은 소리를 들려줘야 합니다.
• 오디오 포멧에 따라 <source> 태그의 type 형식이 변경됩니다.

<audio controls>
    <source src="bubbles.mp3" type="audio/mpeg">
    <source src="bubbles.ogg" type="audio/ogg">
    <source src="bubbles.wav" type="audio/wav">
</audio>

미리보기 :

브라우저별 오디오 포멧 형식 호환성

Internet Explorer

.MP3[O]  |  .OGG[X]  |  .WAV[X]

Chrome

.MP3[O]  |  .OGG[O]  |  .WAV[O]

Firefox

.MP3[O]  |  .OGG[O]  |  .WAV[O]

Safari

.MP3[O]  |  .OGG[X]  |  .WAV[O]

Opera

.MP3[O]  |  .OGG[O]  |  .WAV[O]

정리해야하는 태그목록이 많아 오늘은 여기까지만 하겠습니다.