 |
프레임
드디어 HTML 기초의 막바지에 다다랐습니다.
프레임은 HTML 문서를 꾸미는데 빠질수없는 필수적인 태그입니다.
요즘들어서 노프레임의 추세가 높아지고 있습니다.
말그대로 프레임을 쓰지 않고..
원 프레임( one frame ) 으로 사용하는경우가 많습니다.
그치만 프레임의 개념을 모른다면 링크나,
노프레임을 만드는데 까지도 영향이 있습니다.
중요도가 굉장히 높으므로 자주쓰이는 태그들은 외우시고 숙지하셔야합니다.
프레임은
예제를 보시면서 HTML소스를 살펴보는 형식으로 살펴보도록 합시다.
프레임 태그에 대해 알아봅시다-
예제 1 - 다음과 같은 프레임이 있습니다.
|
up ( up.htm )
|
|
left ( left.htm )
|
right ( right.htm )
|
위와 같은 프레임을 만들기위해서는 총 4개의 html 문서가 필요합니다.
우선
세 개의 프레임은 보이지요? ( up,left,right 프레임 )
그 외에 한 개의
이 프레임들을 묶어줄 프레임이 필요합니다.
그프레임을 frame.htm 이라
칭하도록 하죠..
우선 소스부터 보도록 하죠..
하나하나 따라해보세요~~
frame.htm
소스
<html><head></head>
<frameset
rows="*,3*">
<frame src="up.htm"
name="top">
<frameset cols="*,4*">
<frame
src="left.htm" name="left">
<frame src="right.htm"
name="right">
</frameset>
</frameset>
</html>
frame.htm에
들어갈 소스입니다..
으.. 이해가 잘 안되시죠?
쉽게 말해서 up,left,right는
정보를 담는 페이지입니다.
앞서 배운데로 꾸며주시면 되구요..
frame은
꾸미는 페이지가 아닌.. 각 페이지들을 이어주는..
그런 페이지입니다. 이해가
안되시면..
한번 4개 페이지를 모두 만드시고 적용해보시면 훨씬 쉽게 이해 하실수
있을꺼에요
그리고 여기서 rows="*.3*" , cols="*.4*" 는
넓이를 나타내는 것 입니다.
다음은 프레임의 연결고리가 되는 frame.htm을 좀더
알아봅시다~
frame.htm 소스
<html><head></head>
<frameset rows="50,*,50" >
<frame src="top_01.htm" name="top" frameborder=0
marginheight=0>
<frame src="middle_01.htm" name="middle"
noresize marginwidth=0>
<frame src="down_01.htm" name="down"
scrolling=auto>
</frameset>
</html>
처음보는
소스가 몇 개 있죠?
모두 프레임을 연결시켜주는데 필요한 소스에요..
몰르셔도
되지만 깔끔한 페이지를 만드려면 꼭 필요한 소스입니다
하나하나 소스에대해
설명해드릴께요..
우선 셋째줄에 frameborder=0 이 보이시죠..
이건
매우 중요한 것입니다.. border 나오니까 이미 예상하신분들도 있으리라 생각됩니다만..
네
맞습니다 바로 테두리의 개념으로 생각하시면 간단합니다.
이미 앞서 배우신적이
있죠 border는.. 그와 같은 프레임 과 프레임 사이의 경계선을..
없에주는 역할을
합니다.
그다음줄에 noresize가 보이시죠.. 그말은 직역하는 뜻 그대로..
리사이징,
즉 프레임과프레임 경계를 마음데로 조절하지 못하게 잠궈두는것이죠..
그 다음줄에는
scrolling=auto 가 보입니다..
이것은 스크롤바의 유무를 나타내는 것입니다.
스크롤바를 자동으로 나타내게 할 경우는
auto로, 스크롤을 없엘 때는
no 스크롤을 항상 나타나게 할 경우는 yes로 넣어주시면됩니다.
그리고
셋째,넷째줄에 marginheight와 marginwidth가 보입니다..
마진
이라고 부르는데요.. 이수치를 0 으로 적어주시면..
프레임의 빈 공간이 사라집니다..
이해가
안되시는부분일꺼 같은데요.. 보통 html문서를 만들어보시면 아시겠지만..
이미지같은걸
넣을 때는 빈 공간이 생깁니다..
그걸 사라지게 하는 것이 이 margin의
수치를 0으로 두는 것 입니다.
다음은 프레임의 마지막 과정인.. target에
대해 알아봅시다..
|
up( up.htm )
|
|
left ( left.htm )
|
right ( right.htm )
|
위프레임과 같은 프레임구도 입니다..
여기서 left프레임에서 하이퍼링크를
해서..
right프레임 에 적용되게 해보겠습니다..
사용방법은 아주아주 간단합니다..
|
left.htm
|
<html><head></head>
<body>
<a href="http://yahoo.co.kr"
target=right> right프레임으로 링크</a>
</body>
</html>
|
프레임의 기본구조와.. 링크 태그입니다..
그중 target을 써서.. right로 지정해주었습니다..
이것으로
링크가 뜰 프레임을 결정해줄 수 있는데요..
만약 프레임 네임을 준 경우가 있다면..
그
네임으로 적어주셔야 합니다..
앞에 프레임 기본구조쪽을 보시면 name항목이 있을꺼에요..
거기서
정해준 데로 적어주시면 그 프레임페이지에 뜨게 할수있죠..
간단하죠?
프레임도
이제 끝났습니다..
실질적인 HTML 기초 강좌는 끝이 났다고 봐야 하겠군요..
폼태그는
홈페이지를 꾸미는 사항이지 프레임태그와 같은 필수사항이 아닙니다..
하하 그럼
조금만 더 힘내세요..
그리고 메모장 꼭 열어두시는거 잊지 마시구요..
|
