HTML5
- HTML 문서는 요소(element)와 태그(tag), 컨텐츠(contents)로 구성되어 있다.
- 요소는 HTML의 의미를 가진 개념이라고 할 수 있다.
태그 (tag)
- 시작태그와 종료태그로 나눌 수 있다.
- '<' 와 '>' 로 둘러싸여 있다.
- 기본형식은 시작태그 <tag>의 형태를 가지며, 종료태그는 </tag> 형태를 가진다.
- 일부 태그의 경우 종료 태그를 가지지 않는 경우도 있다. 이를 빈 요소(empty element)라고 한다.
<p>HTML 이란 무엇인가? <br> HTML5 </p>
<!-- <p> : 시작 태그
<br> : 빈 요소
</p> : 종료 태그 -->요소 (element)
- 시작 태그와 종료 태그 모두를 포함하여 요소라고 한다.
<p>HTML 이란 무엇인가? <br> HTML5 </p>
<!-- 위 전체를 요소라고 한다. -->
- HTML5는 종료 태그를 생략할 수도 있다.
- 모든 요소가 종료 태그를 생략할 수 있는 것은 아니다.
- 주의 - 종료 태그를 생략할 수 있는 요소를 확인해야 한다.
<img src="images/front.jpg"> OK
<img src="images/front.jpg"/> OK
- HTML5는 시작 및 종료 태그는 물론 속성에 대문자 또는 소문자를 사용할 수 있다.
- 소문자를 사용할 것을 권장한다.
<img SRC="images/front.jpg"/> OK
<img src="images/front.jpg"/> OK빈 요소 (empty element)
- 종료 태그를 가지지 않는 요소.
- <link>, <meta>, <br>, <input>, <img> 등.
속성 (attribute)
- 시작 태그는 필요에 따라 정해진 속성을 가질 수 있다.
- 시작 태그 내에 여러 개의 속성을 선언할 수도 있다. 이 경우 속성과 속성은 공백으로 구분하여 지정한다.
- 속성에는 값을 가지지 않는 논리 속성도 있다.
<input type="text" id="user" required>
<!--
type, id 속성
required 논리속성
-->
- 속성 값은 인용 부호를 생략하거나 홀따옴표와 겹따옴표를 사용하여 구분할 수 있다.
<img src=images/front.jpg/> OK
<img src='images/front.jpg'/> OK
<img src="images/front.jpg"/> OK
- 시작 태그와 종료 태그가 중첩되지 않도록 해야 한다.
<p><strong>태그 중첩 사용</p></strong> X
<p><strong>태그 중첩 사용</strong></p> OK
- 시작 태그에 똑같은 속성을 중복하여 선언할 수 없다.
<p style="color:blue" style="height:28px">속성 중복 사용</p> X
<p style="color:blue height:28px">속성 중복 사용</p> OKHTML5 요소
<html> 요소
문서의 루트 요소로, 모든 HTML 요소는 루트 요소 내에 포함되어야 한다.
<head> 요소
문서의 메타데이터 집합 요소로, 문서 제목, 스타일 파일 연결, 자바 스크립트 삽입을 위한 요소들을 포함할 수 있다.
<body> 요소
문서의 본문 요소로, 문서 내에서 한 번만 사용할 수 있다.
<title> 요소
문서의 제목으로 텍스트만 포함할 수 있다.
<meta> 요소
다양한 문서 정보를 나타낼 때 사용한다.
<style> 요소
css를 문서 내에서 직접 기술할 때 사용한다.
<link> 요소
문서에 외부 문서를 연결할 때 사용한다.
<script> 요소
문서에 java script 파일을 삽입하거나, java script 코드를 기술할 때 사용한다.
<section> 요소
장 또는 절 등으로 구성할 수 있는 콘텐츠 섹션을 정의할 때 사용한다.
<nav> 요소
문서의 주요 내비게이션을 정의할 때 사용한다.
프로그램의 메뉴.
<header> 요소
페이지나 섹션 등의 헤더를 정의할 때 사용한다.
<footer> 요소
페이지나 섹션 등의 푸터를 정의할 때 사용한다.
<address> 요소
연락처 정보를 정의할 때 사용한다.
<h1> ~ <h6> 요소
콘텐츠 블록의 제목을 정의할 때 사용한다.
<div> 요소
콘텐츠 블록을 그룹화 하고자 할 때 사용한다.
<p> 요소
단락 콘텐츠를 정의할 때 사용한다.
<ul> 요소
비 순서형 목록을 마크업 할 때 사용한다.
<ol> 요소
순서형 목록을 마크업 할 때 사용한다.
<li> 요소
순서형 또는 비순서형 목록의 목록 항목을 정의할 때 사용한다.
<dl> 요소
정의형 목록을 마크업 하고자 할 때 사용한다.
<dt> 요소
정의형 목록의 용어 제목을 의미한다.
<dd> 요소
정의형 목록의 용어 설명을 의미한다.
<!-- -->
주석
<hr> 요소
단락의 주제를 구분하고자 할 때 사용한다.
<a> 요소
하이퍼링크를 지정할 때 사용한다.
<em> 요소
텍스트를 강조하고자 할 때 사용한다.
<strong> 요소
특별히 중요한 콘텐츠의 의미를 부여하고자 할 때 사용.
<i> 요소
이탤릭체로 나타낸다.
<b> 요소
볼드체.
<mark> 요소
텍스트를 하이라이트로 지정하고자 할 때 사용.
<small> 요소
저작권 정보 등과 같이 작은 크기의 텍스트 콘텐츠에 사용.
<sup>, <sub> 요소
윗첨자, 아래첨자를 정의할 때 사용.
<br> 요소
줄바꿈을 하고자 할 때 사용.
<img> 요소
이미지를 삽입할 때 사용.
<thead> 요소
테이블의 제목 행을 정의할 때 사용.
<tbody> 요소
테이블의 본문 행을 정의할 때 사용.
<tfoot> 요소
테이블의 푸터 행을 정의할 때 사용.
<tr> 요소
테이블의 행을 정의할 때 사용.
<th> 요소
테이블의 제목 셀을 정의할 때 사용.
<td> 요소
테이블의 내용 셀을 정의할 때 사용.
<span> 요소
인라인 텍스트를 그룹화할 때 사용.
<form> 요소
폼 서식이 포함될 영역을 마크업할 때 사용.
<input> 요소
한 줄 입력상자, 라디오 버튼, 체크 박스 등 다양한 폼 서식을 마크업할 때 사용.
<button> 요소
전송, 취소 등 버튼 서식을 삽입할 때 사용.
<select> 요소
리스트나 목록 상자로 된 서식을 삽일할 때 사용.
<optgroup> 요소
리스트나 목록 상자 서식의 항목 그룹을 정의할 때 사용.
<option> 요소
리스트나 목록 상자 서식의 항목을 정의할 때 사용.
<textarea> 요소
여러 줄 입력 상자를 삽입할 때 사용.
<output> 요소
계산 결과 값을 출력하기 위한 폼 서식을 삽입하고자 할 때 사용.
< 는 < (꺽쇠 표시)
> 는 > (꺽쇠 표시)
'Language > HTML' 카테고리의 다른 글
| [HTML] 단락(Paragraph) (0) | 2022.09.16 |
|---|---|
| [HTML] 제목(Heading) (0) | 2022.09.16 |
| [HTML] HTML(Hyper Text Markup Language) Tag Sheet (0) | 2022.09.13 |
| [HTML] HTML5의 기능 (0) | 2022.06.21 |
| [HTML] HTML 태그 간단 정리 (0) | 2022.06.19 |