|
요즘 프레임을 나누는 웹 페이지를 찾아 보기 힘들다. 웹 디자인도 유행에 민감하여 모두들 통 프레임으로 갈때 혼자서 프레임 나누어 튈 필요는 없다. 더구나 컴 사양이 점차 좋아지고 초고속 인터넷을 사용하므로 더 이상의 프레임은 의미가 없다.
프레임을 나누는 이유는 전체를 불러오는 시간보다 부분을 불러오는 시간이 짧기 때문에 속도 향상에 목적이 있고 부수적으로는 관리가 편하다는 것이다. 더불어 메뉴와 컨텐츠를 구분하기 쉽다는 점 때문에 많이 애용되어 왔지만 플래시 메뉴의 보편화로 실무에서는 잘 사용되지 않는 부분이기도 하다.
허나..... 여기는 웹 공부방 아닌가?... 그래서 언급하기로 해야 것다!!! |
1. <Frameset> : Frameset
|
- <FRAMESET ROWS=" , "> </FRAMESET> : 프레임을 가로로 나눈다.
- <FRAMESET ROWS="20%,80%"> </FRAMESET> : 왼쪽 프레임은 윈도우의 20%를, 오른쪽 프레임은 윈도우의 80%를 분배하는 상대적 크기 지정방식이다. (가로가 1024의 윈도우일 경우 왼쪽 프레임은 20%해당하는 205px이며 오른쪽 프레임은 819px이 된다. 윈도우 크기에 따라 픽셀값이 변한다.)
- <FRAMESET ROWS="200,*"> </FRAMESET> : 왼쪽 프레임은 200픽셀로, 오른쪽 프레임은 나머지 크기로 정하는 절대적 크기 지정방식이다. (가로가 1024일 경우 왼쪽 프레임은 200px, 오른쪽 프레임은 824px가 되겠죠?)
- <FRAMESET COLS=" , "> </FRAMESET> : 프레임을 세로로 나눈다. ROWS와 나누는 방법은 동일
- <FRAMESET FRAMEBORDER="0"> </FRAMESET> : 프레임의 경계선의 굵기를 지정한다. 생략시(기본값은 "1") 경계선이 보이지만 "0"으로 입력하면 경계선이 보이지 않게 된다.
|
2. <Frame> : Frame
|
- <FRAME SRC="경로"> </FRAME> : 해당 프레임에 불러들일 문서를 지정한다.
- <FRAME SRC="경로" NAME="이름"> </FRAME> : 해당 프레임의 이름을 정의한다.
- <FRAME SRC="경로" MARGINHEIGHT="위 여백"> </FRAME> : 해당 프레임의 위 여백을 지정한다.
- <FRAME SRC="경로" MARGINWIDTH="왼쪽 여백"> </FRAME> : 해당 프렘임의 왼쪽 여백을 지정한다.
- <FRAME SRC="경로" SCROLLING="AUTO"> </FRAME> : 해당 프레임에 문서의 양이 많아 프레임에 모두 보여줄 수 없을 때 스크롤을 생성시켜준다. "YES"이면 무조건 스크롤을 만들어주고 "NO"이면 문서의 양과 상관없이 스크롤을 없애주며 "AUTO"면 문서의 양에 따라 자동으로 생성된다. (기본값은 "AUTO")
- <FRAME SRC="경로" NORESIZE> </FRAME> : 프레임셋에서 지정한 크기를 조절하고자 할때 사용하는 옵션으로 값을 갖지 않는다.
|
3. 예제-1 (프레임 가로로 나누기 => 상대적 비율 지정 방식)
|
[Source] |
|
<html>
<head>
<title>
프레임 가로로 나누기 => 상대적 비율 지정 방식
</title>
</head>
<frameset rows="20%, 80%">
<frame src="top.htm">
<frame src="contents.htm">
</frameset>
<body>
</body>
</html> |
|
▲ 프레임셋을 본문에 넣으면 결과를 볼 수 없다. 반드시 <body> 이전에 넣어야 정확한 결과가 나온다.
▲ 윈도우 크기를 조절해보자. 상하 프레임의 비율에 따라 높이가 바뀐다.
▲ 프레임셋을 지정한 위 소스를 "frameset.htm"로 저장하고 "top.htm"과 "contents.htm"파일을 각각 만들어 "frameset.htm"을 실행시켜야 한다. 즉, 프레임이 두개 일 경우 모두 3개의 파일이 필요로 한다. |
4. 예제-2 (프레임 세로로 나누기 => 절대적 비율 지정 방식)
|
[Source] |
|
<html>
<head>
<title>
프레임 세로로 나누기 => 절대적 비율 지정 방식
</title>
</head>
<frameset cols="200, *">
<frame src="left.htm">
<frame src="right.htm">
</frameset>
<body>
</body>
</html> |
| ▲ 윈도우 크기를 조절해 보면 왼쪽 프레임은 항상 200px을 유지하면서 오늘쪽 프레임은 그 나머지 값을 유지한다. |
5. 예제-3 (프레임 경계 없애기)
|
[Source] |
|
<html>
<head>
<title>
프레임 경계 없애기
</title>
</head>
<frameset cols="200, *" frameborder="0">
<frame src="left.htm">
<frame src="right.htm">
</frameset>
<body>
</body>
</html> |
| ▲ 경계선은 보이지 않지만 크기는 조절 가능하다. 왼쪽으로부터 200px 정도 부분에 마우스를 가져가면 가로 화살표가 보인다. 좌우로 드래그하면 좌우 프레임의 너비가 조절된다. |
6. 예제-4 (프레임 이름과 여백 지정)
|
[Source] |
|
<html>
<head>
<title>
프레임 이름과 여백 지정
</title>
</head>
<frameset cols="200, *">
<frame src="left.htm" marginheight="100" marginwidth="50" name="left">
<frame src="right.htm" name="right">
</frameset>
<body>
</body>
</html> |
|
▲ 여백의 단위는 픽셀이므로 절대적 크기로 지정된다. 윈도우 크기를 조절하여 보아도 여백은 변하지 않는다. 왼쪽 프레임의 크기보다 왼쪽 여백을 많이 주면 스크롤이 자동으로 생긴다.
▲ 프레임이름은 여기서 별다른 의미가 없는 것 처럼 보이지만 문서에 링크를 걸때 유용하게 쓰인다. |
7. 예제-5 (프레임 크기 조절 기능 삭제와 스크롤 기능)
|
[Source] |
|
<html>
<head>
<title>
프레임 크기 조절 기능 삭제와 스크롤 기능
</title>
</head>
<frameset cols="200, *">
<frame src="left.htm" noresize>
<frame src="right.htm" scrolling="yes">
</frameset>
<body>
</body>
</html> |
|
▲ 프레임 경계가 보이지만 왼쪽 프레임의 크기 조절이 불가능하다.
▲ "right.htm"의 문서의 양에 상관없이 무조건 스크롤이 보인다. 단, 스크롤기능이 활성화되지 않은 상태로 희미하게 나타난다. 실제로 양이 많아지면 활성화된다. "auto"일 경우 양이 적으면 없어지지만 문서량이 많아지면서 나타나게 된다. 문서량이 많을 때 "no"일 경우 어떻게 나타나는지 직접 실행해 보자! |
▶ 여기까지 HTML의 기초 강좌를 모두 마쳤다. 휴우~~ 기타 부족한 부분이나 추가적인 태그들은 점차 수정 보완하구.... 질문은 Q&A를 이용하도록...^^ 모두 모두 수고하셨네여~~ 담에 또 봐여~
작성자 : 웹제작 토탈 커뮤니티 (http://www.webmadang.net) 컴쟁이 | 
컴쟁이
