HTML #1
현재 우리가 사용하고 있는 HTML5(Hyper Text Markup Language 5)는 웹 브라우저에 표현되는 콘텐츠를 작성하기 위해 고안된 차세대 웹 표준 ‘마크업 언어’로써, 브라우저의 자체 해석, ActiveX 설치 등 비표준으로 혼재되어 왔던 웹 문서 기술에 표준화를 가져왔다.
HTML 특징
1.
간단한 DYD 선언(<!DOCTYPE html>)을 지원.
2.
기존의 HTML 문서와 호환할 수 있음.
3.
편리한 폼 기능을 제공하여 유효성 검증 시간이 절약됨.
4.
컴퓨터 시스템, 운영체제, 전자 기기에 상관없이 지원할 수 있음.
5.
시맨틱 웹 기술을 지원하여 의미있는 문서 구조 표현을 할 수 있음.
6.
표준 코덱 내장으로 별도의 플러그인 없이 멀티미디어를 재생함.
구성요소
1.
시작 태그: HTML5 요소를 ‘<‘와 ‘>’로 둘러싼 표현으로 요소의 시작을 의미.
2.
속성: 태그의 구체적인 설정 사항을 의미.
3.
인수: 속성에 실제 적용될 값을 의미.
4.
내용: 브라우저에 나타날 실제 내용으로 텍스트, 이미지, 멀티미디어 등을 의미.
5.
종료 태그: HTML5 요소를 ‘</‘와 ‘>’로 둘러싼 표현으로 요소의 마지막을 의미하며 생략하는 경우도 있음.
기본구조
HTML5 문서는 태그들의 집합체로 구성된 일반적인 텍스트 파일. 웹 브라우저에서 읽어 들이면 서식이 있는 문서로 해석되어 실행되므로, 빈 화면이라 하더라도 기본 구조로 작성된 문서가 있어야 함.
기본 구조는 다음과 같음.
<!DOCTYPE html>
<html lang=“ko">
<head>
<title>HTML5</title>
<meta charset = “utf-8”
/>
</head>
<body>
<p>HTML5
Document</p>
</body>
</html>
위 코드를 저장하고 Chrome 브라우저에 올린 모습
상단 탭에는 title이, 본문에는 body 태그 안에 넣은 내용이 보이는 것을 볼 수 있음. 코드를 설명하면 다음과 같음.
<!DOCTYPE
html>: 문서의 타입을 선언. HTML5 문서라는 것을 알려 표준 모드로 작동하도록 지정.
<html>, </html>: HTML5 문서의 시작과 종료를 선언. 유일한 속성으로 lang이 있는데, 문서의 주요 내용이 어떤 언어인지 표시. ‘ko’는 한국어임을 의미.
<head>, </head>: 웹페이지의 머리글을 나타내는 부분으로 title, meta, link, script, style 태그를 포함.
<title>, </title>: 웹 브라우저 상단의 웹 페이지 제목을 나타냄.
<meta />: 웹 브라우저에게 문서 작성자, 문서 형식, 문서 인코딩 방식 등의 문서 정보를 알려줌. Charset 속성으로 문자 인코딩을 정의하며, 속성값은 주로 국제 표준 코드인 ‘utf-8’을 채택함. 종료 태그가 없는 홑 태그.
<body>,
</body>: 웹 브라우저를 통해 나타나는 웹 페이지의 모든 내용을 기술하는 부분. 본문 요소는 사용되는 성격에 따라 블록 요소, 인라인 요소, 시맨틱 구조 요소 등으로 나눌 수 있음.
HTML의 기본 문법
1.
일반적으로 시작 태그와 종료 태그로 쌍을 이루어 사용.
2.
태그는 대소문자를 구분하지 않음.
3.
홑 태그는 종료 태그 없이 사용할 수 있음.
4.
주석 글은 기호 ‘<!—‘와 ‘—>’사이에 작성.
5.
띄어쓰기는 빈 공백 하나만 인식하고 둘 이상의 공백은 무시.
6.
브라우저에서 인식되지 않는 태그나 오류는 무시하고 실행하지 않음.
7.
HTML5 문서는 텍스트파일로 *.htm 혹은 *.html로 저장.
문단 관련
1.
<br>
- 문단에서 줄 바꿈 기능을 하며 종료 태그가 없는 홑 태그. 여러 줄을 띄우고자 하면 해당 줄 수 만큼 반복하여 작성.
2.
<p>
- 문단을 나누고 한 줄의 여백을 띄어 줌.
3.
<pre>
- 문서 내용에 편집되어 있는 모든 여백, 탭, 줄 바꿈 모양 그대로 보여줌.
4.
<hr>
- 주제 변경, 내용 구분 등 웹 페이지의 문단을 구별하는 용도로 수평선 줄을 삽입하여 종료 태그가 없는 홑 태그.
5.
<span>
- 문장 내 일정 부분에 텍스트 색상 변경 등의 특정 스타일을 지정하는 인라인 태그.
6.
<div>
- 높이와 너비를 가진 독립된 영역을 만들어 웹 페이지 화면에 블록 구조를 표현한다. 이는 블록 구조에 의해 화면이 분할된 것을 의미.
<!DOCTYPE html>
<html lang = "ko">
<body>
<h2>==Paragraph
Tag==</h2>
<p>p: 문단 나눔</p>
br: 줄 바꿈<br/>
hr:
문단을 나눠 주는 용도로 수평선 줄 긋기<hr
/>
<div
style="background-color:skyblue;">div: 블록에 하늘색 배경 스타일 지정</div>
<p style
="color:red;">빨간색 글씨 사이에 <span
sytle="color:blue;">파란색 글씨</span>
를 넣을때는 span을 사용</p>
<pre>
엥 엥? 엥
엥 엥 엥
</pre>
</body>
@ 블록요소, 인라인요소, 시맨틱 구조 요소
|
구분
|
블록 요소
|
인라인 요소
|
시맨틱 구조 요소
|
|
의미
|
하나의 독립된 영역을 가진 요소
|
독립된 영역 없이 한 줄에 작성되는 요소
|
의미를 가진 문서 구조를 생성하는 요소
|
|
특징
|
-
자동 줄 바꿈이 실행됨
-
블록 내에 텍스트와 인라인 요소를 포함할 수 있고 블록 간에는 여백이 주어짐
-
경우에 따라 또 다른 블록 요소를 포함할 수 있음
|
-
줄 바꿈과 여백 기능이 없음
-
인라인 요소 내에 텍스트와 또 다른 인라인 요소를 포함할 수 있음
-
인라인 요소 내에 블록 요소를 포함할 수 없음
|
-
블록 요소의 성격을 지님
-
사용자 뿐만 아니라 검색 엔진도 더욱 정확하고 신속하게 의미를 파악하고 검색할 수 있다.
|
|
해당 요소
|
div, hr, h1~h6, ul, ol, dl, li, p, address,
blockquote, from, table 등
|
a, detail, em, i, img, mark, q, strong, span, time 등
|
header, footer, article, aside, nav, section 등
|
텍스트 관련 태그
1.
<h(n)>
- 제목을 표현. 6단계(n=1~6)의 계층으로 구분.
2.
<abbr>
- 축약어를 표현. 축약어 위에 마우스가 위치하면 title 속성에서 지정한 원래 단어를 표시
3.
<meter>
- 알려진 범위 내에서 무게, 점수, 수량, 백분율 등의 측정된 값을 그래픽 형태로 표현할 때 사용. value는 필수 속성으로 현재 측정값을 지정
4.
<time>
- 날짜와 시간을 지정, 작성된 날짜의 텍스트 표현을 사람뿐만 아니라 기계가 알아볼 수 있도록 하는 시맨틱 태그. 실제 날짜와 데이터는 datetime
속성에 지정
5.
텍스트 효과
- 텍스트에 강조, 기울임, 인용문, 하이라이트 마크 등을 표현하는 다양한 효과 태그
|
태그명
|
설명
|
태그명
|
설명
|
|
<address>
|
주소나 연락처의 의미로 텍스트 기울임 표현
|
<blockquote>
|
긴 글 인용문을 들여쓰기 처리하여 표현
|
|
<b>
|
강조의 의미로 텍스트 굵게 표현
|
<q>
|
짧은 글 인용문을 “” 처리하여 표현
|
|
<strong>
|
강한 강조의 의미로 텍스트 굵게 표현
|
<mark>
|
특정 텍스트에 하이라이트 마크 표현
|
|
<cite>
|
책, 그림 등의 작품 제목을 알리는 의미로 기울임 표현
|
<ruby>,<rt>
|
루비 문자(동아시아 문자) 선언(ruby), 루비 문자 위 설명(발음) 표현(rt)
|
|
<em>
|
강조의 의미로 텍스트 기울임 표현
|
<sub>
|
아래 첨자 표현
|
|
<i>
|
이탤릭체로 텍스트 기울임 표현
|
<sup>
|
위 첨자 표현
|
|
<small>
|
작은 글자나 코멘트를 표현
|
<del>
|
가운데 줄이 그어진 글자 표현
|
<h1>제목과 텍스트 관련 효과</h1>
<h2>abbr,b태그</h2>
abbr: <abbr title="Hyper Text
Markup Language">HTML</abbr> 축약어의 원래 단어 말풍선 표현
b:<b>굵은 글씨</b>표현.
<h3> cite, mark, meter 태그</h3>
cite: <cite> 책, 영화 등의 제목 인용구를 기울임 </cite>
표현.
mark: <mark> 특정 부분을 하이라이트 마크</mark>
표현.
meter: 측정값 <meter
min="0" max="10" value="7"> 70% </meter>
그래프 표현<br/>
<h5> q와 blockquote
태그</h5>
q: <q> 짧은 글 인용문을 인용 부호로 </q> 표현 <br/>
blockquote: <blockquote> 긴 글의 인용문을 들여쓰기 표현하는 블록요소</blockquote>
목록 관련 태그
1.
순서 있는 목록
- 항목 앞에 순서의 표현으로 일련번호를 부여하여 목록을 만듬
=> type=“타입”: 1(숫자,기본값), a,A(알파벳), i,I(로마자)
=> start=“숫자”:목록의 시작 번호 지정 / reversed:번호를 역순으로 지정
2.
순서 없는 목록
- 항목 앞에 특정 글머리 기호를 부여하여 목록을 만듬
3.
정의 목록
- 특정 항목에 대하여 정의 부분과 설명 부분으로 나누어 목록을 만듬
4.
다중 목록
- 목록 태그 내에 다시 목록을 중첩하여 구성하는 다중 목록을 만든다.
<h3> 정의 목록(dl) </h3>
<dl>
<dt>
목록 구성 요소 </dt>
<dd>
목록을 구성하는 요소에는 ol,
ul, dl이 있다.</dd>
</dl>
<h3> 순서 있는 목록(ol)</h3>
<ol type="2">
<li> 백두산 </li>
<li> 한라산 </li>
<li> 지리산 </li>
</ol>
<h3> 순서 없는 목록(ul) </h3>
<ul>
<li> 버스</li>
<li> 기차</li>
<li> 트럭</li>
</ul>
이미지 관련 태그
1.
img
- 이미지 파일을 웹사이트에 삽입하는 기능을 하는 홑 태그
=> src=“이미지 경로”:이미지 경로를 지정(절대 경로, 상대 경로)
=> alt=“대체 텍스트”:이미지를 브라우저가 보여주지 못한 경우 대체 텍스트를 표시
=> title=“설명 팁”:마우스 이미지 위에 위치할 때 설명 팁을 나타냄
- 이미지를 웹 페이지에 표현할 때에는 이미지가 표현되는 영역의 크기를 지정하기 위해 width=“너비”, height=“높이”의 속성을 지정함
2.
figure, figcaption
- 이미지에 설명을 부여하는 이미지 캡션은 img 태그와 함께 사용함
- 사진, 그림, 표 등에 캡션, 즉 설명 글을 포함하여 그룹화하는 figure
태그와 캡션 대상에게 실제 설명 글을 붙이는 figcaption
태그가 있음
하이퍼링크 관련 태그
1.
a - 다른 문서 또는 URL 연결
- 현재의 웹 페이지에서 다른 문서나 URL을 연결하는 기능. 연결 지정은 대상에 따라 URL 주소, 문서 절대 경로, 문서 상대 경로로 작성함
=> href=“링크”:링크 문서나 인터넷 URL을 상대 경로 또는 절대 경로로 표시
=> title=“설명 팁”:마우스가 링크 위에 위치할 때 설명 팁을 나타냄
=> target=“윈도”:_blank(새로운 창 또는 새로운 탭에 문서 내용 표시),_self(현재 창에 문서 내용 표현)
1.
텍스트로 하이퍼링크 연결
<body>
<h3> 회원출입문 </h3> <ul>
<li> <a href="./login.html" title="로그인"
target="_blank"> 로그인 </a> </li>
<li> <a href="./join.html" title="회원가입"
target="_blank"> 회원가입 </a> </li> </ul>
2.
이미지로 하이퍼링크 연결
<h3> 회원출입문2 </h3>
<a href="./login.html" title="로그인">
<img src="./images/login-1.jpg" /> </a>
<a href="./join.html" title="회원가입">
<img src="./images/join-1.jpg" /> </a>
</body>
2.
a - 문서 내에서 연결
<h3> 웹 페이지 상단입니다. </h3>
<ul>
<li> <a href="#content1"> 하이퍼링크 1 </a> </li>
<li> <a href="#content2"> 하이퍼링크 2 </a> </li>
</ul>
~<br /> ~<br /> ~<br /> ~<br />
~<br /> ~<br /> ~<br /> ~<br /> ~<br /> <a
id="content1">▶ 하이퍼링크 -
1 </a>
<p> 하이퍼링크 - 1 위치로 오신 것을 환영합니다. </p>
<a href="#"> 위로 </a>
<br /> ~<br /> ~<br /> ~<br />
~<br /> ~<br /> ~<br /> ~<br /> ~<br />
<aid="content2">▶하이퍼링크-2 </a>
<p> 하이퍼링크 - 2 위치로 오신 것을 환영합니다.
</p>
<a href="#"> 위로 </a>
<br /> ~<br /> ~<br /> ~<br />
~<br />
3.
이미지 맵
- 이미지에 영역 크기를 지정하여 나누어 주는 기능. 이미지 맵을 정의하는 map 태그와 영역을 나눠주는 area 태그가 있으며, 구분된 각 영역은 클릭하면 다른 곳으로 이동하는 하이퍼링크 기능을 실행함
=> [map]
name=“맵 이름”: 맵 이름을 지정하여 img 태그의 username=“맵 이름” 속성과 상호 연결됨
=> [area]
shape=“맵 모양”: 맵 모양을 지정하며 형태는 default(전체 영역), poly(다각형), rect, circle이 있음
=> [area]
coords=“좌표”: 이미지 맵 형태에 따른 크기를 지정하며 사각형의 경우 “x1,y1,x2,y2”, 원의 경우 ”x1,y1,r”, 다각형의 경우 “x1, y1, x2, y2, …, xn, yn”으로 지정
=> [area]
href=“링크 문서”: 링크하여 이동할 문서 지정
<body style="text-align:center;">
<h3> 웹 브라우저 방문하기 </h3>
<img src="./images/browser.jpg"
width="200" height="150" usemap="b_map" />
<map name="b_map">
<area shape="rect"
coords="10,60,100,140" href="http://www.mozilla.or.kr/ko/"
title="파이어폭스"
/> <area shape="rect" coords="110,60,190,140"
href="https://www.google.com/" title="크롬"
/> </map>
</body>
왼쪽 부분을 클릭하면 mozila 홈페이지로, 오른쪽을 누르면 google로 간다.
표 관련 태그
1.
표 구성
- 행(세로):<tr>
/ 열(가로):<td>
=> border:표의 테두리 두께 지정(1 or “ “) - border를 작성하지 않으면 테두리 없는 표로 처리
2.
셀 병합
=> colspan=“열 수”: 지정한 수 만큼 열을 병합
=> rowspan=“행 수”: 지정한 수 만큼 행을 병합
3.
표 그룹 및 구조화
- 표에 의미를 부여하여 시맨틱하게 인식되도록 처리하면 웹 페이지 검색 등에 유용하게 사용될 수 있음. 즉, 표 전체를 대표하는 제목을 표시하며, 각 열을 그룹화하여 해당 열에 대한 효과를 별도로 지정할 수 있음. 또한 표 안에서 표 머리글, 표 본문, 표 바닥글로 구조화하여 구성 가능.
1. 표 캡션: 표 전체 내용을 대표하는 제목. <caption> 태그 사용
2. 열 그룹화: 표에 속한 열을 그룹으로 만듬. <colgroup> 태그 사용
3. 표 구조화: 표를 의미와 용도에 따라 표 머리글, 표 본문, 표 바닥글로 구분하여 구조화. <thead>, <tbody>, <tfoot> 태그 사용
<table style="text-align:center;"
border="1">
<tr>
<th rowspan="2" scope="row"> 성명 </th>
<!-- 2개의 행을 병합한 열 제목 -->
<th colspan="2" scope="col"> 성취 평가 </th>
<!-- 2개의 열을 병합한 열 제목 -->
</tr> <tr>
<td> 컴퓨터 일반 </td>
<td> 웹 프로그래밍 </td> </tr>
<tr>
<td> 이순신 </td>
<td> 98 </td> <td> 100 </td>
</tr>
</table>
<br/>
<table border="1">
<caption> 컴퓨터 주변 기기 </caption>
<thead>
<tr>
<th> 주변 기기 </th> <th> 이미지 </th> <th> 주변 기기 </th>
<th> 이미지 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 마우스 </td>
<td> <img src="./images/mouse.jpg" /> </td>
<td> 프린터 </td> <td> <imgsrc="./images/printer.jpg" /> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"> <address> 신청 연락처 :
02-123-4567 </address> </td>
</tr>
</tfoot>
</table>
멀티미디어 관련 태그
1.
video
- 웹 페이지에서 동영상 파일을 삽입하여 별도의 플러그인 없이 브라우저 자체의 내장 플레이어로 재생하는 기능
<video autoplay="autoplay"
controls="controls">
<source src="비디오파일1"type="비디오타입1"/>
<source src="비디오파일2"type="비디오타입2"/>
</video>
=> [video]
src=“비디오 파일”: 비디오 파일의 경로 지정
=> [video]
autoplay=“autoplay”: 자동 재생 기능 지정
=>
[video] controls=“controls”: 컨트롤 바가 표시되도록 지정
=>
[video] poster=“이미지 파일”:
비디오 파일이 화면에 나타나지 않을 경우 대체할 이미지 경로 지정
=> [video]
width=“너비”: 비디오 파일이 재생될 너비 지정
=> [video]
height=“높이”: 비디오 파일이 재생될 높이 지정
=> [source] src=“비디오 파일”: 비디오 파일의 경로 지정
=> [source]
type=“비디오 타입”: 비디오 파일의 타입 지정
2.
audio
- 웹 페이지에 음악을 삽입하여 별도의 플러그인 없이 브라우저 자체의 내장 플레이어로 재생하는 기능
<audio autoplay="autoplay"
controls="controls">
<source src=“오디오파일1"type="오디오타입1"/>
<source src="오디오파일2"type="오디오타입2"/>
</audio>
=> 속성은 비디오와 거의 동일, 단 poster
대신 loop
옵션이 있음.
=> [audio]
loop=“loop”: 반복 재생 지정
3.
embed
- 플러그인이 설치된 브라우저 혹은 플러그인이 필요한 멀티미디어 파일을 재생하는 태그
<embed src=“파일 경로”></embed>
=> src=“파일 경로”: 외부 파일 경로 지정
=> type=“파일 타입”: 파일 타입 지정
=> width=“너비”: 너비값 지정
=> height=“높이”: 높이값 지정
