HTML의 기본적인 문법입니다

HTML

(HTML JAVASCRIPT CSS교재를 활용하였습니다~)

HTML 문서의 기본 정보

<head>와 </head> 태그

HTML 문서의 머리말에 해당하는 부분으로 <head> 태그를 단독으로 사용하기 보다는 <title>태그와 함께 사용합니다

<title>과 </title> 태그

헤드 태그 사이에 위치하는 태그로서 실제적으로 HTML 문서의 제목을 입력하는 태그입니다.

기본형식

<head>

<title> 이 부분이 제목입니다 </title>

</head>

<meta>태크

<meta http-equiv="content-type" content="text/html;charset=euc-kr">
웹페이지에 출력되는 한글 폰트를 지정합니다. 간혹 홈페이지에서 특히 한글이 올바르게 표시되지 않는 것은 한글 폰트를 지정하는 meta태그가 없기 때문인 경우가 대부분입니다
<meta name="keywords" content="문자열">
각종 검색엔진 사이트에서 검색로봇을 통해 웹페이지를 검색할 때 홈페이지 전체의 내용을 검색하는 것이 아니라 이 키워드의 내용을 검색하게 됩니다
<meta name="description" content="홈페이지 설명">
Description은 홈페이지를 홍보위한 수단으로 많이 사용되며 키워드가 단어를 사용해 검색 가능하도록 한것이라면 description은 문장을 통해 홈페이지의 내용을 설명하는 것이 됩니다
<meta http-equiv="refresh" content="시간, url=이동할 홈페이지의 주소">
홈페이지의 주소변경이나 다른 어떠한 이유로 현재의 홈페이지에서 다른 곳으로 이동시켜야 하는 등의 목적이 있을 때 사용되는 방법입니다. 시간에 숫자를 적어주게 되면 그 숫자만큼 초가 지난 뒤에 url에 적은 홈페이지로 이동하게 됩니다
<meta name="author" content="홈페이지 제작자 이름">
홈페이지 제작자의 이름을 적어둘 수 있습니다
<base href="기준이 되는 url">
<a>태그를 사용해 같은 홈페이지 내의 다른 페이지로 링크하게 될 때 <base href>를 사용하여 기준이 되는 url을 기록해 두면 <a>태그에서 상대주소로 링크를 해도 절대 주소와 같이 인식하게 됩니다

<br>태그

br태그는 줄바꿈 태그로서 비슷한 <p>태그 명령과 다른 점은 한 문장을 끝내고 다음 문장을 시작할 때 줄만 바꾸고 시작한다는 것입니다. 일반적으로 한글이나 워드, 메모장과 같은 편집기에서 엔터 키와 같은 역할을 수행합니다.따로 종료 태그를 사용하지 않습니다

<pre></pre>태그

Preformatted text의 약어이며 이 태그 내에 입력된 문자들은 어떤 문자라도 입력할 때의 내용 그대로 출력됩니다.

<nobr>과 </nobr>태그

No breading의 약어로서 웹 브라우저의 크기가 달라져도 줄을 바꾸지 못하게 합니다

<pre>태그에는 사용하지 못한다는 특징이 있습니다

<div>태그

div태그는 p태그와 마찬가지로 문단을 구별하는 태그로서 p태그와 다른점은 div태그는 p태그로 나누어진 문단을 하나의 묶음 형태로 정렬할 수 있고 p태그는 사용한 위치에 한 줄의 공백이 생기지만 공백이 생기지 않는 다는 차이가 있습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

1월 1일은 설날입니다

3월 1일은 삼일절입니다. 그러면 4월에는 어떤 기념일이 있을까요?

<div align="center">4월 5일은 식목일입니다<br />

우리모두 나무를 많이 심읍시다<p/>

5월에는 행사가 아주 많습니다<br />

5월 5일은 어린이 날이고, 5월 8일은 어버이 날입니다<br />

그리고 5월 15일은 스승의 날입니다

</div>

그 외에도 5월에는 크고 작은 행사가 많습니다.

</body>

</html>

결과를 살펴보면 p태그를 사용한 경우에는 공백이 생겨져 있고 div태그를 사용한 경우에는 공백이 없음을 알 수 있습니다

<center>태그

center태그는 <center> </center> 내의 문장이나 그림 등을 웹 브라우저의 중앙에 위치하도록 출력을 도와줍니다 만일 웹 브라우저의 크기에 변동이 있다면 변하는 크기에 맞추어서 중앙에 정렬해 주도록 도와줍니다

<hr>태그

hr태그는 웹 브라우저에 수평선을 만들어 주는 역할을 합니다. 속성에 따라서 수평선의 색상과 굵기, 길이 등을 다양하게 지정할 수 있습니다

속성	설명
Align	-수평선의 정렬위치를 지정합니다 -지정해 주지 않으면 default로 왼쪽을 정렬합니다
Clolor	-수평선의 색상을 지정합니다
width	-수평선의 길이를 지정합니다 -픽셀 값이나 퍼센트를 사용해 지정가능합니다
size	-수평선의 굵기를 지정합니다 -픽셀 값이나 퍼센트를 사용해 지정할 수 있습니다
noshade	<hr>태그 내에 noshade속성을 삽입하면 입체감이 없어진 수평선이 출력됩니다

예제입니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>HR태그 사용법입니다</title>

</head>

<body>

1. 가장 기본이 되는 수평선<br />

2. 색상은 green, 길이는 브라우저의 30%, 왼쪽 정렬하는 수평선<br />

3. 색상은 blue, 길이는 200픽셀, 굵기는 5픽셀로 하는 수평선<br />

4. 길이는 150픽셀 굵기는 10픽셀, 가운데 정렬 수평선<br />

5. 길이는 150픽셀, 굵기는 10픽셀, 가운데 정렬하고 입체감을 없앤 수평선<br />

</body>

</html>

실행결과입니다

2.2 주석 달기

문서를 작성한 후, 나중에 이 문서를 다시 고치고자 한다면 html 문서에 대해 또는 각 태그에 대해 메뉴를 출력하기 위한 태그인지, 광고를 출력하기 위한 태그인지 등에 대한 설명을 잘 붙여놓아야 이해하게 쉬워 고칠 수 있을 것입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>주석문 사용법입니다</title>

</head>

<body>

주석문 사용법을 익혀 봅시다

<!-- 주석문입니다

이 부분은 웹브라우저에는 출력되지 않습니다 -->

</body>

</html>

2.3 문자 삽입

<hn>태그

hn태그는 글자의 크기를 조절할 수 있는 태그로 다음과 같은 방법으로 사용합니다. 다음 형식에서 n의 위치에 1 ~ 6까지의 숫자를 넣어서 문자의 크기를 조절하는데 번호가 커질수록 글자의 크기는 작아져서 출력된다

기본 형식 : <hn align="정력"> 출력할 문자열 </hn>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

</body>

</html>

<hn>태그는 나중에 나올 굵은 글자로 출력하도록 하는 별도의 태그를 사용하지 않아도 굵은 글자로 자동으로 출력된다. 주로 단락의 제목을 출력하는데 많이 사용하기도 한다. 또한 <hn>태그는 줄 바꿈 태그를 따로 사용하지 않아도 자동 줄 바꿈을 한다.

기본형식

속성	설명
size	-글자의 크기를 지정해 줍니다. N의 자리에 1~7까지의 숫자를 넣어서 지정해주는데 숫자가 커질수록 인쇄되는 글자의 크기는 커지게 됩니다.
color	-색상명이나 RGB색상 값을 넣어서 색상을 지정해 줍니다
face	-인쇄될 글자의 서체, 즉 글꼴을 지정해 줍니다

2.4 서식 태그

HTML문서를 작성함에 있어 여러가지 폰트에 기능들을 더해줄 수 있습니다

이런 경우를 위해서 HTML에서는 여러가지 글자체를 설정하는 서식 태그를 마련해 놓았습니다. 다음은 이런 태그들과 그에 대한 설명을 표로 요약 하였습니다

글자체	태그 명령	설명
이탤릭체	<i> </i> <cite></cite> <em></em> <var></var>	이탤릭 체로 출력됩니다
타자기체	<kbd></kbd> <code></code> <tt></tt>	타자기 체로 출력됩니다
굵은체	<strong></strong> <b></b>	글자를 굵게 출력합니다
밑줄 그은 글자	<u></u>	글자에 밑줄을 그어 출력합니다
조금 크기	<big></big>	지정된 글자 크기보다 조금 크게 출력합니다
조금 작게	<small></small>	지정된 글자 크기보다 조금 작게 출력합니다
아래 첨자	<sub></sub>	지정된 글자를 아래 첨자로 만듭니다
위 첨자	<sup></sup>	지정된 글자를 위 첨자로 만듭니다
깜빡이는 글자		원하는 문장이나 단어를 깜빡이며 출력되게 합니다 이 태그는 넷스케이프에서만 지원됩니다
수평 줄긋기		지정된 글자 상에 취소선을 긋습니다

2.5 특수 문자의 삽입

html문서를 작성할 때 혹은 키보드로는 입력할 수 없는 특수문자를 입력해야 하는 경우가 생길 수 있는데 이럴 경우에는 미리 지정해 놓은 예약어를 사용해 입력해주어야 합니다

특히 &, <,> 등 몇몇의 문자는 키보드에 있지만 html에서 특수문자로 취급되는데, 그것은 웹 브라우저가 html 문서를 실행할 때 &, <, >는 특수문자의 시작이나 태그의 시작으로 인식되기 때문입니다 이러한 문자를 삽입할 때 예약어로 대신 입력해야 합니다

가장 많이 사용하는 몇 가지를 살펴보면 다음과 같습니다

특수 문자	예약어
<	<
>	>
&	&
"	"
SPACE

기본적으로 HTML의 기본적인 기능에 대해서 알아보았습니다. 무궁무진한 HTML의 세계에 발을 디디기 위해선 기초 초석이 중요하겠죠 ~?? 모두들 열심히 하셔서 대박나시길 바랍니다

'프로그래밍언어 > HTML' 카테고리의 다른 글

[HTML5이야기] HTML5 지원여부 감지 (4)	2011.01.04
[동영상강의]제로보드 설치하기 (0)	2011.01.04
HTML강좌- 티스토리 skin.html 로 쉽고 재미있게 파헤쳐보기 (0)	2011.01.03
쉬운HTML - 첫번째 맛보기 (0)	2011.01.03
HTML5이야기- HTML 은 무엇이고 어떻게 발전했을까? (0)	2011.01.03

Inje. Network Team

HTML의 기본적인 문법입니다

'프로그래밍언어 > HTML' 카테고리의 다른 글

티스토리툴바

HTML의 기본적인 문법입니다

'프로그래밍언어 > HTML' 카테고리의 다른 글

'프로그래밍언어/HTML' Related Articles

티스토리툴바