<html> .... </html>
이 문서가 HTML문서임을 나타내는 태그 입니다.
모든 html문서는 바로 <html>로 시작해서 </html>로 끝나게 됩니다.
<head> .... </head>
문서의 HEAD부분을 정의 하는 태그입니다.
이 HEAD부분에는 문서의 타이틀, 특징, 제작자의 정보를 비롯하여
문서에 관한 여러가지 정보를 입력하고, 자바스크립터나 스타일시트
등의 입력도 바로 이 <head>와 </head>사이에 입력하게 되며
HEAD부분에 정의된 정보들은 실제 웹브라우즈 상에는 나타나지
않는 부분입니다.
많은 강좌나 팁에서 문서의 HEAD안에 넣으라는 말은
곧 HTML문서의 <head>와 </head>사이에 해당 팁의
소스를 추가하라는 의미 입니다.
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
메타태그로 웹브라우즈 상에서 한글이 께어져 보이지 않토록 지정하는 태그로
브라우저가 문서를 로딩할때 자동으로 한글폰트(euc-kr)로 인코딩하게 해 줍니다.
<meta name="keywords" content="키워드를 ,로 구분하여 입력합니다.">
메타태그로 각 검색엔진에서 키워드를 입력후 검색을 하게 되면
바로 이 키워드 부분을 검색로봇이 검색하여 검색하는 키워드와
이곳에 입력된 키워드가 일치하게 되면 검색 결과물에 사이트
주소를 뿌려주게 됩니다.
키워드는 사이트의 특징이 잘 나타나는 단어를 선택해야 하며
여러개를 지정하고 싶을 때는 단어와 단어 사이를 ,(콤마)로
구분하여 입력하면 됩니다.
그리고 같은 단어를 몇번씩 반복하여 입력하게 되면 그만큼
검색 확률이 높아 진다고 합니다.
<meta name="description" content="홈페이지 설명">
메타태그로 사이트의 주요 내용을 요약하여 입력하면 됩니다.
검색엔진이 키워드를 찾은후 검색 결과물에 사이트를
뿌려주면서 사이트의 요약 정보도 보여주게 되는데
바로 이 디스크립션에서 정의한 사이트 요약 정보를
가져와서 보여주게 됩니다.
매타태그의 키워드와 디스크립션은 모든 HTML문서에
작성해 주는 것이 검색엔진 등록시 검색 확률을 높이는
방법입니다.
<title>홈페이지 타이틀</title>
HTML문서의 HEAD부분에 입력하며 여기서 입력된 타이틀이
웹브라우즈 최상단의 타이틀 부분에 나타나게 됩니다.
일반 적으로 사이트의 이름이나 또는 사이트에 대하여
아주 특징적인 단어와 이름을 함께 사용하는 경우가 많습니다.
<frameset rows="0, 1*" border="0" frameborder="NO" framespacing="0">...</frameset>
프레임 셋팅 즉 브라우즈의 창을 나누어주는 태그입니다.
프레임 셋팅 태그의 시작은 <frameset> 끝은 </frameset>입니다.
rows="0, 1*" : 프레임을 상하(rows)로 나누면서 상부 프레임의 높이는
0픽셀 그리고 하부 프레임의 높이는 상부 프레임을 제외한
나머지 부분을 가득(1*) 체우도록 정의 하였습니다.
frameborder="NO" : 프레임과 프레임 사이의 경계선 표시 방법을 결정하는
태그로 "1"로하면 경계선을 표시, "0"또는 "no"로 하면
경계선을 표시하지 않습니다.
border="0", framespacing="0" : 위의 프레임 경계선을 표시하지 않아도
브라우즈를 실행 해서 보면 프레임과 프레임 사이에 경계
부분이 남게 됩니다. 이 남는 경계부분을 완전히 없애주는
태그가 되겠습니다. border="0"는 넷스케이프에서 적용되는
태그이며 framespacing="0"는 인터넷 익스플로러에서 적용
되는 태그 입니다.
<frame name="head" noresize scrolling="no" marginwidth="0" marginheight="0" src="http://자신의 계정 주소/bgm.html">
상부 프레임의 이름 및 속성 그리고 나타낼 HTML문서를 지정해 주는 태그 입니다.
name="head" : 상부 프레임의 이름을 정의 하는 태그입니다.
여기서는 상부 프레임의 이름을 "head"로 지정 하였습니다.
프레임문서에서 프레임의 이름은 링크의 타겟을 설정하는데
반드시 있어야 하므로 항상 프레임의 이름을 정의해 주어야 합니다.
noresize : 프레임을 나누는 경계선을 고정시키고 창의 사이즈를
변경하지 못하도록 설정하는 태그 입니다.
scrolling="no" : 해당 프레임내에 데이터가 존재할 경우 그 데이터의 양이
창의 크기를 넘어갈때 스크롤바를 생성 할건지 말건지를
지정하는 태그로 여기서는 나타나지 않도록 정의 하였습니다.
marginwidth="0" : 프레임 안쪽 좌우 여백을 설정하는 태그로 0픽셀로
지정 하였습니다.
marginheight="0" : 프레임 안쪽 상하 여백을 설정하는 태그로 0픽셀로
지정 하였습니다.
src="http://자신의 계정 주소/bgm.html" : 상부 프레임에 나타낼 문서를
지정하는 태그 입니다.
이부분에 배경음악 파일을 불러 왔습니다.
<frame name="main" noresize scrolling="auto" marginwidth="0" marginheight="0" src="http://자신의 계정 주소/in.html">
하부 프레임의 이름및 속성 그리고 나타낼 HTML문서를 지정해 주는 태그 입니다.
name="main" : 하부 프레임의 이름을 정의 하는 태그입니다.
여기서는 하부 프레임의 이름을 "main"으로 지정 하였습니다.
프레임문서에서 프레임의 이름은 링크의 타겟을 설정하는데
반드시 있어야 하므로 항상 프레임의 이름을 정의해 주어야 합니다.
noresize : 상부 프레임의 태그와 동일합니다.
scrolling="auto" : 해당 프레임내에 데이터가 존재할 경우 그 데이터의 양이
창의 크기를 넘어갈때 스크롤바를 생성 할건지 말건지를
지정하는 태그로 여기서는 데이터의 양이 창의 크기보다 작으면
스크롤바가 나타나지 않고 데이터의 양이 창의 크기보다 크면
자동으로 스크롤바가 나타나는 auto로 정의를 하였습니다.
marginwidth="0" : 상부 프레임의 태그와 동일합니다.
marginheight="0" : 상부 프레임의 태그와 동일합니다.
src="http://자신의 계정 주소/in.html" : 하부 프레임에 나타낼 문서를
지정하는 태그 입니다.
이부분에 처음나타나는 페이지인 in.html을 나타내도록
정의 하였습니다. 계정내의 모든 문서는 이 프레임에
나타나게 됩니다.
<noframes>....</noframes>
프레임이 적용되지 않는 브라우즈(최근에는 거의 없습니다.)를 사용 하는 경우나,
사용자가 프레임을 표시하지 않도록 브라우즈를 설정하고 있는 경우에 표시할
내용을 설정하는 태그 입니다.<noframes>....</noframes>는 항상
<frameset>....</frameset>태그의 마지막 부분에 두어야 합니다.
텍스트 뿐만이 아니라 HTML문서를 입력 할수도 있습니다.
표준은 body태그를 입력 할수 없도록 되어 있으나 나모에서는
body태그를 자동으로 사용하고 있습니다.
굳이 body태그를 지우지 않아도 기능상의 문제는 없으므로 그대로 두었습니다.
<body>....</body>
위의 <noframes>....</noframes>태그안에 사용된 body태그로
앞서 설명을 했듯이 <noframes>....</noframes>태그 사이에서는
원래 body태그를 입력할수 없도록 되어 있지만 나모에서 자동 생성된
태그로 기능상 지장이 없어서 그대로 두었습니다.
<p>이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가 필요합니다.</p>
위에서 설명드린 프레임이 적용되지 않는 브라우즈에서 표시할 내용으로
<p>와 </p>사이의 내용이 브라우즈에 표시되게 됩니다.
<link rel="stylesheet" href="http://자신의 계정 주소/style.css" type="text/css">
외부 스타일 시트를 연결할때 사용하는 태그 입니다.
웹다이어리 강좌에서 만든 "style.css"파일을 이 문서에
연결 시켜서 해당 스타일이 적용되게 합니다.
이처럼 외부 스타일시트를 링크시켜 사용할 경우
나모에서 작업하면 간혹 본인이 원하지 않아도
프로그램에서 자동으로 스타일을 적용하는 경우가 생기는데
(특히 "body" 태그에는 반드시 스타일이 들어가게 됩니다.)
이렇게 스타일이 중복되는 경우에는 문서 자체에서
설정한 스타일이 우선순위로 적용이 되므로
자신이 원하지 않는 결과를 초래할수도 있으므로
반드시 삭제하는 작업을 해 주셔야 합니다.
<base target="_self">
베이스 타겟 지정입니다.
베이스 타겟 지정이란 한문서에 하이퍼링크가 걸린 모든 부분에
특별히 타겟 지정을 하지 않아도 자동으로 이 베이스타겟에서
지정한 타겟값을 가지게 됩니다.
현재 여기서는 모든 문서를 index.html의 "MAIN"프레임에
불러들일것이므로 타겟에 "MAIN"이라고 정의 해도 되지만
노프레임의 개념을 가지고 있으므로 "_self"타겟을 사용
하였습니다.
타겟의 종류
target="_blank" - 현재창은 그대로 두고 새로운창을 열어 연결된 문서를 보여줍니다.
target="_parent" - 현재 문서의 위쪽 프레임에 연결 문서를 보여줍니다.
(노프레임 에서는 "_srelf"와 같은 결과를 나타냅니다.)
target="_self" - 현재 자신의 창에 연결된 문서를 보여줍니다.
target=_top - 현재창에 연결 문서를 보여 줍니다.
(노프레임 에서는 "_srelf"와 같은 결과를 나타냅니다.)
이외에 프레임 문서 또는 아이프레임 문서 에서는 각 프래임의 이름 또는
아이프레임의 이름을 타겟으로 사용할수도 있습니다.
베이스 타겠에 대한 더욱 자세한 정보는 웹팁메뉴
웹팁 7. 한문서에 하이퍼링크 타겟 한번에 지정하기를 참고 바랍니다.
<title>노프레임 홈 만들기</title>
HTML문서의 HEAD부분에 입력하며 여기서 입력된 타이틀이
웹브라우즈 최상단의 타이틀 부분에 나타나게 됩니다.
일반 적으로 사이트의 이름이나 또는 사이트에 대하여
아주 특징적인 단어와 이름을 함께 사용하는 경우가 많습니다.
<meta name="generator" content="Namo WebEditor v5.0">
메타테그로 문서를 만든 툴과 제작자의 정보를 나타냅니다.
나모로 html문서를 만들게 되면
<meta name="generator" content="Namo WebEditor v5.0">이렇게 나옵니다.
"generator"부분과 "Namo WebEditor v5.0"부분을 문장의 길이는 상관 없으므로
자신에게 맞게 수정 하시면 됩니다.
이 메타테그는 문서에 아무런 영향을 미치지 못하고
소스 보기에서만 나타납니다. 따라서 이 메타테그를 웹페이지에
반드시 넣어줄 필요는 없습니다.
다른 사이트를 제작하는 경우 제작자 정보를 알리기 위하여
사용하는 태그라고 보시면 됩니다.
여기서는 이런것이 있다는 사실을 알려드리기 위하여
수정을 하고 태그 설명을 드렸습니다.
<!-- link focus 시작 -->
HTML문서 에서 주석을 달때 사용하는 태그 입니다.
주석줄은 소스보기에서만 보이고 웹페이지에는 아무런 영향을 주지 않습니다.
복잡한 페이지를 코딩할때 주석을 잘 달아두면 차후에
페이지 수정작업 발생시 아주 유용하게 사용할수 있습니다.
주석은 <!--내용-->형식으로 사용하며 "내용" 부분에 필요한
주석을 명기하면 됩니다.
이 강좌를 보시는 분들도 이 주석태그를 잘 활용하셔서
효율적인 문서를 관리 하시기 바랍니다.
<script language="javascript"> 스크립터 내용 </script>
각종 스크립터를 적용할때 사용하는 태그 입니다.
스크립터 적용은 <script language="언어의 종류"> 스크립터 내용 </script>
이런 형식으로 사용이 됩니다.
여기서는 자바스크립터를 적용 하였습니다.
<!--
function allblur() {
for (i = 0; i < document.links.length; i++)
document.links[i].onfocus = document.links[i].blur;
}
document.onfocusin = allblur;
//-->
위의 자바 스크립터는 하이퍼링크 설정된 이미지를 클릭 했을떄
이미지 주위로 점선 테두리가 생기는게 되는데 이 테두리를
없애주는 스크립터 입니다.
시작과 끝부분에 <!-- 스크립터 //-->로 주석 처리를 한 이유는
자바스크립터가 지원되지 않는 브라우즈에서 로딩을 하게 되면
스크립터의 내용이 화면상에 나타나 버리게 됩니다.
이것을 방지 하기 위하여 주석 처리로 스크립터를 씌워준 것입니다.
이렇듯 스타일시트와 자바스크립터는 스크립터의 내용이
화면상에 출력 되는 현상을 방지하기 위하여 거의 대부분
주석 처리를 하여서 사용 하고 있습니다.
<body>....</body>
HTML문서의 본문 부분입니다.
웹브라우즈를 실행하고 문서를 로딩하면 화면상에
실제로 보여지는 부분이 바로 <body>와 </body>사이의 내용들 입니다.
<table cellpadding="0" cellspacing="0" width="100%" height="100%" bgcolor="black"> ... </table>
테이블 즉 화면상에서 표를 만들어 주는 태그 입니다.
표를 만드는 테이블 태그의 기본 구성은 아래와 같습니다.
<table>
<tr>
<td>내용</td>
</tr>
</table>
표를 만들때 가장 기본으로 들어가야 하는 태그로
테이블(table) 안에 가로로 한 줄을 만들고(tr) 그 가로 줄 안에
다시 한개의 칸(td-"셀이라고 합니다")을 만들어서 "내용"을 입력하게 됩니다.
위의 태그들은 테이블을 만들때 반드시 같이 사용해야 하도록
약속이 되어 있습니다.
<table> : 테이블의 시작을 정의하는 태그 입니다.
cellpadding="0" : 테이블 안에 생성되는 셀(td)의 안쪽 여백설정을
정의하는 태그이며 여백을 "0" 으로 설정 하였습니다.
cellspacing="0" : 테이블 안에 생성되는 셀(td)이 여러개 있을때 그
각각의 셀과 셀의 간격을 정의하는 태그이며 간격을 "0"으로
설정 하였습니다.
width="100%" : 테이블의 폭을 정의하는 태그 이며 브라우즈의 크기에
상관없이 항상 가득 차도록 "100%"로 설정 하였습니다.
height="100%" : 테이블의 높이를 정의하는 태그 이며 브라우즈의 크기에
상관없이 항상 가득 차도록 "100%"로 설정 하였습니다.
bgcolor="black" : 테이블안의 배경색상을 정의하는 태그 이며
"black(검은색)"으로 설정 하였습니다.
</table> : 테이블의 종료를 정의하는 태그 입니다.
(거의 모든 html태그는 시작과 종료를 정의하는 태그가 한쌍으로
사용되어야 합니다.)
<tr>....</tr>
테이블(table) 안쪽에 가로 방향으로 하나의 줄을 생성하는
태그 입니다.
tr태그에도 테이블 테그와 같이 폭, 높이 등 크기에 관한
설정이 가능 합니다.
<tr> : 가로 한줄의 시작을 정의하는 태그 입니다.
</tr> : 가로 한줄의 종료를 정의하는 태그 입니다.
(거의 모든 html태그는 시작과 종료를 정의하는 태그가 한쌍으로
사용되어야 합니다.)
<td width="100%" height="100%" align="center" valign="middle">....</td>
위에서 만든 가로줄 내에 칸을 만드는 태그입니다.
이칸의 명칭을 셀이라고 합니다.
<td> : 셀의 시작을 정의하는 태그 입니다.
width="100%" : 셀의 폭을 정의하는 태그 이며 테이블의 크기에
따라 항상 가득 차도록 "100%"로 설정 하였습니다.
height="100%" : 셀의 높이를 정의하는 태그 이며 테이블의 크기에
상관없이 항상 가득 차도록 "100%"로 설정 하였습니다.
align="center" : 셀안에 있는 내용의 수평방향 정열 태그입니다.
셀의 폭에 상관없이 내용이 항상 가운데에 위치하도록 정의 하였습니다.
valign="center" : 셀안에 있는 내용의 수직방향 정열 태그입니다.
셀의 높이에 상관없이 내용이 항상 가운데에 위치하도록 정의 하였습니다.
</td> : 셀의 종료를 정의하는 태그 입니다.
(거의 모든 html태그는 시작과 종료를 정의하는 태그가 한쌍으로
사용되어야 합니다.)
<p>~</p> : 태그안의 범위가 하나의 단락임을 나타냅니다.
<p>태그는 이전과 이후에 한줄의 여백이 만들어 짐으로 긴 문장에서
줄바꿈을 할때 <p>태그를 쓰기도 합니다.
그리고 body, td, div이후에 바로 <p>태그가 나오면
이 태그에서는 상단에 한줄의 여백을 띄우지 않습니다.
종료 태그인 </p>를 생략해도 이상은 없지만 정확한
문서 작성을 위해서는 항상 붙여 주는 것이 좋습니다.
<font>~</font> : <font>와 </font>사이에
작성된 폰트의 스타일을 결정하는 태그 입니다.
스타일시트에서 누락된 부분이나 문서전체가 아닌
한정적으로 적용할때 사용 하는 태그 입니다.
여기서는 "어서오세요 여기는 연습중인 홈페이지입니다."
라는 폰트를 정의하기 위하여 사용 되었습니다.
color="white" : 위의 폰트의 색상을 정의하는 태그로
여기서는 흰색을 적용 하였습니다.
face="굴림체" : 위의 폰트의 종류를 정의하는 태그로
여기서는 "굴림체"를 적용 하였습니다.
<span>~</span> : <span> 태그는 id나 class속성을 이용하여
스타일 시트와 함께 사용하며 Inline레벨 요소로서 한 줄에 대한
스타일을 적용 시킬때 사용하는 태그 입니다.
style="font-size:9pt;" : <span>과 </span>사이에 있는 폰트에
스타일을 적용 하는 것으로 여기서는 폰트의 크기를 9포인트로
적용 하였습니다.
<b>~</b> : <b>와 </b>사이에 있는 텍스트의 굵기를
두껍게 정의하는 태그 입니다.
<a href="http://자신의계정주소/main.html" class="link2">~</a> :
하이퍼 링크를 정의하는 태그 입니다.
여기서는 "ENTER"라는 글자를 클릭하면 "main.html"이라는
문서가 현재창에 나타나게 됩니다.
타겟 지정이 없는데도 현재창에 나타나는 이유는
줄번호 8번에서 이미 베이스타겟으로 "_self"를 정의해
두었기 때문입니다.
class="link2"는 하이퍼링크된 문자의 스타일 정의로
"style.css"에서 "link2"라는 클라스 정의 스타일이
적용 되게 됩니다.
배경음악 "ON", "OFF"의 하이퍼 링크 설정에서 "target="head"로
정의 된것은 프레임 셋 문서인 "index.html"에서 "HEAD"프레임에
배경음악을 불러 왔으므로 타겟 설정을 "HEAD"로 정의 한것입니다.
'Development > HTML' 카테고리의 다른 글
| OBJECT 태그 사용법 (0) | 2006.12.01 |
|---|---|
| 레이어 이동 스크립트 (0) | 2006.12.01 |
| 테이블 대신 필드셋(fieldset)을 이용하기 (0) | 2006.01.05 |
| marquee 태그 (0) | 2005.08.14 |
| 플래시 배경 투명하게 삽입하기 (0) | 2005.08.13 |
| 프레임 나뉜 페이지에서 새로고침시 페이지 유지하기 (0) | 2005.07.07 |
댓글