HTML문서는 태그로 이루어져 있습니다. 이번 장에서는 태그가 무엇인지 알아보고, 기본태그와 사용법에 대해
알아보도록 하겠습니다.
1. 태그란?
HTML 태그는 '<', '>'기호로 묶여있으며 HTML 문서임을 나타내기 위해 사용됩니다.
태그는 '<'와 '>'사이에서 주어지는 속성을 이용해 명령의 형식이 달라집니다. HTML 언어의 태그는 자체적으로
대ㆍ소문자를 가리지 않지만 특수 문자를 표현하는 경우에는 소문자를 사용합니다.
HTML 문서를 작성할 때 주의할 점은 시작 태그와 종료 태그가 둘 다 갖추어져 있는 태그와 그렇지 않은 태그가
있다는 것입니다. 만약 종료 태그를 지정하지 않으면 시작 태그에서 지정한 값을 따라가게 됩니다.
2. 기본 태그
HTML문서를 이루는 기본 태그에 대해 알아보겠습니다.
(1) <HTML>...</HTML>
<HTML> 태그는 HTML 문서의 시작과 끝을 나타내 주는 것으로 모든 HTML 문서는 이 <HTML> 태그로 시작해서
</HTML>로 끝나므로 웹 문서의 모든 태그는 이 <HTML>태그 안에 있게 됩니다.
<HTML> 태그는 단순히 HTML 문서임을 나타내기 때문에 특별한 기능이 없습니다.
(2) <HEAD>...</HEAD>
HEAD>와 </HEAD>는 HTML의 머리말에 해당하는 부분을 작성하는 부분입니다.
<HEAD>에는 일반적으로 <TITLE> 태그를 많이 사용합니다.
(3) <TITLE>...</TITLE>
<TITLE> 태그는 문서의 제목을 타이틀바에 나타내 줄 때 사용하는 태그로 이때 타이틀은 웹 브라우저에서 북마크할
경우에 북마크의 제목으로 사용됩니다.
(4) <BODY>...</BODY>
<BODY> 태그는 HTML 문서의 본문 영역을 나타내며 여기에 작성된 내용은 브라우저 상에 그대로 나타나며 문서의
글자색, 글자 크기, 배경색, 배경 이미지 등을 지정할 수 있는데 이때 문서와 문서, URL과 문서를 연결하기 위해서는
하이퍼링크를 사용합니다.
하이퍼링크는 문서에서 마우스로 해당 문자를 클릭 하려고 할 때 마우스 포인터가 손 모양으로 변하는 부분입니다.
이것은 문서와 문서가 연결될 수도 있고, 문서와 URL도 연결될 수 있답니다.
(5) 배경색넣기
배경색은 <BODY> 태그에서 지정해 주며 배경색을 지정하기 위한 형식은 아래와 같습니다.
| <BODY BGCOLOR="색상"> |
위와 같이 <BGCOLOR> 태그를 이용해 배경색을 지정할 수 있어요.
이때, "색상"에 넣을 수 있는 값으로는 16진수와 색상을 나타내는 영단어입니다.
이때, 16진수는 RGB 색상을 이용해서 입력합니다. 여기서 RGB는 빨강(RED), 녹색(GREEN), 파랑(BLUE)의 색을
이용해서 만들어진 색상으로 16진수로 나타낸 것입니다.
이때 16진수는 0, 1, 2, 3, 4,···9, A, B, C, D, E, F까지의 16숫자를 말합니다.
그럼 배경색의 값을 색상을 나타내는 영단어로 나타나보겠습니다.
색상값은 노란색을 나타내는 'yellow'를 사용했습니다.
| ※ bg.html | ※ 실행화면 |
| <HTML> <HEAD> <TITLE>배경색</TITLE> </HEAD> <BODY BGCOLOR = "YELLOW"> 난 배경색이 노란색이야~~ </BODY> |
 |
(6) <!-주석내용->
<!- ... ->와 같은 태그를 주석 태그라고 하는데 주석 태그는 아무리 입력해도 홈페이지에는 아무런 영향도 미치지
않습니다. 그렇기 때문에 주석 태그를 이용해 홈페이지에 대한 자세한 정보를 나타내 줄 수 있죠.
결국 주석 문은 HTML 문서에 대한 정보나 잠깐동안 특정 이미지 파일을 보이지 않게 할 때 이용하며 HTML 문서
중간 중간에 삽입이 가능합니다.
아래의 예를 보시는 바와 같이 <!-주석내용->부분은 보이질 않습니다.
|
※ 주석태그.html |
| <HTML> <HEAD> <TITLE> 주석</TITLE> </HEAD> 너희가 주석을 아느냐? <!-너희가 주석을 아느냐?-> <BODY> <!-주석은 보이지 않는다.-> </BODY> |
 |
3. 줄바꿈태그
(1) <BR>태그
<BR> 태그는 문장과 문장 사이를 띄워주기 위한 태그로 줄을 바꿔주는 기능을 합니다. 즉, 메모장을 사용하다가
[Enter]키를 누르는 것과 같은 효과를 주는 것이죠.
종료 태그를 사용하지 않는 단독 태그로 사용되며 몇 개를 연결해서 사용하면 여러 줄의 줄 바꿈을 할 수 있습니
다. 사용자가 원하는 줄 수만큼의 줄 바꿈을 하려고 한다면 그 수만큼의 <BR> 태그를 사용하면 되죠.
다음 예제에서 <BR> 태그를 사용한 문서와 사용하지 않은 문서를 비교해 보세요.
| ※ br_1.html | ※ 실행화면 |
| <HTML> <HEAD> <TITLE>꼬마야~~</TITLE> </HEAD> <BODY> 꼬마야 꽃신 신고 강가에나 나가보렴. 오늘밤엔 민들레 달빛 춤출텐데... 너는 들리니? 바람에 묻어오는 고향빛 노랫소리 그건 아마도 풀잎처럼 예쁜 마음일거야..... </BODY> |
 |
| ※ br_2.html | ※ 실행화면 |
| <HTML> <HEAD> <TITLE>꼬마야~~</TITLE> </HEAD> <BODY> 꼬마야 꽃신 신고 강가에나 나가보렴<br> 오늘밤엔 민들레 달빛 춤출텐데...<br> 너는 들리니? 바람에 묻어오는 고향빛 노랫소리<br> 그건 아마도 풀잎처럼 예쁜 마음일거야.....<br> </BODY> |
 |
(2) <p>태그
<P> 태그는 HTML 문서에서 단락을 구분할 때 사용하는 태그로 <BR> 태그와는 비슷한 기능을 하지만, 커다란
차이점은 바로 <BR> 태그는 단순히 줄만 바꾸지만 <P> 태그는 문단과 문단 사이의 줄 간격을 띄우기 때문에
단락이 구분된다는것입니다.
따라서 <BR>태그 두 번 사용한 것과 같은 효과를 가지는데 <P> 태그도 <BR> 태그와 마찬가지로 종료 태그가
존재하지 않는 단독 태그라고 할 수 있죠.
그럼 <br>태그와 <p>태그를 구분한 예를 들어보겠습니다.
아래의 예는 <P> 태그와 <BR> 태그를 이용했을 때의 차이점을 나타낸 것으로 <BR>태그는 단지
줄바꿈의 역할을 하며 <P>태그는 문단 구분 역할을 하기 때문에 간격이 더 넓게 나타나는 것을 볼 수
있습니다.
| ※ p_1.html | ※ 실행화면 |
| <HTML> <HEAD> <TITLE>@@꼬마야~~!!@@</TITLE> </HEAD> <BODY> 꼬마야 꽃신 신고 강가에나 나가보렴.<P> 오늘밤엔 민들레 달빛 춤출텐데...<P> 너는 들리니? 바람에 묻어오는 고향빛 노랫소리<P> 그건 아마도 풀잎처럼 예쁜 마음일거야.....<P> <hr> </BODY> |
 |
4. 문서의 정렬
HTML 문서는 워드프로세서에서와 마찬가지로 문단이나 단락을 정렬하는 기능을 가지고 있는데
이때, 문서의 정렬을 위해서는 <CENTER>태그와 <ALIGN> 태그가 사용되죠.
(1) <CENTER>태그
<CENTER>태그는 <CENTER>...</CENTER> 태그 사이의 문자열을 가운데로 정렬해 주는 태그로 사용됩니다.
브라우저의 크기가 변해도 항상 문장은 가운데 위치합니다.
아래의 예는 정렬 태그인 <CENTER> 태그를 이용한 것입니다.
| ※ center.html | ※ 실행화면 |
| <HTML> <HEAD> <TITLE>중앙 정렬하기</TITLE> </HEAD> <BODY> <CENTER> 월 화 수 목 금 토 일<BR> 도 레 미 파 솔 라 시 도<BR> 가 나 다 라 마 바 사 </CENTER> </BODY>
|
 |
(2) <ALIGN=속성>
<ALIGN> 태그는 웹 문서에서 나타나는 문서를 상대적 위치로 지정할 때 사용하는데 ALIGN 태그의 속성으로는
상(TOP), 하(BOTTOM), 좌(LEFT), 우(RIGHT), 중앙(CENTER)으로 문서를 정렬해서 사용할 수 있습니다.
아래는 문서를 상대적 위치로 지정하는 예입니다.
| ※ align.html | ※ 실행화면 |
| <HTML> <HEAD> <TITLE>ALIGN 태그 사용하기</TITLE> </HEAD> <BODY> <P ALIGN=RIGHT> 월 화 수 목 금 토 일</P> <CENTER>도 레 미 파 솔 라 시 도</CENTER> <P> <ALIGN=LEFT>가 나 다 라 마 바 사<P> </BODY>
|
 |
'♧강의목록1♧ > 중독-인터넷.스마트폰.게임' 카테고리의 다른 글
| [스크랩] <213>이야기로 풀어본 스마트폰 기능·사양 (0) | 2011.02.17 |
|---|---|
| 태그 (0) | 2011.01.27 |
| 노트북과 넷북 (0) | 2010.10.20 |
| 프레젠테이션을 진행하는 동안 참석자가 보거나 나중에 참조할 수 있도록 (0) | 2010.05.31 |
| 자주 하시는 질문중에서 PSD템플릿 파일이 뭐냐는 질문들이 있어서.. (0) | 2010.05.16 |