홈페이지를 만들어 보자 (템플릿 -4)

ⓑ body 부분
 본격적으로 우리 눈에 직접 보여지는 부분인 body 부분을 만들어 보도록 하겠습니다. 
 먼저 메뉴 같은 건 테이블을 만들어서 넣어 주는게 좋습니다. 그래야 안 깨지고 고정되어 보여질 수 있습니다. 
  left.htm

 자..위에 테이블 보시면 아주 어려워 보이죠? 하지만 아주 간단합니다. 그냥 기본구조에 링크태그만 넣은 건데....  테이블을 만들줄 모르신다면 어여 강좌 표만들기로 가서 보고 오세요 ^^
 첫줄에 보면 
      <table border="0" cellspacing="0" width="150" height="452" background="img/menu_bg.gif">
 
 이렇게 되어 있는데요...  border="0" 은 테이블의 테두리 두께를 조절하는 속성입니다. 물론 값을 0 으로 주면 테이블 테두리가 보이지 않게되죠. 그다음 cellspacing="0" 은 셀과 셀사이의 간격을 조절하는 속성이죠..^^ 그다음 width 와 height 는 테이블의 너비/높이 조절하는 거구요. 끝에 background 는 말 그대로 테이블 안의 배경이미지를 넣어 주는 속성입니다.  여기에서는 ses 이미지인 menu_bg.gif 이미지파일을 넣어 주었는데요.. 이미지는 표에 맞게 잘라 만든 것입니다. 여러분들도 포토샵으로 간단하게 하실 수 있습니다. 어... 그런데.. 이미지주소가 img/menu_bg.gif 로 되어 있죠?  이건 상대경로로 적어준 것인데요... 원래 앞에 https://홈페이지주소/경로/ ☜이부분이 생략되어 있는거지요 ^^
 ※ 절대경로와 상대경로
 여기서 반드시 이해하고 넘어가야 할게 바로 절대경로와 상대경로인데요.. 현재 태그매니아 자바스크립트 부분에 보시면 절대경로와 상대경로에 대해서 자세히 설명되어 있습니다. 하지만 약간 어려운 부분도 있으므로 제가 쉽고 간단하게 다시 설명하자면... 
 절대경로란 어떠한 파일에 대해서 어느곳에서나 바로 접속할 수 있는 경로(주소)를 말합니다. 즉, 
 https://tagmania.net/img/ses.jpg ☜이런 주소가 있다고 합시다.. 그럼 여기서 절대경로는 
 https://tagmania.net/img/ses1.gif 가 되는거죠. 똑같죠? ^^
 반면에 상대경로란 특정 공간 안에서만 접속할 수 있는 경로(주소)를 말합니다. 즉, 
 https://tagmania.net/img/ses.jpg ☜이러한 절대경로(주소)가 있고 
 https://tagmania.net/left.htm 이라는 웹페이지가 있다면 left.htm 웹페이지에서의 ses1.gif 의 상대경로는 img/ses.jpg 가 되는 것입니다.  따라서 left.htm 안에서 ses.jpg 를 불러올때는 절대경로를 쓰지 않고 상대적인 경로 즉, img/ses.jpg 만 쓰면 이미지가 나타나게 되는 겁니다. 아..설명이 너무 복잡하나..-_-a   더 쉽게 예를 들어가면 설명하자면 .. 여러분들이 다른  홈페이지의 html 소스를 복사해서 여러분의 홈페이지에 그대로 넣는 경우가 있을 겁니다. 이경우 글자나 표같은 건 잘 나오는데  이미지나 음악 같은 건 다 깨지거나 나오지 않는 경우가 대부분인데요.. 나오지 않는 이유가 바로 해당홈페이지의 상대경로로 이미지나 음악주소를 적어놓았기 때문입니다. 이 경우 해당 홈페이지내에서만 제대로 나오게 되는 거죠. 이해되실라나? ㅡㅡa 
 여튼 절대경로는 https://~ 부터 시작해서 끝까지 다 나오는 걸 말하고 상대경로는 https://~가 나오지 않고 ../디렉토리/파일명 이렇게 나오는 걸 말합니다. 그리고 상대경로는 그 디렉토리 단계가 여러단계로 되면 해당 디렉토리를 다 써주는 게 아니라 ../../../디렉토리/파일명 ☜이런식으로 앞부분이 생략됩니다.

 아... 그리고 body 링크태그를 보시면 target="story" ☜이렇게 적혀있죠? 이건 해당 링크된 페이지가 어느 프레임화면에 나오게 해줄건지 지정해주는 것입니다. 말그대로 타겟(목적지)를 지정해주는 거죠.앞에서 제가 name 설정이 중요하다고 말씀드렸죠? ^^ 바로 여기처럼 메뉴에서 target 지정해줄때 바로 name 값을 사용하는 것입니다.  target 은 링크태그의 속성이구요... 쌍따옴표 안의 story 는 타겟네임 혹은 프레임네임 이라고 합니다. 프레임네임은 영문자로 이루어진 단어 범위에서 자기가 임의대로 만들어 주면 됩니다. ^^
 
 에구... 메뉴부분이 다 설명이 된건가요? ㅡㅡa  그럼 다음 페이지에서는 main.htm 을 만들어 보도록 하겠습니다...