[IT·HTML+CSS] HTML에 꼭 필요한 기본태그 의미 정리와 사용예시

햇살아빠 2021. 6. 23. 00:37

2021. 6. 23. 00:37

728x90

HTML소개 및 정리

이번 포스팅에서는 기본적이면서 필수적으로 사용되어야할 html기본요소에 대하여 파헤쳐보려한다. 먼저 여기서 메타데이터는 스크립트나 각종 소프트웨어의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가지고있다. 스타일과 스크립트 메타데이터는 페이지 안에서 정의 할 수도 있고, 해당하는 정보를 가진 다른파일로 링크 할 수도있다. 그러면 아래와 같이 html의 모든 요소에대하여 정리하고 나열해보려한다. 정말 많고 다양한 요소들로인해 전반적인 HTML5가 만들어지기때문에 웹 개발에있어서는 당연히 필요한 부분이라고 생각한다. 어떻게보면 웹 개발에있어 엄청나게 중요한 부분이라고 볼 수 있다.

HTML에 사용되어지는 태그

<abbr>: abbreviation의 약자로 사전적 의미는 '축약'이라는 의미를 가지고있다. 그래서 결국 <abbr>태그는 사전적의미 그대로 축약형을 나타낼 때 사용하는 요소라고 생각하면된다. 곧, <abbr>태그가 들어간 텍스트는 브라우저 해당 텍스트 밑에 ....이라는 표시가 나오게된다.

[Example]: <p>

<abbr title="By The Way">Btw</abbr>는 그런데 혹은 그나저나라는 의미로 사용된다.

<q>: Quotation의 약자로 사전적 의미는 '인용구, 인용'이라는 의미를 가지고있다. <q>태그는 한 줄짜리 짧은 인라인 인용문을 나타낼때 기본적으로 사용되며 ** 큰따옴표 혹은 더블인용마크(double quotation mark)가 적용되어 나타난다.

[Example]:<h1>IT story</h1>

<p>quote란?</p>

<q>

한줄짜리 짧은 인용문을 적을 때 사용하는 요소

</q> 들여쓰기가 적용되며 브라우저에 나타난다.

<cite>: citation의 줄임말로 사전적의미는 '인용구, 인용, 표창장' 이라는 의미를 가지고있다. 곧, <cite>태그는 창작물, 작품 등에 대한 참조를 나타낸다고 생각하면된다. 쉽게말하면 예를들어 작품의 제목을 나타낼때 사용하는 요소로 알고있으면 사용하는데있어 편리하다.

[Example]: <img src="img/3248932748932.jpg" with="342" height="234" alt="모네의일기"/>

<p>

<cite>모네의 일기</cite> by someone. painted in 1938.

<Code>: Code는 사전적의미로 '암호,부호'라는 의미를 가지고있따. 이 태그는 xml요소 이름, 파일이름, 컴퓨터 프로그램 등 컴퓨터가 인식할 수 있는 것을 포함하여 기본 모노페이스 폰트로 표시된다.

<Pre>: Preformatted 텍스트라고도 하며 단어그대로 '미리 서식이 지정된 텍스트'라고 생각하면된다. 곧 <pre>태그안에 타이핑한대로 브라우저에 나타낼때 사용하는 요소이다.

[Example]: <pre>

int no=5;

int result=no+2;

자바 pre요소는 타이핑한대로

브라우저에 나타낼때 사용한다.

</code>

</pre>

<time>: 이는 time의 사전적 의미로 '시간, 표준시'라는 의미를 가지고있으며 통상적으로 시간과 날짜를 나타낼때 사용하는 요소이다.

[Example]: <div>

<base>: html <base>는 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정한다. 그러므로 문서에는 하나의 <base> 요소만이 존재할 수 있다.

[Example]: <li><base>태그는 문서의 모든 URL의 기본이 되는 기본 URL을 설정한다.</li>

<head>: html <head>는 기계가 식별할 수 있는 메타데이터를 담는다. 정보로 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있다.

[Example]: <head></head>를 사용함으로써 HTML5의 서두를 메인담당하는 태그이다.

<link>: html <link>는 현재문서와 외부 리소스관계를 의미한다. 보통 <link>는 CSS와 연결할때 가장많이 사용하지만, 사이트에서도 일부 연결이 가능하며 여러가지로 쓰일 수 있다. 따라서 이는 위에 바로 언급했던 <head>와 </head>사이에 넣고 아래와같이 사용할 수 있다.

[Example]: <link rel="colorsheet" type="text/css" href="sample.css/>

<meta>: html <meta> 에서는 base, link, script, style, title과같은 다른 메타관련요소로 나타낼 수 없는 metadata를 나타낸다. 이는 현재 페이지의 인코딩을 어떠한방식으로 출력할지 결정하는 태그이다 예를들면 아래와같이 사용될 수 있다.

[Example]: <meta http-equiv="content-Type" content="text/html; charset=UTF-8"/>

<style>: html <style>은 문서나 문서일부에 대한 스타일 정보를 포함한다. 따라서 사용법은 <img src="이미지주소"> 이런식으로 표현될 수 있다.

[Example]: <body>

</body>

<title>: html <title>는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 뜻한다.

[Example]: <!doctype html>

<html>

<head>

<title>TITLE HTML5</title>

</head>

</html>

다음으로는 구획루트에대하여 간략하게 요약해보려한다. html <body> 요소는 문서의 내용을 나타내는데 그 중에 한문서에 하나의 <body> 요소만 존재할 수 있다. 다음으로는 콘텐츠 구획이다. 먼저 콘텐츠 구획요소를 사용하면 문서의 콘텐츠를 논리적인 조각으로 체계화할 수 있다.

<address>: html <address>요소는 html요소의 사람, 단체, 조직등에대한 정보를 나타낸다.

[Example]: <footer>

Mapo-Gu, Seoul <br>

Tel:(010) 123-4567

</address>

</footer>

<article>: 문서나 페이지 어플 등 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.

[Example]: <article>

<h3>1월 1일 일정표</h3>

<h5>양호</h5>

</article>

<aside>:는 주요내용과 간접적으로만 연관된 부분을 나타내는데 이는 주로 사이드바 혹은 콜아웃박스로 표현하게된다.

[Example]: <article>

<aside>

"세상은 아름답다"

</aside>

</article>

<footer>: 가장 가까운 구획콘텐츠나 구획루트의 푸터를 나타내고 일반적으로 구획의 작성자, 저작권정보 등 내용을 담게된다.

[Example]: <html>

<body>

<footer>

</footer>

</body>

<h1>~<h6>: 총 6단계의 제목을 나타내며 여기서 <h1>이 가장 높고 <h6>가 가장 낮다고 보면된다.

[Example]: <h1>abcdefg</h1>

<h2>abcdefg</h2>

<main>: 주로 body의 주요콘텐츠를 나타낸다. 특히 <main>태그는 해당문서의 주 콘텐츠를 정의할 때 사용한다. 먼저 <main>요소의 콘텐츠는 중심되는 주제와 주요기능사이에 확장되는 콘텐츠로 구성되어야하며 이는 문서 전반에 반복되는 내용을 포함되서는 안된다. 특히 <main>요소는 <article>,<aside>,<header>,<nav>,<footer>요소의 요소가 되어서는 안된다.

<nav>: html<nav>요소는 현재페이지 또는 다른페이지로 잉크를 보여주는 구획을 한다. 조금 더 자세하게 풀이를 하면 즉 웹이라는 바다의 항해자를 위해, 길치를 퇴치하기위해 안내할 수 있는 네비게이션 링크(navigation links)태그이다. 이는 나침반처럼 HTML5버전이 출시되며 탄생하게되었다.

Example]: <html>

<body>

<nav>

<a href="#"> title </a>

</nav>

</body>

</html>

<section>: html<section>요소는 독립적인 구획을 나타내며 적합한 의미를 가질 요소가 없을 때 사용한다. 여기에 추가적으로 이미지와 멀티미디어 리소스를 조금 더 정리해보고자 한다. 특히, section 요소는 스타일을 적용하기위해 컨테이너 역할을 해서는 안된다. 예를들면 아래와 같이 정리해볼 수 있다.

[Exampe]: <!doctype html>

<html>

<body>

<section>

<h3>thankyou</h3>

<p>always thanks you</p>

</section>

</body>

</html>

<area>: 이미지의 핫스팟(Hotspot)의 영역을 정리하고 hyperlink를 추가할 수 있다. 다만, map요소 안에서만 사용가능하다.

[Example]: <area shape>="shape" coords="axis" href="URL" ...>

<img>: 문서에 이미지를 넣을때 사용가능하다. 여기에는 src 태그는 필수이며 포함하고자하는 이미지의 경로를 지정한다. 따라서 아래와 동일하게 예를들어볼 수 있다. Alt특성은 필수는 아니지만, 이미지를 설명하기위한 태그이므로 접근성차원에서 매우유용한 태그이다. 게다가 이미지를 표시할 수 없는경우나 네트워크오류 등의 문제에도 이 속성의 값을 보여준다.

[Example]: <img class="thanks"

src="/media/images/thanks35.jpg"

alt="grape">

<map>: area요로와 함께 이미지 맵(클릭 가능한 링크영역)을 정의할 때 사용가능하다.

[Example]: <map id="imgmap33242452" name="imgmap2392932">

<track>: 미디어요소(audio, video)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간기반데이터)를 지정할 때 사용가능하다.

[Example]: <video>

<source src="URL" type="타입">

<track src="URL" kind="텍스트트랙종류">

</video>

<video>: 비디오 플레이백 지원하는 미디어 플레이어 문서에 삽입. 이렇게 간략하게 일부를 정리해보았다. 다음편에는 html에 관한 조금 더 구체적인 언어와 내용을 정리해보려한다. 이렇게 정리하면서 나 또한 한가지 한가지씩 더 깊고 다양하게 다시한번 정리해볼 수 있음에 감사함을 느낀다.

[Example]: <video with="383px" height="423px" src="sample.mp4" controls></video>

<audio>: 문서에 소리 컨텐츠를 포함할 때 사용가능하다. Audio태그와 위에서 언급했던 Video태그는 HTML5에서 새로 나온 태그이다. 아래와같이 정리될 수 있다.

[Example]: <body>

<audio src="california.mp3" controls></audio>

</body>

'IT_웹개발언어 > IT·HTML' 카테고리의 다른 글

[IT·HTML+CSS] HTML5페이지 구조와 LANG 언어 속성/ 속성값 + 글자태그(1) (0)	2021.07.01
[IT·HTML+CSS] 웹의 역사:: 월드와이드웹(World Wide Web)을 자세히 파헤쳐보다. (0)	2021.07.01
[IT·HTML+CSS] HTML5 기본적인 태그(Tag) 입문과 속성 (0)	2021.07.01
[IT·HTML+CSS] HTML을 위한 VISUAL STUDIO CODE(비쥬얼스튜디오코드) 설치방법 (0)	2021.06.30
[IT·HTML+CSS] HTML(Hypertext Markup Language)ㅣ시장 Market (0)	2021.06.22

햇살아빠의 IT이야기