태그는 대소문자를 구분하지 않지만 편의상 소문자로 많이 작성한다. 태그를 사용 할 때는 여는 태그와 닫는 태그가 있기 때문에 항상 닫는 태그에 주의 해야 한다. <meta>, <input>, <img>, <br> 등은 닫는 태그가 없다.
태그는 속성을 함께 사용하는데 태그는 하나의 객체로 다뤄지며 자바스크립트를 이용해 객체를 다루고자 할 때는 속성 값을 적절하게 이용한다.
<img id="image" name="image" src="title.gif">
이미지를 출력하는 태그에서 id는 이 태그의 고유 이름이다. id는 다른 태그와 중복해서 사용 할 수 없다. name은 이 태그의 이름이며 같은 이름을 사용할 수 있다. 같은 태그의 같은 이름을 중복해서 사용하면 배열로 취급 된다. 여기서 id, name, src 같은 img 태그의 구성 이름을 속성이라고 한다.
HTML 문서를 작성 할 때는 한글 인코딩을 주의해야 한다. 과거 리눅스에서는 euc-kr 한글 인코딩을 주로 사용했다. euc-kr은 8비트 문자 인코딩을 사용하는데 대표적인 완성형 한글 인코딩이였다. 하지만 표현 가능한 문자의 한계로 최근에는 이보다 확장 된 utf-8 유니코드를 사용한다. 유니코드는 윈도우와 유닉스에서도 주로 사용하는 한글 인코딩으로 앞으로 작성하는 HTML 문서나 PHP 코드는 모두 UTF-8을 사용한다. 기존 euc-kr이 2바이트 문자였다면 utf-8은 3바이트 코드로 거의 모든 문자의 표현이 가능하다.
<meta charset="utf-8">
<head>~</head> 사이에 인코딩 메타 태그를 사용하면 문서 내에서 사용할 인코딩 방식을 정의한다. 하지만 문서를 파일로 저장 할 때 반드시 유니코드 또는 UTF-8로 저장 해야 한다. (ANSI 파일로 저장하게 되면 한글이 깨질 수 있다.)
크롬, 사파리, 오페라, 파이어폭스, IE9 이상부터는 HTML5를 지원한다. HTML5부터는 doctype 설정이 간단해졌다.
<!doctype html>
<html>...
<!doctype html> 한 줄이면 이 문서에서는 HTML5를 사용하는 문서라는 의미가 된다.
■ 자주 사용하는 태그
태그의 종류는 무수히 많다. 그중에서 웹 페이지 작성에 자주 사용하는 태그를 몇 개를 소개 한다.
<p> ~ </p>
본문 내용에서 하나의 단락을 구분할 때 사용한다.
<div> ~ </div>
레이어라고 하며 많이 사용 되는 태그 중 하나다. 화면을 디자인하고 객체를 정렬하는 등 레이아웃을 꾸미는데 주로 사용 된다.
<span> ~ </span>
div와 함께 자주 사용되는 inline element 태그로 주로 문자를 꾸며줄 때 사용한다.
<div>우리는 <span style="text-decoration:underline;">멀티미디어과</span>입니다.</div>
이 문장에서 "멀티미디어과"에는 밑줄이 그어진다. 특정 문자에 여러 형태의 스타일 속성을 적용하고 싶을 때 사용한다.
<br>
줄 바꿈
<center> ~ </center>
내용을 중앙 정렬하는 태그. HTML5 부터는 사용하지 않는다.
<pre> ~ </pre>
작성하는 문서 내용을 그대로 화면에 출력한다. <pre> ~ </pre> 안에 있는 문서에는 태그를 사용하더라도 적용하지 않고 태그 문자를 그대로 화면에 보여준다.
<stong> ~ </strong>, <b> ~ </b>
태그 안의 문장을 굵게 표현한다.
<u> ~ </u>
문장에 밑줄을 표현다.
<hr>
수평선을 출력한다.
<table>~</table>
표를 작성 할 때 사용한다.
<table>
<tr>
<td> 항목 </td>
<td>내용</td>
</tr>
</table>처럼 사용한다.
<tr> : 표의 열
<td> : 표의 칸
<img src="이미지 경로">
화면에 이미지를 보여준다.
<a href="URL">링크 문자나 이미지</a>
HTML 문서의 핵심이라 볼 수 있다. 다른 웹페이지를 링크하는 태그로써 target 속성을 주면 새창으로 페이지를 불러 올 수도 있다.
<a href="" target="_blank">는 새 창으로 대상을 불러온다.
_self : 현재 페이지나 프레임에 대상을 불러온다.
_top : 페이지가 프레임으로 나늬어 있을 때 프레임을 무시하고 현재 페이지에 대상을 불러온다.
<iframe src="페이지 경로나 URL" name="이름" width="가로 크기" height="세로 크기" marginwidth="좌우여백" marginheight="상하여백" scrolling="스크롤바 사용 여부" frameborder="테두리 두깨"></iframe>
HTML5부터는 프레임 셋을 사용하지 않지만 iframe은 여전히 유용하게 사용되고 있다. 문서 중간에 프레임을 객체 형태로 출력 할 수 있다.
<ul><li> ~ </li></ul>
목록을 출력 할 때 사용한다. 출력 형태는 비순차적이다.
<ul>
<li>목록1</li>
<li>목록2</li>
</ul>● 목록1
● 목록2
처럼 출력 된다.
<ol><li> ~ </li></ol>
순차적인 목록을 보여 줄 때 사용한다.
<ol>
<li>목록1</li>
<li>목록2</li>
</ol>1. 목록1
2. 목록2
위의 형태로 출력 된다.
<ol type="A">
<li>목록1</li>
<li>목록2</li>
</ol>A. 목록1
B. 목록2
type을 A로 줬을 때는 대문자 알파벳을 순차적으로 보여준다.
type 속성에는 a, circle, square가 있다.
<form> ~ </form>
서버로 데이터를 전송하기 위해 정보를 입력 받는 폼 양식을 선언한다.
onsubmit="실행 할 자바스크립트 함수"
method="post" 서버로 데이터를 전송하는 방식. get는 URL의 ?뒤에 붙어 다니는 매개변수 방식으로 데이터를 전송하기 때문에 문자열의 크기에 제한이 있다. 255바이트가 넘게 되면 오류가 생기거나 문자열이 잘리게 된다. post는 form의 대용량 자료를 넘겨 줄 때 사용하며 화면에는 전송되는 데이터 내용이 보이지 않고 정보의 크기에 제한이 없어 주로 post 방식을 사용한다.
action="프로그램 파일" action에는 form의 정보를 받을 프로그램 파일 경로가 된다.
<input>
문자를 입력 받거나 radio 버튼, checkbox 등으로 선택형 데이터를 입력 받을 때 사용한다. 주로 <form> 태그 안에 있어야 한다.
<input type="text" name="name">
이 문장은 name으로 문자를 입력 받겠다는 의미다. type을 생략하면 기본은 text 속성을 갖는다.
<input type="radio" name="size" value="10">10
<input type="radio" name="size" value="20">20
radio 버튼은 여러 개의 보기 중에 하나를 선택 할 때 사용한다. 위의 예시는 10과 20 중 하나를 선택하고 선택한 속성의 value 값이 전송 된다.
<input type="checkbox" name="size" value="10">10
<input type="checkbox" name="size" value="20">20
checkbox는 여러 개를 선택 할 수 있다. 서버로 전송 될 때는 속성 값의 value 값이 배열로 전송된다.
<input type="hidden" name="mode" value="save">
input에서 hidden 속성은 매우 유용하다. 화면에는 출력하지 않지만 고정 된 값을 서버로 전송 할 때 사용한다. mode라는 이름에 save라는 문자열을 기본 값으로 넣고 서버로 전송한다.
<input type="button" value="버튼" onclick="기능 함수나 자바스크립트">
button 속성은 화면에 버튼을 출력하며 주로 onclick 이벤트를 받아 기능을 수행한다.
<input type="submit" value="전송">
submit 속성을 form 내부의 요소들에 입력 된 정보들을 서버로 전송하게 된다. submit 버튼이 클릭 되면 <form>에서는 onsubmit 이벤트가 발생한다.
<textarea>~</textarea>
여러 줄의 긴 문장을 입력 받을 때 사용한다. <input>은 문자열의 길이가 255바이트로 제한 돼 있지만 <textarea>는 문자열의 길이에 제한이 없다.
<textarea name="doc" rows=5 cols=100></textarea>
rows는 문자 입력 창의 줄 수다. 5줄 만큼 세로 길이가 늘어난다. cols는 가로 글자 크기다. 숫자만큼 가로 길이가 길어진다.
HTML5에서는 기존에 없던 태그 몇 가지가 추가 됐다.
<header>~</header>
문서나 글의 머릿말 부분에 해당하는 영역을 정의한다.
<hgroup> ~ </hgroup>
제목과 관련 된 부제목을 정의 할 때 사용한다.
문서에서 중요한 요점을 알기 쉽도록 구분하여 표시한다.
<nav> ~ </nav>
네이베이션 영역으로 주로 메뉴를 배치하는데 사용한다.
<article> ~ </article>
문서의 실제 내용을 정의한다. 기사나 블로그에서 포스트의 본문 내용을 작성한다.
<section> ~ </section>
콘텐츠의 그룹이다. div가 문단이나 콘텐츠의 영역을 구분하기 위해 사용한다면 section은 관련 있는 콘텐츠 영역들의 묶음이다.
<aside> ~ </aside>
본문을 표시하고 남는 영역을 표시한다.
예를들어 블로그에서 포스트 내용이 포함 된 section이 왼쪽 영역에 정의 됐다면 오른쪽 최신글이나 카테고리, 광고 배너, 최근글 목록 등이 노출 되는 영역을 aside로 묶을 수 있다.
<footer> ~ </footer>
문서나 글의 꼬릿말 부분을 정의한다. copyright 등을 표시한다.
HTML5에는 멀티미디어 태그가 포함 되어 있다.
<video>
비디오를 재생 할 때 사용한다. embed와 비슷하나 embed가 외부의 다양한 형태의 object를 사용하는 것과 달리 video는 영상 파일을 재생하는 목적으로 만들어졌다.
<audio>
음원 파일을 재생 할 때 사용한다.
<canvas>
도형을 그리거나 이미지 데이터를 보여 줄 때 사용한다. 여기서 이미지 데이터란 gif, jpg, png과 같은 이미지 파일이 아니라 자바스크립트에서 다루는 코드화 된 이미지 데이터를 다루는데 사용한다. 브라우저 안에 이미지를 표현 할 때 유용하다. 통계 그래프나 차트 등을 표현 할 수 있다.
'프로그래밍 > 홈페이지 제작 기초' 카테고리의 다른 글
| 2-2 보강. 홈페이지 제작 시 자주 사용하는 style(CSS) 모음과 속성 설명 (0) | 2019.09.20 |
|---|---|
| 2강. HTML 문서 작성과 자바스크립트 사용 방법 (0) | 2019.09.20 |
| 1강. 멀티미디어의 이해와 진로 (0) | 2019.09.20 |