4. HTML5 기본 구조 및 문법의 기초
1) HTML5 엘리먼트의 정의와 특징
● HTML5 엘리먼트의 정의
- HTML 문서의 구성요소 중 하나로 시작태그와 종료태그로 이루어진 모든 명령어들을 의미함
● 엘리먼트 구문의 특징
- 하나의 HTML 엘리먼트는 시작 엘리먼트로 시작하고, 종료 엘리먼트로 끝남
- 일부 HTML엘리먼트는 빈 콘텐츠를 가질 수 있음
- 빈 엘리먼트는 시작태그로 종료
- 대부분의 엘리먼트는 속성을 가짐
- 대부분의 엘리먼트는 중첩이 가능
2) 엘리먼트와 태그
|
엘리먼트 |
태그 |
|
HTML을 문서 형식으로 구성할 때 의미를 표현하는 약속된 단어들 |
부등호 기호(<>)로 둘러싸인 엘리먼트의 조합을 부르는 이름 |
|
Ex) p엘리먼트는 paragraph(문단)에서 img 엘리먼트는 image(이미지)의 뜻을 가진 엘리먼트임 |
Ex) <p>, <img>를 부를 때는 'p' 태그, 'img' 태그라고 함 |
3) 엘리먼트의 종류
● 블록 레벨 엘리먼트
- 항상 새로운 줄로 줄 바꿈 하여 표시하는 요소
- 너비 값은 브라우저 화면에 100% 꽉 차게 표시됨
● 인라인 레벨 엘리먼트
- 같은 줄 안에서 이어서 표시됨
- 너비 값은 요소가 가지고 있는 값 자체로 표시됨
● 블록 레벨 엘리먼트와 인라인 레벨 엘리먼트의 실습 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
해당문서는 xhtml의 형식을 따라서 작성했다는 뜻이다.
<html xmlns="http://www.w3.org/1999/xhtml">
html인데 소스는 xhtml에서 가져와라 라는 뜻이다.
<head>
<meta http-equiv="Content-Type" content="text.html; charset=utf-8" />
내 요청의 컨텐츠(content) 타입은 html이고 문자셋은 utf-8이다
<title> 무제 문서 </title>
</head>
<body>
<p>문단1</p><p>문단2</p>
<em>강조1</em><em>강조2</em>
</body>
<html>
- Tip!!! -
AcroEdit에서 글을 작성한 후 마우스로 드레그를 하면 작성한 글자 수만큼 드레그가 된다.
여기서 Alt + C를 하면 제일 긴 블록과 제일 작은 블록만큼의 영역이 드레그가 된다.
여기서 Shift키 + 방향키를 이용해서 블록의 길이를 설정할 수 있다.
드레그된 블럭 내에서 작성하고 싶은 것을 타이핑 하면 모든 행에 글자가 타이핑 된다.
FTP는 파일 전송 프로토콜이다
File Transport Protocol
4) 추가 및 삭제된 HTML5 엘리먼트
● 삭제된 엘리먼트
|
<big> |
큰 글씨 |
<acronym> |
두문자어 |
|
<center> |
중앙 정렬 |
<appletr> |
애플릿 |
|
<dir> |
파일 목록 |
<basefont> |
기본서체 |
|
<font> |
글씨 모양 |
<frame> |
프레임 |
|
<tt> |
타이프체 |
<frameset> |
프레임 셋 |
|
<u> |
밑줄 |
<noframes> |
프레임 미지원 |
|
<xmp> |
형식화 된 |
<strike> |
가로줄 |
● 추가된 엘리먼트
article, aside, audio, bdi, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, outer, progress, rp, rt, ruby, section, source, summary, time, track, video, wbr
2. HTML5 시맨틱 태그
1) 시맨틱 태그란?
● 시맨틱 태그 : 태그 이름만 보고도 역할을 짐작할 수 있는 태그
● 시맨틱 태그를 사용하는 이유
- 검색 엔진에서 쉽게 웹 문서의 내용 검색
- 웹 보조 기구에서 웹 문서를 정확하게 판독
- 어떤 장치에서나 똑같은 문서 해석이 가능
2) HTML5 시맨틱 태그 실습
● <h> 태그 : 제목을 나타내는 태그로 <h1> ~ <h6>까지의 범위를 가짐
<head>
<h1>HTML5 시맨틱 태그 알아보기!! </h1>
</header>
<nav>
<h2> 시맨틱 태그란 무엇인가? </h2>
<h3> 시맨틱 태그 왜 사용해야 하는가? </h3>
<h4> 시맨틱 태그 어떻게 사용할 수 있는가? </h4>
</nav>
● <ol> 태그 : 순서 있는 목록을 만드는 태그로 목록 앞에는 숫자 이외에도 알파벳이나 로마숫자로 나타낼 수 있음
<ol>
<li> 하나 </li>
<li> 둘 </li>
<li> 셋 </li>
</ol>
● <ul> 태그 : 순서 없는 목록을 만드는 태그
<ul>
<li> 바나나 </li>
<li> 사과 </li>
<li> 딸기 </li>
</ul>
실습예제1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제문서</title>
</head>
<body>
<p>문단1</p><p>문단</p>
<em>강조1</em><em>강조2</em>
</body>
</html>
실습예제2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</header>
<body>
<header>
<nav>
<h2> 시맨틱 태그란 무엇인가? </h2>
<h3> 시맨틱 태그 왜 사용해야 하는가? </h3>
<h4> 시맨틱 태그를 어떻게 사용할 수 있는가? </h4>
</nav>
<article>
<section>
<ol>
<li> 하나 </li>
<li> 둘 </li>
<li> 셋 </li>
</ol>
</section>
<section>
<ul>
<li> 바나나 </li>
<li> 사과 </li>
<li> 딸기 </li>
</ul>
</section>
<section>
<table border="1">(표의 선 굵기를 1로하라)
<tr>(tr은 행을 뜻한다)
<th>과목명</th>(th는 컬럼명을 뜻한다)
<th>시험점수</th>
</tr>
<tr>
<td>영어</td>(td는 데이터를 그냥 넣는다는 뜻이다)
<td>90점</td>
</tr>
<tr>
<td>수학</td>
<td>89점</td>
</tr>
</table>
</section>
</article>
<br>
<footer> Copyright © 2014 All rights reserved. </footer>
</body>
</html>
'Legend 개발자 > HTML5' 카테고리의 다른 글
| No.006 시맨틱 태그 - 입력양식 및 공간분할 [2017-05-15] (0) | 2017.05.15 |
|---|---|
| No.005 시맨틱 태그 - 이미지, 비디오, 오디오 [2017-05-12] (0) | 2017.05.12 |
| No.003 HTML5와 HTML4.01의 차이 [2017-05-12] (0) | 2017.05.12 |
| No.002 HTML5 기초 [2017-05-11] (0) | 2017.05.11 |
| No.001 HTML5 개요 [2017-05-11] (0) | 2017.05.11 |