## 1 ## 대강 살펴보기
노프레임 홈피만들기는 기본적으로 html만 익혔다면 누구든 할 수 있는 간단한 것이다. 그럼에도 노프레임이란 이름 앞에서 왠지 작아지는 것은 편견!!! 바로 그 편견 때문이다. 오늘 이 시간에 노프레임의 실제를 보며 그 편견을 깨보자. (싫으냐? -_-)
우선 테이블은 알고 있어야 할 것이다. 테이블을 모든다면 그냥 빽 버튼 누르고 돌아기시라. 여기는 웹디자인 강좌 사이트가 아니다. 신키, 엔지오, 쭘스, 깜보 등등....... 좋은데 많~잖아? 기본도 없이 밥 떠먹여 달라는 도둑심보를 가지고 뭘 하겠다는 건가? 그러니 테이블을 짜는 것 colspan rowspan 쯤은 자유자재로 이용할 줄 아는 사람만 다음으로 넘어가도록 하자.
아래 그림을 보시라.
왼쪽이 순수한 html로만 이루어진 메인 페이지이고 오른쪽이 제로보드 페이지인 자유게시판이다. 노프레임 홈피인 이 사이트를 보면 가운데 점선 표시된 부분만 내용이 다르고 그밖에는 전체적인 형태가 거의 같음을 알 수 있다. 가장 단순한 형태인 이 사이트 뿐만이 아니라 노프레임 홈피가 대부분 그런 경향이 있다.
위는 푸무클님의 홈
위는
미니위니
위는 리디폭스닷컴
보고 무얼 느끼셨는가? 메인 페이지와 제로보드 페이지 사이에 상당한 통일성이 지켜지고 있음을 발견할 수 있을 것이다. 물론 노프레임 홈피를 꾸밀 때 반드시 "메인 페이지=제로보드 페이지"로 꾸며야 하는 이유는 없다. 그런데도 이런 통일성이 유지되는 이유 중에 하나는......
......... 메인과 제로보드 페이지에서 사용하는 헤더와 풋터파일이 서로 비슷하거나 심지어 똑같은 경우도 있기 때문이다. 아직 뭔 말인지 감이 안오더라도 걱정할 필요 없다. 직접 해보믄 되니까 말이다.
======================================================================
근데 넘어가기 전에 하나만 말하고 가자. 여러분 계정의 디렉토리 좀 위와 같이 정리하시기 바란다. 각종 헤더/풋터 파일을 넣어둘 디렉토리 1개, 이미지 파일 모두 때려넣을 디렉토리 1개, 그리고 제로보드 설치된 디렉토리 1개 말이다. 그리고 기본적으로 index.html 이 있어야 하겠고.
천천히 알게 되겠지만 저렇게 해두면 경로 쓸 때 무쟈게 편하다. 헷갈릴 일이 없다! 무조건 ../fox/어쩌고.html 이나 ../img/어쩌고.jpg 하면 되니깐 말이다. 뿐만 아니라 리뉴얼 할때는 2fox 와 2img 디렉토리만 만들면 되니까 얼마나 편하냐. fox 와 img 로 홈피 잘 돌리는 동안에 2fox 와 2img 디렉토리에는 리뉴얼 페이지를 만드는 것이다. 그러다 완성되면 연결만 index.html 에서 2fox 로 수정해주면 되니 어찌 편리하지 않을쏘냐.
덧붙여 제로보드 디렉토리를 zeroboard 로 하는 사람이 있는데..... -_-;; 안타깝다. 그거 디렉토리 이름 길어봐야 손해보는 건 여러분이다. 타이핑은 알바가 대신해주나? 왜 쓸데없이 길게 하는지 이해를 못하겠다. (타이핑 자체에 보람을 느낀다면 미안하다;;;)
======================================================================
## 2 ## 가장 간단한 구조
http://www.relove.na.ly
위 홈페이지는 노프레임 홈피가 가질 수 있는 가장 간단한 구조를 가지고 있다. 그러니 일단 저 홈페이지부터 분석에 들어가도록 하자. 테이블을 대충 잡아보면 아래와 같다.
검은 선으로 테이블을 표시한 것이다. 아랫부분 좀 잘렸지만 그냥 넘어가자. 어쨌건 위 테이블을 소스로 표시하라면 여러분은 다음과 같이 할 수 있다.
http://reedyfox.com/cont/nof501.phps
그리고 실제로는 다음과 같이 출력될 것이다.
http://reedyfox.com/cont/nof501.html
너무 당연한 소리를 길게 한 건가?
다이아몬드 원석이 아무리 커도 그걸 제대로 쪼개내지 않으면 아무 가치를 발하지 못하는 것처럼 이제 저걸 여러분의 노프레임 홈피에 맞게 쪼개고 자르는 작업이 남았다. 테이블에 대한 이해가 중요한 것은
http://reedyfox.com/cont/nof501.html 를 보고 "아... 여기를 잘라야겠구나...."하고 생각해도 정작 소스 중에 어디가 그 부분인지를 잘 모르는 사람이 많기 때문이다.
그러나 너무나 많은 강좌에서 수많은 지침이 있었다.
<알맹이> 앞뒤로 잘라라!!!! 그거다. 알맹이 앞뒤로 자르면 되는 거다. 이게 어려운가? 그게 아니면 뭐가 알맹이인지를 몰라서 헷갈리는 건가? 그렇다면 여러분은 홈피를 만들 때 최소한 연습장에라도 한 번 정도 홈피 구조를 그려보지 않았다는 얘기가 된다. 그냥 모니터만 보고 있어면 밥을 떠먹여 주냔 말이다.
연습장에다가 한 번 그려보라.
http://reedyfox.com/cont/nof501.html 이거처럼 말이다. 어디에 로그인을 넣고 어디에 메뉴를 넣고 어디에 알맹이가 들어가고.... 등등... 그렇게 하고 나서
http://reedyfox.com/cont/nof501.phps 이렇게 소스를 짜는 것이고, 그럼 알맹이가 어딘지는 저절로 알게 되지 않는가?
떠들어서 미안하고, 암튼, 알맹이 앞뒤로 잘라보자꾸나!
이렇게 완성된 head.html 과 main.html 과 foot.html 을 fox 디렉토리에 업로드하자. (디렉토리 이름은 맘대로 정해도 좋다. 우야간에 여기서는 fox 디렉토리라고 부르도록 하자.)
자, 그럼 fox 디렉토리에 업로드된 세 파일들은 첫 만남을 어색해하며 멀뚱멀뚱 서로 쳐다보고 있겠지? 이 세 파일이 각각 떨어져 있으면 아무 소용이 없다. 3개로 분리된 이 녀석들을 원래대로 붙여줘야 한단 말이다. 그때 사용되는 것이 바로~~~~~~~
.............인 것이다. -_-)v
인클루드를 사용해서 세 파일을 한데 붙여주기 위해 main.html 을 열고
와 같이 수정해주자. 그리고나서
http://홈페이지주소/fox/main.html 을 주소입력창에 타이핑해보면 놀랍게도;;;;
http://reedyfox.com/cont/nof501.html 와 똑같은 화면이 펼쳐져 있을 것이다.
정리해보자.
지금까지 우리가 땀흘리며 했던 게 뭔가?
1) 멀쩡한 파일을 3부분으로 나눈다.
2) 그 3부분을 인클루드로 다시 붙인다.
3) 완성~!
이거란 말이다.
<<내일 수업 준비를 해야하는 관계로 다음 이시간에~~~ -_-:;;;;;>>
명 오늘 
명
PRINT Text
PRINT HTML
