(2) HTML 태그

Notice

Recent Comments

Link

instagram

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Tags more

Archives

관리 메뉴

Minwoo Dev.

(2) HTML 태그 - a 본문

Web

(2) HTML 태그 - a

itisminu 2023. 7. 8. 18:29

728x90

SMALL

태그(tag)

- HTML 요소(element)라고도 부르며, HTML 문서를 구성하는 기본 단위

태그 종류

: HTML 소스 코드 내에 주석(comment)을 삽입할 때 사용, 브라우저 화면에 나타나지 않음.

<!-- HTML 신기하당 -->
<p> Hello World </p>
<!-- 너무 간단하당 -->

<!DOCTYPE> : DOCTYPE 선언은 HTML 문서에서 <html> 태그를 정의하기 전에 가장 먼저 선언되어야 함.

HTML 태그는 아니지만, 선언된 페이지의 HTML 버전이 무엇인지 웹 브라우저에 알려주는 역할을 함.

<!DOCTYPE html>
<html lang = "ko">

...

</html>

<a> : 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용함.

<a> 태그에서 가장 중요한 속성은 링크(link)의 목적지를 가리키는 href 속성이다.

href 속성이 없다면, target, download, rel, rev, hreflang, type, referrerpolicy 속성들도 사용할 수 없음.

<a href = "http://www.lmw1119.tistory.com">컴공생의 소소한 코딩일기장 블로그로 이동</a>

<abbr> : "W3C", "HTML", "ASAP" 등과 같이 단어의 축약형(abbereviation)이나 머리글자로만 된 단어(acronym)를 정의할 때 사용함.

브라우저나 번역 시스템, 검색 엔진에게 유용한 정보를 줄 수 있음.

<abbr> 요소 위에 마우스를 올려두면 title 속성으로 명시한 단어의 원형이 나타남.

<p>GIve me your Phone<abbr title = "As Soon As Posible">ASAP</abbr></p>

<acronym> : 머리글자로만 된 단어(acronym)를 정의할 때 사용한다.

HTML5에서는 <acronym>태그를 더이상 지원하지 않으며, 대신 <abbr>요소를 사용해야 한다.

브라우저나 번역 시스템, 검색 엔진에게 유용한 정보를 줄 수 있음.

<acronym> 요소 위에 마우스를 올려두면 title 속성으로 명시한 단어의 원형이 나타남.

<adress> : 문서나 글의 저자 또는 연락처 정보를 명시할 때 사용함.

<body> 요소 안에 존재하는 <address> 요소는 해당 문서의 연락 정보를 나타내며, <article> 요소 안에 존재하는 <address> 요소는 해당 글에 대한 연락 정보를 나타냄.

이러한 <address> 요소의 텍스트는 주로 이탤릭체(italic)로 표현되며, 대부분의 브라우저들은 <address> 요소의 위쪽과 아래쪽에 약간의 공백을 자동으로 삽입하여 다른 텍스트와 구분함.

<footer>
    나만의 코딩 연습장
    <address>      
    금오공과대학교<br>
    경북 구미시 대학교 61(거의동)<br>
    Tel: (054)478-7114
    </address>
</footer>

<applet> : 문서에 포함되는 애플릿(웹 페이지에 포함되어 작은 기능을 수행하는 프로그램)을 정의할 때 사용함.

HTML5에서는 <applet> 태그를 더 이상 지원하지 않으며, 대신 <embed> 요소나 <object> 요소를 사용해야 함.

<applet code="bubbles.class" width="300" height="300">
    자바 애플릿이 움직이는 물방울들을 그릴 것입니다.
</applet>

<area> : 이미지 맵(image-map)에서 하이퍼링크가 연결될 영역을 정의할 때 사용함.

<img src="/examples/images/img_imagemap.jpg" alt="진실 혹은 거짓" usemap="#vending" style="width:320px; height:240px">
<map name="vending">
    <area shape="rect" coords="210,200,70,130" alt="진실" href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">
    <area shape="rect" coords="90,60,180,130" alt="거짓" href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">
</map>

<article> : 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용함.

<article> 요소에 포함될 수 있는 내용은 다음과 같습니다.

- 포럼(forum) 포스트

- 블로그 포스트

- 보도 기사

- 논평(comment) 등

<article>
    <h2>2월 19일 날씨 정보</h2>
    <h3>서울</h3>
    <p>맑음</p>
    <h3>대전</h3>
    <p>흐림</p>
    <h3>부산</h3>
    <p>비</p>
</article>

<aside> : 페이지의 다른 콘텐츠들과 약간의 연관성을 가지고 있지만, 해당 콘텐츠들로부터 분리시킬 수 있는 콘텐츠로 구성된 페이지 영역을 정의할 때 사용함.

<h2>과메기</h2>
<p>과메기는 경상북도 포항 지역의 특산물로 청어나 꽁치를 추운 겨울 동안 얼렸다 녹였다를 반복하여 반건조시킨 음식이다.</p>
<aside>
    <h4>포항</h4>
    <p>포항시는 대한민국 경상북도 동해안에 위치하고 있으며, 포항시 중심을 관통하는 형산강이 영일만에 유입되면서 
        넓은 충적평야를 형성하고 있다.</p>
</aside>

<audio> : 음악이나 오디오 스트림과 같은 사운드를 정의할 때 사용함.

<audio> 요소 내에 위치하는 텍스트는 사용자의 브라우저가 <audio> 요소를 지원하지 않을 경우 화면에 표시됩니다.

<audio> 요소는 현재 다음 세 가지 포맷의 파일을 지원하고 있습니다.

- MP3 : Moving Picture Experts Group에 의해 개발되었으며, MPEG-1의 오디오 규격으로 개발된 손실 압축형 파일 형식입니다.
- WAV : IBM과 Microsoft에 의해 개발되었으며, 개인용 PC에서 오디오를 재생하기 위한 IBM과 Microsoft의 표준 오디오 파일 형식입니다.
- Ogg : Xiph 재단에 의해 개발되었으며, MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식입니다.

<audio controls>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mpeg">
    이 문장은 여러분의 브라우저가 audio 태그를 지원하지 않을 때 화면에 표시됩니다!
</audio>

HTML 공부를 위한 정리 용도로 스크랩한 글임.

출처 - http://www.tcpschool.com/html-tags