[펌 강의] 2. HTML에서 TAG의 특성과 간단한 TAG (1)
페이지 정보
써니관련링크
본문
bordercolorlight="black">
size="2">2. Html에서 Tag의 특성과
간단한 Tag <I>
HTML을 시작하면서에서 HTML이 무엇인지 대략적으로
알아보았고, 이번에는 HTML 문서에서 사용되는 Tag의 특성에 대해서
알아볼까요?
Tag의 특성은 어떤 것이 있을까요?
- 대부분의 Tag는 opening Tag와 closing Tag가
쌍을 이룬다.
예) <HTML>...</HTML>, <FONT>...</FONT>
- Opening Tag는 '<' + 'TAG NAME' + '>'로
이루어진다.
- Closing Tag는 '<' + '/' + 'TAG NAME' +
'>'로 이루어진다.
- Opening Tag와 Closing Tag가 쌍을 이루는 경우,
Closing Tag를 생략하면 이후의 내용이 화면에 Display되지 않을
수도 있다. 그러나 많은 경우 생략해도 무방하다.
- Opening Tag와 Closing Tag를 명확하게 구분하는
것은 사람이 볼 때도 편리하지만, 브라우저가 Html 문서를 처리할
때도 사용하지 않은 것보다 빨리 처리한다.
- HTML이 대소문자를 구별하지 않듯이 Tag도 대소문자
구별이 없다. 하지만 대문자면 대문자 소문자면 소문자로 규칙있게
코딩하는 것이 유지보수하기가 좋죠.
- 마지막으로 Tag별로 들여쓰기로 코딩을 하는
것도 HTML 문서를 해독하기 좋게 합니다.
어려운 내용은 아니죠? 그럼 이제 기본적인 Tag를
하나하나 설명해 보도록 하겠습니다.
3. 기본적인 간단한 Tag
1) 문서의 제목 쓰기
<Hn>...</Hn>
문서제목(Heading)의 글자 크기를 조정할 때 쓰이는
Tag입니다. 여기서 n은 1부터 6까지의 숫자를 의미합니다. n이 1일 때
글자가 가장 크고 6일 때 가장 작죠.
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<H1>점</H1><H2>점</H2><H3>작</H3><H4>아</H4><H5>져</H5><H6>요</H6>
</BODY>
</HTML>
target="_blank">결과보기
어떻게 나올까요? 결과보기를 클릭해서 보는 것도
좋지만 직접 해보세요. 메모장에 그대로 복사해 넣거나 타이핑한 후,
ex1.htm와 같이 저장하고 넷스케이프나 익스플로어에서 실행시키면???
후후.. 탐색기에서 ex1.htm으로 저장한 파일을 더블클릭하면 저절로
브라우저가 실행되죠?
2) Font Tag
<FONT>...</FONT>
글자의 스타일, 크기, 색상 등을 표현할 때 사용하는
TAG입니다. 사용하지 않아도 상관은 없습니다. 하지만 사용하는게 훨씬
보기가 좋죠.
FONT TAG에는 3 가지 주요 속성이 있습니다.
① COLOR - 글자의 색상을 지정합니다. 색상에 대해
보려면
size="2" color="blue">여기를 클릭하세요!
② FACE - 글자의 스타일, 즉 글자체를 지정합니다.
윈도우에서 기본적으로 제공해 주는 폰트가 아닌 자신의 PC에만 설치된
폰트를 사용하게 되면, 그 폰트를 인스톨하지 않은 컴퓨터에서 보면
기본 글꼴로 나타납니다.
③ SIZE - 글자의 사이즈를 나타냅니다. 1부터 7까지
사용할 수 있으며 <Hn> ...</Hn> TAG 와는 반대로 1이 제일
작고 7이 제일 큽니다.
<HTML>
<HEAD>
<TITLE>쎌리의
홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<FONT FACE="굴림체"
COLOR="BLUE" SIZE="5">
쎌리의
홈페이지 따라하기에 오신 것을 환영합니다.
</FONT>
</BODY>
</HTML>
target="_blank">결과보기
<!-- <FONT>...</FONT>
Tag에서 " "(Double Quotation)은 생략해도 됩니다. 아니
대부분 Tag에서 " "는 생략을 해도 무방합니다. -->
3) Body Tag
<BODY>...</BODY>
HTML 문서에서 실제 내용이 들어가는 부분임을 나타내는
Tag 입니다. HTML 파일의 백그라운드 배경이나 색상을 <BODY>...</BODY>
TAG에서 설정할 수 있습니다.
① BGCOLOR - HTML 파일의 백그라운드 색상을 지정합니다.
② BACKGROUND - HTML 파일의 배경 그림을 지정합니다.
그림 파일의 사이즈가 작은 것을 선택하세요.
<HTML>
<HEAD>
<TITLE>쎌리의
홈페이지 따라하기!</TITLE>
</HEAD>
<BODY BGCOLOR="#FFCCFF">
<FONT FACE="굴림체"
COLOR="BLUE" SIZE="5">
쎌리의
홈페이지 따라하기에 오신 것을 환영합니다.
</FONT>
</BODY>
</HTML>
target="_blank">결과보기
<HTML>
<HEAD>
<TITLE>쎌리의
홈페이지 따라하기!</TITLE>
</HEAD>
<BODY BACKGROUND="bgrnd01.gif">
<FONT FACE="굴림체"
COLOR="BLUE" SIZE="5">
쎌리의
홈페이지 따라하기에 오신 것을 환영합니다.
</FONT>
</BODY>
</HTML>
target="_blank">결과보기
<!-- 이미지(그림파일)을 사용하여
홈페이지를 꾸밀 경우 주의해야 할 사항이 두 가지 있어요.
① 사용하는 인터넷 서버가 유닉스
계열일 경우, 대소문자를 구별하므로 파일의 이름에 대소문자가 섞여있는지를
확인한 후 사용하시는게 좋습니다. 가능하면 이미지의 이름은 소문자가
좋다고 저는 생각해요.
② 이미지 파일과 HTML 파일이 저장된
위치(디렉토리)가 다른 경우에는 상대경로나 절대경로를 이용해서 확실하게
표현해 주어야 합니다.
홈페이지에 이미지를 올렸는데.. 안나온다..
그럼 아마 위의 두 가지 문제 중 하나일 겁니다. -->
작성일2005-02-10 11:55
라이브카지노님의 댓글
라이브카지노
