웹마스터 팁

  2. Support
  3. 웹마스터 팁

[기초]홈페이지의 프레임 나누기 입니다.

2004.12.10 22:19

piasol

종종 질문이 들어와서 찾아보니까 프레임 나누기가 설명이 있긴한데.
그것들에 약간 조미료 (?) 보충설명을 더 드릴까해서
이렇게올리게 됐습니다.
일단보충이지만. 처음부터 설명드리도록 할께요 ^^
안정적이고 쉬운 프레임 나누기입니다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
현제 의 프레임 나누기는 상단 과 하단 나누기 를 예로 들었습니다.
음악방송이나 또는 bgm 의 플레이 시에 페이지가 넘어가도
음악이 끈이지 않게 나오는 방법을 올린것이거든요.
그럼 설명드리겠습니다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
1) 프레임의 기초 사항

- 일단 두개의 프레임이 접합된것을 index.html 이라봅니다.
- 그리고 홈페이지의 매인부분(내용이 들어가는부분) 을 main.html 이라고 하구요.
- 음악플레이바 가 설치될 곳을 music.html 이라고 가정하겠습니다.

*여기서  알아두셔야 할점은 index.html 의 페이지 에는 main.html 과 music.html 이 모두 있는것입니다
- 소스를 보고 설명드리겠습니다.

2) index.html

-----아래부터 --------------------------------------------------------------------------------------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>

<frameset rows="*,62" cols="*" framespacing="0" frameborder="NO" border="0">
  <frame src="main.htm" name="mainFrame">
  <frame src="music.htm" name="bottomFrame" scrolling="NO" noresize>
</frameset>
<noframes><body>

</body></noframes>
</html>
---------------------------- 여기까지 ---------------------------------------------------------------

보시면 아시겠지만 두가지의 프레임이 들어가있습니다.
위에 말씀드렸던 main.html 과 music.html 이 있죠? ^^
이것들은 어디까지나 보이기위한 이름이죠. 그래서 살펴보면
  <frame src="main.htm" name="mainFrame">  <-- mainFrame 과
  <frame src="music.htm" name="bottomFrame" scrolling="NO" noresize><--bottomFrame 이라고

적혀있는걸 보실수가있습니다.
mainFrame 은 말그데로 홈페이지의 매인부분이 출력되는것이죠.
bottomFrame 은 제일 하단부를 말하는것입니다.
그럼 이게 왜 필요할까요? ^^

만약. 홈페이지 매인에서 예를들어 자유게시판으로 간다는 링크를 주게되면.
그 링크가 아무 타겟을 안준다면 메인프레임 내에서 돌겠지만. 내가 원하는 프레임으로 가게 하려면
타겟에 명령을 줘야겠죠.

예) <a href="http://www.홈주소.xxx" target="mainFrame"> 자유게시판 </a>

이런식으로 하게되면 매인프레임에 자유게시판을 열어라 하는 명령입니다.
이정도까지만 설명드리면. 다음은 응용하실수가있겠죠? ^^

자 그럼. index.html 의 내부소스 를 보여드렸습니다.
그럼 main.html 은 어떻게 해야하나?
main.html 은 여러분들 께서 홈페이지 를 프레임을 안나누었다고 가정을했을때의
index 페이지 와같이 만들어주시면됩니다.
그러니까. 그냥 홈페이지 를 만드시면되죠. 그리고 나서 저장을 할때에.
index.html 이 아니라. main.html 로 저장을 하시면되죠.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 여기부터 main.html ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<html>
<head>
<title>프레임나누기</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>

<body>

매인 페이지 부분

</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 여기까지 main.html ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

뭐 지금위의 예제는 간단하지만. 여러분들 홈페이지 소스를 넣으시면됩니다.
여기서는 위에 말씀드린것과 같이 매인 카테고리에 타겟만 잘 걸어주면되겠죠. ^^
물론 제로보드 의 최근 게시물을 불러왔을때. 그것을 누르면 제로보드는 main.html 로 자동으로
됩니다. 처음 설정이 그렇게 되있기때문에 별 신경은 안쓰셔도될겁니다.

그럼 다음은 음악 플레이어 가 들어갈 하단의 music.html 이죠.
가만히 보면 프레임을 나눠두고나서 여기에 아이프레임을 넣으시는분들이 종종계세요.
그런데 iframe 도 물론 나름데로 쓰기편하고 도움이 되지만.

조금 지나서 보면 높이조절을 잘하고 그래도 플레이바 를 누르면 약간씩 움직여져요.
또는 위,아래로 내려가거든요. 마우스로 잡고서 드레그하면 또 움직이곤 하죠 ^^
물론 대수로운건 아니지만. 꼼꼼히 홈페이지 만드시는분들에게는 정말 싫은존재가 된답니다 ^^
일단 그럼 music.html 의 소스 를 보죠.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 여기부터 music.html ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<html>
<head>
<title>음악부분</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>

<body>
음악 프레임이 들어갈 페이지
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 여기까지 music.html ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

뭐 여기도 별반 차이는 없어보이죠 ^^
그런데 음악을 넣는 소스를 넣게 되시면.
- 일단 bgm 소스가 있는 분들은. 그냥 그 소스 그데로 몽땅 music.html 에 넣으시구요.
　높이와 폭 조절만 해주시면됩니다. 폭은 100% 로 하시면되요. 정렬은 홈페이지 성격에 알맞게
　좌,우 측에 정렬하시면되죠.
　높이는 한 13~5 픽셀 정도가 가장 안정되고. 플레이어의 높이에 따라 변하겠죠 ^^

- 음악 방송의 소스와 같은경우는
　플레이어 바가 따로 있을겁니다. 그럼 그 플레이어바를 인크루드 시키는 방법이 있죠.
　music.html 에 음악플레이 바를 인크루드 시켜서 재생하면 절대 흔들리지 않는답니다.

- 그리고 iframe 으로 넣는 분들께서는요.
　<iframe src="플레이주소"width="가로크기,높이"scrolling="설정"frameborder=no name=zzz</iframe>
　이런식으로 되어있자나요.

　플레이 주소 에는 음악방송플레이어 소스 주소  또는 bgm 음악이 있는 주소를 넣으시면됩니다.
　가로크기는 그냥 100% 하시는것이 적절하구요 (테이블 짜셔서 홈에 맞게 조절하셔도편합니다)
　높이는 플레이어 의 높이를 계산하셔서 그 높이에 맞추시면되죠.
　스크롤링은 "no" 로 해두시는것이 좋구요.  name 부분은 iframe 이라고 해두시면됩니다.

여기까진데요.
물론 뭐 쉽게 하는 방법도 있겠지만. 일단 프레임셋 나누는 방법을 올려드렸습니다.
고수분들@!! 핀잔은 노노~ 우리도 초보일때가있다!! (나도 초보지만 ㅠㅠ) ㅋㅋㅋ
그걸 생각하셔서 지금 내용에 조금 더 보충될수있는 좋은 설명 부탁드리구요.
질문은 받도록 할께요 ^^  너무 길게 썼나? ㅠㅠ;;


좋은 홈페이지 만드세요 ^^
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
XHTML 1.0 Strict에서 더 이상 사용할 수 없는 태그 / 속성 [16] EDENe 2005.01.22
[기초]홈페이지의 프레임 나누기 입니다. [5] piasol 2004.12.10
드래그 금지 및 오른쪽 버튼 금지 소스 [6] 편입성공기 2004.12.06
브라우저 주소창에 긴 경로 안 나타나게 하기 [7] 편입성공기 2004.12.06
새창에 폼태그로 전송하기 편입성공기 2004.12.06
도메인 포워딩 즉 페이지 자동이동하기 [6] 편입성공기 2004.12.06
페이지 회색스크롤바로 바꾸기 편입성공기 2004.12.06
톡톡 튀는 홈페이지 테이블 제작하기 ^^ [6] piasol 2004.12.03
최근게시물의 폰트크기와 링크색상 바꾸는 방법 LUFFY 2004.11.20
웹폰트사용에 대한 실체를 밝힌다!! [22] Multi_Taeji 2004.11.13
a링크를 이용 새창 띄우기 [10] 토토루 2004.11.07
웹문서 검색을 대비한 헤더,푸터 나누기. [4] 그럴까? 2004.10.29
각 객체접근.. [2] canelia 2004.10.29
W3C 표준 권고안. 앞으로 꼭 지켜주세요.. [14] canelia 2004.10.29
스타일시트에서 링크포커스 없애기 [12] keymove 2004.10.26
타이틀 바에 움직이는 타이틀 넣기. [5] 덜렁이 2004.10.16
<button>태그를 아시나요? [6] 그냥이렇게。 2004.10.13
TabIndex를 이용하여 탭키 컨트롤하기 [5] 손상모 2004.10.08
테이블 주위에 점선효과!!!~~(초간단팁!) [6] 초라 2004.09.25
경고창 없이 부모창 닫고 아기창에서 마우스 오른버튼 클릭시 아기창도 닫는다. [4] 詩와언어™ 2004.08.27
태그 쓰기