HTML 프로그램 기초용어에 대해 알아보고 정리하는 시간을 가집니다. HTML은 어렵지 않게 웹페이지를 제작해볼수 있는 웹페이지의 뼈대같은 프로그램 개발 툴 입니다. 웹개발을 꼭 하지 않는다고 해도 블로그를 운영해도 한번씩 부딪히게 되는데요. 이 티스토리도 실제 html로 코드가 이루어져 있습니다. 블로그를 운영해도 검색엔진들은 모두 이 HTML코드에 접근하여 우리가 작성하는 사이트나 포스팅의 내용을 수집합니다. 여기서 검색엔진들이 이 html 코드를 분석하여 사이트의 상태를 확인해 상위에 노출시켜줄지 말지를 결정 합니다.
결국 블로그를 운영하시는 분들 입장에서도 이런 SEO에 대한 개념을 이해하기 위해 HTML 코드의 기본적인 분석은 필요 합니다.
이제 어떤 태그가 있는지 확인해볼까요?
목차
1. HTML 기본태그
2. HTML 시멘틱 태그
1. HTML 기본 태그
1) <html> , </html>
웹페이지의 시작과 끝을 알려 줍니다.
2) <head> , </head>
웹페이지의 외부파일들을 링크할때 사용 됩니다. <head> , </head> 사이에 선언해주면 자동으로 전체 웹페이지에 모두 반영되어 적용 됩니다.
3) <title> , </title>
웹문서의 타이틀 입니다. 이영역안에서 웹문서의 타이틀을 입력하면 됩니다. 아래예제에서 문서의 제목을 확인해봅니다.
<html lang="ko">
<head>
<title>HTML 문서의 제목 </title>
</head>
</html>
4) <body> , </body>
웹 브라우저에 화면에 표시되는 내용을 담고 있습니다. 이미지와 리스트, 문서의 텍스트를 포함 합니다. 아래 예제에 body 태그의 위치와 사용법을 확인해 보세요.
<html lang="ko">
<head>
<title>HTML 문서의 제목 </title>
</head>
<body>
HTML 문서의 콘텐츠 영역입니다.
</body>
</html>
5) <meta> , </meta>
웹문서의 메타 정보를 저장합니다. <meta> 요소는 <base>, <link>, <script>, <style>, <title> 요소들이 표현할 수 없는 영역의 것들을 표현해야 할때 사용됩니다. 이렇게 정의해 두면 다른 웹 브라우저나 검색 엔진, 다른 웹 서비스에서 사용하게 됩니다. HTML에서는 meta 태그를 닫지 않지만 XHTML에서는 메타태그를 닫아야 합니다.
아래 예는 웹페이지의 author의 메타값을 Man으로 정의한 예제 입니다.
<head>
<meta charset="UTF-8">
<meta name="author" content="Man">
<title>HTML meta tag</title>
</head>
6) <div>, </div>
웹페이지의 구획을 나누는 기능을 합니다. CSS에서 여러요소를 하나로 묶거나, HTML에서 레이아웃을 나누어주는 역할을 합니다. 아래예제에서 확인 해봅니다.style에서 백그라운드 컬러를 빨간색으로 하고 문자 스타일을 이탤릭으로 한 예제 입니다. 퇴근후 소주 한잔의 문장에만 스타일이 적용 됩니다.
<style>
div {
background-color: red;
font-style: italic;
}
</style>
<p>
HTML을 배워서 다양한 코딩을 하자.
</p>
<div>
<p>
퇴근후 소주 한잔.
</p>
</div>
<p>
잠이나 잘련다.
</p>
7) span
Span태그는 div와 유사하지만 구획을 나누는 방식이 div는 블록단위로 묶는데 반해 span은 인라인 요소로 묶어 줍니다.
<style>
.word { background-color: orange; font-style: italic; }
</style>
<p>
오늘은 귀찮아.
</p>
<p>
<span class="word">
구글 </span> 회사에서 <span class="word">피자</span>나 먹어야지!!
</p>
<p>
하지만 야근...
</p>
8) <a> , </a>
웹문서의 hyper link 기능을 이용하여 다른 페이지로 이동하게 해줍니다.
<a href="https://developer-depot.tistory.com/">기록보관소로 이동!</a>
9) <script> , </script>
자바스크립트와 같은 클라이언트 측 코드를 실행할때 사용합니다. 구글 애드센스 광고 단위 코드도 이런 방식으로 제공 됩니다.
<script type="application/javascript">
document.getElementById("para").innerHTML = "자바스크립트가 실행되었습니다.!";
</script>
10) <link> , </link>
link는 주로 외부 스타일 시트를 연결할때 사용합니다.
<head>
<link rel="stylesheet" type="text/css" href="/examples/media/expand_style.css">
</head>
11) <img> , </img>
웹문서에 이미지를 정의할때 사용할 수 있습니다.
<img src="/examples/images/img_monalisa.png" alt="고흐">
12) <p> , </p>
웹문서의 문단을 정의할때 사용됩니다. 블로그에서 글을쓰다가 엔터를 치면 자동으로 이 코드가 html에 적용됩니다.
<p>1 문단 입니다.</p>
<p>2 문단 입니다.</p>
<p>3 문단 입니다.</p>
13) <li> , </li>
웹문서의 리스트를 정의합니다.
순서가 없는 리스트의 경우
<ul>
<li>바나나</li>
<li>아이스</li>
<li>카라멜</li>
</ul>
순서가 있는 리스트의 경우
<ol>
<li>모자</li>
<li>옷</li>
<li>가방</li>
</ol>
14) <ul> , </ul>
순서가 없는 리스트를 정의 합니다. li 태그 예제 참조
15) <ol> , </ol>
순서가 있는 리스트를 정의 합니다. li 태그 예제 참조
16) <style> , </style>
HTML의 스타일을 정의하는데 사용합니다. 일반적으로 css와 연동하여 사용됩니다. 외부 스타일을 사용하는 경우에는 link 태그와 함께 사용합니다.
<head>
<style>
body { background-color: pink }
p { text-decoration: underline; }
</style>
</head>
17) <br>
종료태그가 없습니다. 문장의 줄바꿈을 할때 적용합니다.
<p>
천재는 죽지 않는다.<br>
다만 모습을 드러내지 않을 뿐 ,<br>
빨리 집에 가야지.
</p>
18) <h1> , </h1> ~ <h6> , </h6>
웹페이지의 제목과 소제목을 정의합니다.
<h1>이 텍스트는 h1 요소를 사용한 제목입니다.</h1>
<h2>이 텍스트는 h2 요소를 사용한 제목입니다.</h2>
<h3>이 텍스트는 h3 요소를 사용한 제목입니다.</h3>
19) <form> , </form>
<form> 태그는 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용합니다.
다양한 요소들을 넣어서 정의할 수 있습니다. 일반적으로 아래와 같습니다.
<button>
<fieldset>
<input>
<label>
<option>
<optgroup>
<select>
<textarea>
20) <input>
<input> 태그는 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용합니다. 빈태그로써 속성값만을 사용할 수 있습니다. 대부분 form 태그와 연동하여 사용됩니다.
<form action="/examples/media/action_target.php" method="get">
나이 : <input type="text" name="st_age"><br>
별명 : <input type="text" name="st_nickname"><br>
번호 : <input type="text" name="id"><br>
<input type="submit"> </form>
21) <iframe> , </iframe>
<iframe> 태그는 인라인 프레임(inline frame)을 정의할 때 사용합니다.
22) <strong> , </strong>
일반적으로 굵은 폰트로 강조할때 사용합니다.
<p><strong>경고!</strong> 아래를 조심하세요.!</p>
23) <i> , </i>
문자를 이탤릭체로 강조 합니다.
<p><i>경고!</i> 아래를 조심하세요.!</p>
24) <button> , </button>
웹문서에 버튼을 삽입할때 사용합니다.
<button type="button" onclick="alert('OOPS!')">누르세요!</button>
2. HTML시멘틱 용어
1) <header> , </header>
특정섹션의 헤더를 정의하는경우 사용됩니다.
<article>
<header>
<h3>기상 정보</h4>
<h4>2월 19일</h4>
<p>- 기상청 제공 -</p>
</header>
<p>제주 : 맑음</p>
<p>공주 : 흐림</p>
<p>진주 : 비</p>
</article>
2) <nav> , </nav>
웹페이지의 네비게이션 링크를 제공합니다. 링크의 집합을 나타냅니다.
<nav>
<a href="/html/intro">HTML</a> |
<a href="/css/intro">CSS</a> |
<a href="/javascript/intro">JavaScript</a>
</nav>
3) <section> , </section>
HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용합니다. 제목과 관련된 태그 h태그를 많이 포함합니다.
<section>
<h1>
HTML 은 무엇인가?
</h1>
<p>
웹 페이지를 위한 마크업 언어이다. HTML(HyperText Markup Language)은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미이다.
</p>
</section>
<section>
<h1>
HTML의 역사
</h1>
<p>
HTML역사를 배워보자.
</p>
</section>
4) <summary> , </summary>
<summary> 태그는 <details> 요소에 의해 생성되는 대화형 위젯에서 기본적으로 보이는 제목을 정의할 때 사용합니다. <summary> 요소는 반드시 <details> 요소의 제일 처음에 와야 하며, 이 제목을 마우스로 클릭함으로써 <details> 요소를 보이도록 할 수도 있고 숨길 수도 있습니다. <details> 는 사용자가 직접 조작하여 보거나 숨길 수 있는 추가적인 기능을 제공합니다. 숨기기 펼치기 기능 입니다.
<details>
<summary>
오늘의 메뉴
</summary>
<ul>
<li>
된장찌개 : 9000
</li>
<li>
김치찌개 : 10000
</li>
<li>
청국장 : 11000
</li>
</ul>
</details>
5) <footer> , </footer>
<footer> 태그는 문서의 하단부에 들어갈 내용을 정의 합니다.
푸터(footer)는 보통 <footer> 요소가 포함되어 있는 문서나 섹션에 대한 아래와 같은 정보를 포함합니다.
- 작성자 정보
- 현재 날짜 정보
- 저작권 명세
<footer>
<p>
date: 20xx. xx. xx. monday
</p>
<address>
https://developer-depot.tistory.com/
</address>
</footer>
HTML에서 자주 사용하는 태그 위주로 정리 해보았습니다. 많은 태그가 있지만 그중에서도 많이 쓰는 것들 위주로 작성을 했습니다. 앞으로 좀더 많은 내용을 다루어 보겠습니다.
'프로그래밍' 카테고리의 다른 글
| C#을 활용한 시리얼 컴포트(comport) 콤보박스에 띄우기 (0) | 2022.10.20 |
|---|---|
| C# 문자열 처리 substring 메서드 사용하는 방법 및 응용 예제 (0) | 2022.08.27 |
| 앱개발 앱 아이디어 얻는 방법 (0) | 2022.07.07 |
| 안드로이드 앱 개발 및 수익화 방안 (0) | 2022.06.26 |
| [시리얼 통신] C#을 활용한 시리얼 통신 모니터링 프로그램 만들기 (1) | 2022.04.02 |
댓글