⑧ 프레임 테그
2005-02-25 15:52:38 read : 65536
프레임셋 (Frameset)
자
그럼 이제 태그중에 초보들한테 제일 머리에 안들어온다는
그 재수없고 짜증나는
프레임 태그를 배워볼까요-
일단
개념이 안잡혀서 그러니까 개념부터 알아보도록 하죠!
프레임 태그는 기본적인
태그들과는 다른 개념입니다.
한 페이지에 태그를넣고 그걸 걍 보고 음~ 하는게
아니라..
홈페이지 전용 태그입니다.
문서가 여러개 있어야죠. (html문서)
home.html , menu.html , main.html 이런식으로
적어도 세 개는 있어야죠-
암튼 자 이제,
프레임
태그를 배워봅시다아앗!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ~!
★따라해보기-
프레임을
처음 접하시는 분들은 작업을 같이 하면서 설명을 들어볼까요?
따라해보면 쉽게
알게되요!
일단. 자기 계정에
html 문서를 준비해요. ^^
계정이 없으신분은 만드세요. (네이버, 네띠앙, 한미르
등)
그리고는, html 문서를 만드세요. 이름을 각각 home.html , menu.html ,
main.html , news.html 로 해서 네개요.
그리고 home.html 문서에다가 이런
프레임 태그를 적으세요.
이렇게.↓
(기본)
|
<frameset cols="200, *">
<frame name="left"
src="menu.html">
<frame name="right"
src="main.html">
</frameset>
|
← 자. 그럼 이 소스에 대해
쪼끔(?) 설명을... 음하핫
대충 이런 명령을 한겁니다.
첫째
줄은- 프레임셋이 시작됐다!!.
프레임셋을 가로로(cols)
나눠라. 왼쪽
프레임은, 절대적으로 200픽셀이고
그다음은
나머지 값으로 알아서 해라!! (*)
그리고 둘째줄은- 이쪽 칸(프레임)은 이름이 left 이다.
(name="left")
그리고 이프레임의 문서는 menu.html을
불러라.(나타내라)
(src="menu.html")
셋째줄은
알아서....둘째줄하고 비슷한 식입니다
넷째줄은 프레임셋이
끝났다 (/frameset)입니다.
-이
설명은 적지 말고 왼쪽의 소스만 복사하세요!!-
|
자 그리고 이젠 다음 문서인 menu.html
에다가 소스를 적습니다
메뉴에
맞는 태그를 적어야 합니다. 링크태그를요.
이케여↓ ※링크시킬 때 타겟은 right
로-
|
<h3> 메뉴다! </h3>
<p>
<a
href="main.html" target="right">메인화면</a>
<p>
<a
href="news.html" target="right">news</a>
<p>
<a
href="http://www.naver.com" target="right">
지식까지
검색해줄거같아 보이는 네이버
</a>
|
참! 그리고 저기 위에 home.html
은 소스를 <head>와
</head> 사이에 넣구요, 왼쪽의
menu.html 소스는
<body>와</body> 사이에
넣으세요.
꼭 그렇게 하지 않고 소스만 그냥 적어도 되지만...
암튼 또 왼쪽 소스에
대해 아주 조오..금 설명을하죠
첫 번째줄 은 h3의 글씨크기로
메뉴다! 라고 글씨를
쓴 거구요. 그담에, 두 번째줄은,
링크태그가
시작되었다. ( <a
)
링크될 주소는 main.html
이다.(href="main.html")
클릭하면
나타날 곳은 바로 right 라는 네임을까진
창이다.또는, ( target="right"
) rigth에 링크시켜라!
그리고
클릭될 것은 "메인화면"
이라는 글씨이다.
[ <a> 와</a> 사이에 있는건
클릭될 문자이다. ]
그리고 세 번째 줄은 또 알아서 하시구~
^^
네 번째줄부터 끝까지는 그냥 다른사이트도 링크
된다는걸
보여주기 위해 한 거에요.그것도 복사.
|
자 또 다음 문서인 main.html
에 다가 소스를 적습니다.
아무거나. -_-; 그냥 님들이 알아보실수 있는 메인화면으로.
암꺼나
적어요~ 메인화면이다~ 등. 정말 아무거나.
그리고 마지막으로 news.html
에다가 소스를 적어요.
이렇게 적으세요.
<html>
<head>
<title>뉴스</title>
</head>
<body
bgcolor="black">
<br><p><br><center>
<img
src="http://w2.hompy.com/tokyos/news.jpg">
</center>
</body>
</html>
|
이젠
home.html 문서를 열어보세요.
프레임이 나눠졌습니다.
왼쪽 메뉴도 클릭해 보시구요. 음. 대충 알겠죠?
프레임이 뭔지.
역시 해보는게 최고에요. 해보고나면 알죠.
그치만
쓰는 저도 참 힘들군요. -_ㅠ 흑.
암튼 따라해보기는 끝입니다.
그럼 이제 프레임의 속성에 대해 알아볼까요.
프레임셋을 만들 때 쓰는 속성은 다른 태그들보다 중요합니다.
꼭 알아두어야겠죠.
|
속성
|
설명
|
|
bolder="숫자"
|
중간선 두께. 0 으로 해주세요. 꼭이요.
|
|
cols="150, *" (꼭이런식은아님)
|
가로로 나눌 때의 속성. 왼쪽몇.오른쪽몇.
이런식.(숫자,%,* 들로 씀)
숫자는 픽셀값(권장) 퍼센트는 창의 몇%로
할 것인가, *는 남는대로.
|
|
name="이름.영어로."
|
메뉴에서 링크시킬 때 타겟(target="")에
적을 이름이 됩니다.
|
|
rows="숫자 또는 퍼센트 또는 *
|
세로로 나누겠다는 속성.
|
|
scrolling="셋중하나"
|
그 프레임칸에 스크롤바를 있게할지
없게할지 auto/yes/no 중 선택. [auto=알아서선택(초기값), yes=무조건생성
no=무조건생성않음]
|
|
src="주소"
|
그 프레임에 처음에 나타나게 될 페이지의
주소.
|
종합적으로 이러한 속성들을 사용해서 소스를 작성해
볼 때.
이런식이 됩니다.
|
메뉴,내용형. (기본형)
|
인사말,메뉴,내용 형.
(이렇게도 되요)
|
<frameset cols="200, *"
border="0">
<frame name="a" scrolling="no"
src="a.html">
<frame name="b" scrolling="auto"
src="b.html">
</frameset> |
<frameset rows="50, *"
border="0">
<frame name="a" scrolling="no" src="a.html">
<frameset
cols="200, *">
<frame name="b" scrolling="auto" src="b.html">
<frame
name="c"
scrolling="auto" src="c.html">
</frameset>
</frameset>
|
빨간색으로 된 부분들은 님들이 반드시 바꾸어 주어야
할 부분이구요. 암튼. 열심히 연습해보는 것보다
빨리익히는건 없죠. 그럼~
참!!
그냥 태그연습장에 여기서 주는 프레임 태그를 넣어서 해보셔도 되요.
제
계정에 a, b, c, d.html 문서를 만들어 놨으니까요. 내용은없구요.. 그냥 배경색만.
하핫.;;
Copyright © Lord Pier. All Rights Reserved.
|
홈 
