웹마스터 팁

  2. Support
  3. 웹마스터 팁

[초보자용] 노프레임 이해하고 만들기

2003.06.05 17:27

zeroMD™

http://zeromd.com일단 노프레임이란
말 그대로 No frame ...
프레임이 없다는 말씀.

프레임이 있는 홈페이지는 메뉴바가 오른쪽이나 위쪽에 항상
고정되어 있고, 내용만 바를 주~~욱 내려서 봅니다.
그런데 노프레임이 프레임이 따로 없어서 메뉴도 오른쪽 바를
내리면 같이 주~~욱 내려갑니다. 보통 검색사이트나 신문 등은
이런 노프레임으로 되어있죠.

노프레임을 만드려면 일단 테이블을 이해해야 합니다.

------------------------------
:                menu                   :
------------------------------
:           :                               :
:           :                               :
:           :                               :
: menu  :         content            :
:           :                               :
:           :                               :
:           :                               :
:           :                               :
:           :                               :
------------------------------
:              copyright                :
------------------------------

제홈피나 대부분 이런 형식으로 되어있습니다.

그러면 일단 테이블을 만듭니다.

<html>
</html>
<body>
  <table>
     <tr>
        <td></td>
      </tr>
     <tr>
         <td></td>
         <td>
                여기에 content 내용이 들어가겠죠.

                </td>
      </tr>
      <tr>
          <td></td>
       </tr>
    </table>

</body>

테이블을 만들었으면 이것을 이용해서
헤더와 푸터를 만듭니다.
헤더와 푸터라는 말 자체는 특별한 의미는 없습니다.
파일이름이랑은 상관없다는 말씀. 단지 위에 붙고, 아래 붙는다는 것.

위에서 content 는 파일마다 바뀌겠지만, 헤더와 푸터는 바뀌지 말아야 합니다.
헤더와 푸터의 파일이름을 header.html, footer.html이라고 하고,
내용 부분을 content.html이라고 합시다.

그러면 header.html에 content의 앞부분 즉
------------------------------
:                menu                   :
------------------------------
:           :                              
:           :                              
:           :                              
: menu  :                
:           :                              
:           :                              
:           :                              
:           :                              
:           :                              
---------
가 헤더가 되는 것입니다.
그래서 header.html은 다음과 같이 되고...

<html>
</html>
<body>
  <table>
     <tr>
        <td></td>
      </tr>
     <tr>
         <td></td>
         <td>

이 되겠죠.

그러면 content의 뒷부분
                            
                                            :
                                            :
                                            :
                                            :
                                            :
                                            :
                                            :
                                            :
------------------------------
:              copyright                :
------------------------------
은 푸터가 됩니다.
footer.html은 다음과 같이 됩니다.

</td>
      </tr>
      <tr>
          <td></td>
       </tr>
    </table>

</body>


마지막으로 content.html은
인클루드를 이용해서 header.html과 footer.html을 삽입합니다.
content.html을 살펴보면

<? include"header_zeromd.html"; ?>

여기에 content 내용이 들어가겠죠.


<? include"footer_zeromd.html"; ?>


이렇게 됩니다.
그래서 주소창에서 content.html을 읽게 되면
------------------------------
:                menu                   :
------------------------------
:           :                               :
:           :                               :
:           :                               :
: menu  :         content            :
:           :                               :
:           :                               :
:           :                               :
:           :                               :
:           :                               :
------------------------------
:              copyright                :
------------------------------

이렇게 나옵니다.
이제 content만 바꾸면서 여러 파일을 만들 수 있겠죠.
주제를 바꿔서 header과 footer도 다양하게 할수 있겠습니다.

허접설명이었지만, 끝까지 봐줘서 고맙습니다.
모르시는 부분 있으면 질문해주세요..

이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
링크 클릭시 점선 없애는 이벤트. 일일히 지정안하고 한꺼번에 되게 하기. [14] 최용근 2003.07.24
링크부분에 밑줄을 없애는 방법.... [10] 공유 2003.07.19
내 카페/홈페이지에 뉴스 달기 소스 공개 [9] 깜보 2003.07.10
히야[HIYA] - 노프레임 왕초보가되어 프로젝트 !! [ 노프레임 홈피 만들기 !! 7번째강좌 ] [19] 공찬영 2003.07.05
도메인 주소를 고정한 페이지를 새로고침해도 처음으로 돌아가는것을 방지 ★ [24] 새벽이슬 2003.07.05
반짝이게 해보자 [5] 팩맨24 2003.07.03
[HTML에 필터 적용] 알파 필터 filter: Alpha(Opacity= 적용에 주의할 참고사항들 [2] 김병희 2003.06.28
노프레임 게시판을 만들때 이미지 경로지정 [11] webzang 2003.06.26
새창에서 세로스크롤만 되도록 하기 [10] 윙크벨 2003.06.26
[매크로] mac_0004 메뉴를 담은 표의 위치와 모양 바꿔치기 매크로 [1] 김병희 2003.06.16
자신이 만든 문서가 HTML(XHTML) 표준에 따르고 있는지 검사해 보는 방법. [6] 귀여운Rootin 2003.06.14
[매크로] 노프레임 페이지 작성시 나모에서 링크 타겟 매크로로 입력하기 [4] 김병희 2003.06.14
펼침메뉴소스 [12] 이성헌 2003.06.08
스크롤바 내맘대루 색바꾸기 [예제추가] [5] ˚ⓢⓘⓔ。 2003.06.07
[re] 쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [5] 파마아줌마 2003.07.21
[초보자용] 노프레임 이해하고 만들기 [16] zeroMD™ 2003.06.05
개미선 없애기.. [10] -크크크- 2003.06.04
무심코 지나치기 쉬운 인푸트(input)폼에 대한 몇가지들.... [4] RedEye(rinja) 2003.05.23
CSS파일이용하여 링크에 건반효과주기(강력추천) [8] 호호짱 2003.05.23
onload 두개 사용하려고 할때... [5] chosun815 2003.05.20
태그 쓰기