(11) 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.

(11) HTML 태그 - m,n 본문

Web

(11) HTML 태그 - m,n

itisminu 2023. 7. 9. 13:48

728x90

SMALL

<main> : 해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의할 때 사용함.

<main> 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 됩니다.

따라서 하나의 문서에는 단 하나의 <main> 요소만이 존재해야 하며, <main> 요소는 <article>, <aside>, <footer>, <header>, <nav> 요소의 자손 요소가 되어서는 안 됩니다.

<main>
    <h1>바나나</h1>
    <p>바나나는 바나나는 파초과 바나나 속에 속하는 숙근성 영년생 열대과수를 총칭한다.</p>
    <article>
        <h2>다이어트 식품</h2>
        <p>바나나는 탄수화물이 약 27%이고 비타민 A와 C가 풍부하며, 100g당 87kcal의 열량을 갖는다.</p>
    </article>
    <article>
        <h2>다양한 섭취법</h2>
        <p>바나나는 열매를 주식으로 이용할 뿐 아니라 미성숙한 열매는 채소로 다양한 요리에 응용된다.</p>
    </article>
</main>

<map> : 클라이언트 사이드 이미지맵(client-side image-map)을 정의할 때 사용함.

이미지맵(image-map)은 클릭할 수 있는 영역을 가지는 이미지를 의미합니다.

<area> 요소는 이러한 이미지맵의 클릭할 수 있는 영역을 정의하는데 사용되며, <map> 요소는 하나 이상의 <area> 요소를 포함할 수 있습니다.

<map> 요소의 필수 속성인 name 속성은 <img> 요소의 usemap 속성과 결합하여, 이미지(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>

<marl> : 형광펜으로 칠한 것처럼 하이라이트된(highlighted) 텍스트를 정의할 때 사용함.

<p>우리는 두 마리의 <mark>고양이</mark>를 키우고 있습니다.
    그 아이들이 너무 귀여워서 <mark>고양이</mark>를 한 마리 더 입양할 생각입니다.</p>

<meta> : 해당 문서에 대하 정보인 메타데이터(metadata)를 정의할 때 사용함.

이러한 <meta> 요소는 언제나 <head> 요소 내부에 위치해야 합니다.

만약 name 속성이나 http-equiv 속성이 명시되었다면 반드시 content 속성도 함께 명시되어야 하며, 반대로 두 속성이 명시되지 않았다면 content 속성 또한 명시될 수 없습니다.

HTML5에서는 <meta> 요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어할 수 있도록 name 속성에 viewport 속성값을 제공하고 있습니다.

1) 검색 엔진을 위한 키워드(keyword)를 정의하는 예제

<meta name="keyword" content="HTML, meta, tag, element, reference">

2) 웹 페이지에 대한 설명(description)을 정의하는 예제

<meta name="description" content="HTML meta tag page">

3) 문서의 저자(author)를 정의하는 예제

<meta name="author" content="TCPSchool">

4) 5초 뒤에 다른 페이지로 리다이렉트(redirect)시키는 예제

<meta http-equiv="refresh" content="5;url=http://www.tcpschool.com">

5) 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트(viewport)를 설정하는 예제

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meter> : 분수 값이나 게이지(gauge) 내에서 특정 스칼라 값(scalar measurement)이 어느 정도인지를 표현할 때 사용함.

예를 들어, 디스크의 사용량, 특정 후보를 선택한 투표 인구의 비율 등을 시각적으로 보여주고 싶을 때 <meter> 요소를 사용할 수 있습니다.

하지만 <meter> 요소를 진행 정도를 나타내는데 사용해서는 안 되며, 진행 상황을 나타낼 때는 <progress> 요소를 사용해야 합니다.

<p>디스크 사용량 : <meter min="0" max="1000" value="350">350GB</meter></p>

<nav> : 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용함.

<nav> 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있습니다.

글을 읽지 못하는 사용자를 위한 스크린 리더기와 같은 브라우저는 <nav> 요소를 사용하여 해당 콘텐츠의 초기 렌더링을 생략할지 여부를 결정합니다.

<nav>
    <a href="/html/intro">HTML</a> |
    <a href="/css/intro">CSS</a> |
    <a href="/javascript/intro">JavaScript</a>
</nav>

<noframes> : 프레임(frame) 기능을 사용하지 않도록 설정했거나, 프레임 기능을 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의할 때 사용합니다.

<noframes> 요소는 일반적인 HTML 문서의 <body> 요소에서 찾을 수 있는 모든 HTML 요소를 포함할 수 있으며, <frameset> 요소 내부에 위치하게 됩니다. 이러한 <noframes> 요소는 프레임셋(frameset)을 사용하지 않는 웹 사이트 버전으로 연결시키거나, 사용자에게 현재 사용 중인 브라우저가 프레임(frame)을 지원하지 않는다는 메시지 등을 나타낼 때 사용할 수 있습니다.

HTML5에서는 <noframes> 태그를 더 이상 지원하지 않습니다.

<frameset cols="33%,*,33%">
    <frame name="left" src="/html/intro"/>
    <frame name="center" src="/css/intro"/>
    <frame name="right" src="/php/intro"/>
    <noframes><p>사용 중이신 브라우저가 frame 요소를 지원하지 않습니다!</p></noframes>
</frameset>

<noscript> : 클라이언트 사이드 스크립트(client-side scripts)를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의할 때 사용함.

또한, 클라이언트 사이드 스크립트를 지원하지 않는 브라우저에서는 스크립트의 내용이 그대로 화면에 출력될 수 있으므로, 다음과 같이 주석을 활용하여 스크립트의 내용이 화면에 나타나지 않도록 설정할 수도 있습니다.

<script>
<!--
function alertMsg() {
  alert("Hello World!")
}
//-->
</script>

<script>
    document.getElementById('demo').innerHTML = "Hello World!";
</script>
<noscript>
    현재 사용 중인 브라우저는 스크립트를 지원하지 않거나, 해당 기능이 활성화되어 있지 않습니다!
</noscript>

공부를 목적으로 정리한 게시글입니다.

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