html에서 가장 많이 사용되는 태그 정리 head안에 속한 요소태그 meta, title등
body안에 속한 요소태그 h1~6, div, p, ul, ol, span, stong, img, a태그등을 설명
<!DOCTYPE>
문서 타입을 선언 합니다. html 또는 html 4.01 버전 또는 xhtml 1.0등 유형까지 표현할 수 있습니다.
Document Type Definition, 줄여서 DTD 선언이라고도 합니다.
<!doctype html>
<html>
html(Hyper Text Markup Language) 문서로 작성한다 선언
<html>
</html>
<head>
HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다.
head는 title 웹문서의 제목, CSS의 링크(HTML 컨텐츠를 CSS로 스타일링하기를 원한다면), 파비콘(favicon), 그리고 다른 meta 데이터(설명, 작성자, 중요한 키워드와 같은 HTML에 대한 내용)를 포함합니다. 그외 script 파일을 불러오거나 웹폰트 파일을 불러오는 link등이 head 사이에 삽입 됩니다.
<head>
<meta charset="UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>My Website</title>
</head>
<body>
body 태그는 문서의 본문을 선언 합니다. 웹문서 본문에는 텍스트, 하이퍼링크, 이미지, 표, 목록등의 HTML 문서가
작성되는 시작을 선언합니다.
<body>
내가 작성하는 문서 내용이 들어갈 공간
</body>
<!-- -->
주석 HTML 문서 작성중 메모가 필요한 부분에 사용
HTML 코드에서는 보이지만 출력된 웹페이지에서는 보이지 않습니다.
<!-- 메모할 내용 -->
<article>
article 요소는 독립적으로 사용되는 컨텐츠를 지정합니다.
보통 블로그글, 기사등의 한단락 한단락을 표현할때 영역을 묶어 주는 용도로 사용됩니다.
<article>
<h1>주제</h1>
<p>주제와 관련된 내용 설명</p>
</article>
<h1> - <h6>
h1 글의 대표 제목에서 부터 h6 작은 제목까지 정의하는 데 사용됩니다.
<h1>이것은 h1 tag 입니다.</h1>
<h2>이것은 h2 tag 입니다.</h2>
<h3>이것은 h3 tag 입니다.</h3>
<h4>이것은 h4 tag 입니다.</h4>
<h5>이것은 h5 tag 입니다.</h5>
<h6>이것은 h6 tag 입니다.</h6>
<P>
가장 많이 사용되는 태그중 하나로 글의 내용 설명이 삽입될 단락을 정의 합니다.
<p>
내가 쓰고 싶은 주제의 내용을 이곳에 작성 합니다.
</p>
<header>
header는 문서의 상단 부분 영역을 표현해 줍니다. 요소 안에는 일반적으로 H1~H6을 이용하여 문서의 제목, 주제등을 표현해 주는 상단 영역을 구분지어 줍니다. 아래 예제처럼 많은 컨텐츠의 상단을 정의하기도 하지만 한개만을 사용하여 문서 전체의 상단 글 영역을 정의 하기도 합니다.
<article>
<header>
<h1>주제</h1>
<h3>주제 요약</h3>
<p>주제에 대한 내용</p>
</header>
<p>단락의 내용설명등 블라블라....</p>
</article>
<footer>
문서의 바닥글을 정의 합니다.
회사명 연락처 주소등 회사정보 또는 저작권 표시등 다양한 정보를 하단 단락에 표현할때 사용하기도 하지만
여러 컨텐츠 영역의 하단에 사용되기도 합니다.
<footer>
<p>Posted by: foxrain</p>
<p>
Contact information:
<a href="mailto: mymail@example.com">mymail@example.com</a>.
</p>
</footer>
<adress>
주소와 연락처 정보를 정의합니다.
<address>
design by <a href="mailto: mymail@example.com">Hong Gil Dong </a>.<br>
주 소 : 서울시 강남구 논현동 안알랴줌...
</address>
<div>
div 태그는 body 문서 안에서 각 영역의 세션을 구분 정의 합니다. 많이 사용되며 매우 중요한 tag 입니다.
Layout 구조 틀을 만들고 CSS를 통해 위치 및 layer을 구분등 HTML요소의 컨테이너 역활을 합니다.
또한 javascript를 통해 특정 작업을 수행하고 여러 유형의 동적인 효과를 줄수도 있습니다.
<div>
<h3>제목</h3>
<p>단락 설명...</p>
</div>
<a>
a 태그 html문서의 핵심이라고 할 수 있습니다. html이란 하이퍼텍스트 언어로 만들어진 문서를 의미 합니다.
하이퍼 텍스트란 (hypertext) 간단히 설명한다면 개별 정보들을 링크를 사용하여 유기적으로 문서에서 다른 문서를 연결지어 주는것을 의미합니다.
<a href="https://www.google.com">구글로 이동</a>
<img>
img 태그 HTML 문서의 이미지를 정의 합니다.
이미지의 폴더 경로와 파일명을 입력하여 이미지를 서버에서 또는 특정한 저장공간에서 불러와 보여 줍니다.. 하이퍼 링크를 추가하여 클릭 가능한 영역으로 만들어 주기도 합니다.
<img src="../images/hello.jpg" alt="안녕하세요" />관련정보
<br>
br 태그는 HTML 문서의 줄바꿈 역활을 합니다.
태그의 마지막에 "/"을 넣는 것은 img, br 태그처럼 열고 닫는 태그를 따로 정의하지 않는 단독 태그들의 경우 사용됩니다.
안녕하세요<br/>
반갑습니다<br/>
또 만났네요<br/>
HTML br태그 입니다.<br/>
<span>, <strong>, <strike>
텍스트의 일부 요소들의 정의, 강조, 색칠, 간격, 취소선등을 사용할때 이용됩니다.
span 일반적으로 텍스트에 색칠, 크기, 좌우간격을 조절하는데 사용됩니다.
strong 텍스트에서 강조하는 부분의 글자에 사용됩니다.
strike 취소선 텍스트에 사용됩니다.
<span style="color: blue;">전화번호가</span><br/>
<strike>02-123-1234</strike>에서<br/>
<strong>02-321-4321</strong>로 변경 되었습니다.
<ul>, <ol>
ul, ol 태그는 목록을 만들때 사용합니다. 반드시 li 태그와 함께 사용됩니다.
순서가 없는 목록을 만들려면 "ul", 순서가 있는 목록을 만들때는 "ol"을 사용합니다.
<ul>
<li>커피</li>
<li>우유</li>
<li>음료수</li>
</ul>
<ol>
<li>아메리카노</li>
<li>카프치노</li>
<li>카페 라떼</li>
</ol>
<dl>
dl 태그는 문서 안에서 용어 및 설명이 포함되는 설명 목록에 사용됩니다.
dt는 용어의 정의 그리고 dd는 용어의 설명을 함께 사용합니다.
<dl>
<dt>강아지</dt>
<dd>아이고 주인님</dd>
<dt>고양이</dt>
<dd>집사야 밥!</dd>
</dl>
<table>
table 태그는 표를 만들때 사용되며 기본 tr과 td와 함께 쓰이며 추가로 th, tbody, tfooter와 colgroup의 col을 이용하여 열에 대한 속성을 정의하기도 합니다. 본문은 기초 설명이므로 th, tr, td를 이용한 간단한 표 예제만 보여 드립니다.
예) 두개의 열과 세개의 행을 포함한 표를 작성합니다.
<table>
<tr>
<th>날짜</th>
<th>계획</th>
</tr>
<tr>
<td>01월 01일</td>
<td>HTML 기초공부</td>
</tr>
<tr>
<td>01월 02일</td>
<td>CSS 기초공부</td>
</tr>
</table>
지금까지 아주 기초적인 태그들만 나열하여 설명해 드렸습니다.
처음부터 많은 것을 습득하기는 어렵습니다. 천천히 하나씩 학습하고 사용하다 보면 언젠가 내가 원하는 다양한 웹문서를 제작하실 수 있습니다.
그밖에 form 데이터와 관련된 태그 및 frame관련 태그는 다음글에서 설명하도록 하겠습니다.
'[IT] HTML & CSS' 카테고리의 다른 글
| html 특수 문자 코드 표 (0) | 2019.12.29 |
|---|---|
| html img 이미지 가져오기 절대경로와 상대경로 (3) | 2019.12.29 |
| CSS란 무엇인가? HTML 기초 (0) | 2019.12.28 |
| HTML이란 무엇인가요? (0) | 2019.12.28 |
| CSS Scrollbar 스크롤바 꾸미기 색상 바꾸기 변경 방법 (0) | 2019.12.28 |
댓글