#1. 프레임이란 무엇인가?
HTML에는 프레임이라는 개념이 있습니다.
요즈음 인터넷에서는 프레임을 사용하는 곳을 거의 볼 수 없지만,
과거 개인 홈페이지가 성했던 시대만해도 프레임은 거의 모든 곳에서 사용되고 있었습니다.
프레임(frame)이란 틀, 뼈대라는 뜻인데, HTML에서 사용되는 프레임 페이지는
다른 여러 개의 HTML페이지를 동시에 화면에 배치해서 보여주는 커다란 레이아웃 역할을 합니다.
대표적으로 응용되던 방식은,
메뉴와 메인 페이지를 나누어서 메뉴를 누르면 메인페이지만 바뀌게 하거나,
절대 안 바뀌는 프레임을 따로 나누어서 음악을 재생시키거나 하는 등의 방식이었습니다.
거의 대부분은 메뉴와 메인 페이지죠.
요즈음은 일체형 페이지가 대부분이라 잘 쓰이지 않습니다만,
프레임은 여전히 응용될 수 있는 곳에는 어디에든 쓰일 수 있습니다.
#2. 프레임을 만들어보자.
프레임을 만들려면 최하 3개의 HTML 페이지가 필요합니다.
편의를 위해서 frame.html, menu.html, main.html의 3개라고 하죠.
menu.html 과 main.html 은 미리 만들어둔 완성된 html 문서입니다.
지금까지 배웠던 것을 응용해서 원하는 페이지를 만드시면 됩니다.
그리고 frame.html은 완성된 다른 2개의 페이지를 가져와서 한 곳에서 보여주는 창틀입니다.
지금부터 쓰는 태그는 frame.html에서 쓰는 태그입니다.
[frameset 태그]
<frameset></frameset> 태그는 화면을 어떻게 나눌지를 설정해주는데, 화면을 가로와 세로로 크게 나눕니다.
( frameset 속성 cols )
cols속성은 화면을 세로로 어떻게 나눌지를 결정합니다.
들어가는 값은 %(100분율 비율)값, 혹은 픽셀로 된 수치값입니다.
(예1)
<frameset cols="30%, 70%"></frameset>
| (결과1)
frame.html 실행 시 화면 분할
|
(예2)
<frameset cols="300, *"></frameset>
| (결과2)
frame.html 실행 시 화면 분할
|
( frameset 속성 rows )
cols속성은 화면을 가로로 어떻게 나눌지를 결정합니다.
들어가는 값은 마찬가지로 %(100분율 비율)값, 혹은 픽셀로 된 수치값입니다.
rows와 cols를 병행하여 화면을 3구간 이상으로 나눌 수도 있습니다. 당연히 나눈 만큼의 html 페이지가 필요합니다.
(예)
<frameset rows="200, *">
<frameset cols="30%, 70%">
</frameset>
</frameset>
| (결과)
frame.html 실행 시 화면 분할
|
( frameset 속성 frameborder )
0혹은 1값을 가지며 프레임 페이지간의 경계선 표시 유무를 지정합니다.
0이 안 보이게, 1이 보이게.
( frameset 속성 border )
다른 border 속성처럼 수치를 적어주면 되며, 마찬가지로 경계선의 두께를 지정합니다.
( frameset 속성 bordercolor )
경계선의 색을 지정합니다.
( frameset 속성 framespacing )
프레임간의 여백을 지정합니다.
[frame 태그]
화면을 나눴다면 이제 분할된 영역에 html 페이지를 불러와야합니다.
이 때 사용되는 태그가 <frame> 입니다.
frame 태그는 frameset의 태그 안에 사용하는데,
frame 태그가 쓰인 순서에 맞춰서 frameset 태그로 분할한 화면에 차례대로 들어갑니다.
예는 아래의 속성을 보고서 보겠습니다.
( frame 속성 src )
img 태그와 마찬가지로 불러올 페이지의 주소를 지정합니다.
src 속성으로 주소가 지정되지 않으면 분할된 프레임에 아무 페이지도 불려오지 않습니다.
(예1)
<frameset cols="300, *">
<frame src="./menu.html">
</frame>
<frame src="./main.html">
</frame>
</frameset>
| (결과1)
frame.html 실행 시 화면
|
( frame 속성 noresize )
분할된 프레임의 크기가 변하지 않게 하는 속성입니다.
이 속성을 지정하지 않으면 방문자가 프레임의 크기를 마우스로 클릭해서 마음대로 바꿀 수가 있습니다.
다른 속성과 다르게 따로 값을 지정해줄 필요없이 써주기만 하면 됩니다.
(예) <frame src="./main.html" noresize> </frame>
( frame 속성 scrolling )
스크롤링 속성은 아래의 3가지 값을 같습니다.
(1) yes : 해당 프레임에 스크롤바를 표시.
(2) no : 해당 프레임에 스크롤바를 표시하지 않음.
(3) auto : 평소에는 스크롤바를 표시하지 않지만, 해당 프레임의 내용이 프레임 크기보다 커지면 스크롤바를 자동으로 표시.
어떤 값을 지정해주느냐에 따라서 프레임에 스크롤바가 나올지 말지를 결정합니다.
( frame 속성 marginwidth )
프레임의 가로 여백의 크기를 지정합니다.
( frame 속성 marginheight )
프레임의 세로 여백의 크기를 지정합니다.
( frame 속성 topmargin, leftmargin, marginheight, marginwidth)
프레임의 각각 상하좌우 4방향에 해당하는 여백의 크기를 지정합니다.
( frame 속성 name )
프레임에서 name 속성은 중요합니다.
일반적으로 프레임을 나누는 이유는 메뉴 프레임 등의 하이퍼링크를 클릭해서
메뉴 프레임의 다른 페이지를 콘트롤하기 위함입니다.
이 때, 프레임에 이름이 없으면 특정한 프레임을 대상으로 해서 명령을 내릴 수가 없습니다.
때문에 프레임을 만들 때 반드시 아래와 같이 이름을 지정해주어야합니다.
(예1)
<frameset cols="300, *">
<frame src="./menu.html" name="menu">
</frame>
<frame src="./main.html" name="main">
</frame>
</frameset>
|
name값은 자신이 원하는 임의의 이름을 지정하면 됩니다.
여기서 잠시 앞에서 배웠던 앵커태그를 다시 봅시다.
( a 태그 속성 target )
앞에서 이미 살펴본 속성입니다. 우리는 _blank 값이 들어갈 경우 새 창으로 링크가 뜬다는 것을 이미 알고 있습니다.
여기서 target 속성이 갖는 좀 더 명확한 의미는 '하이퍼링크의 결과를 표시할 대상'을 의미합니다.
예를 들어서 <a href="./contents.html"> 컨텐츠 표시 </a> 라는 링크가 있을 때,
이 링크를 누르면 링크가 표시되어있는 해당 페이지 자체가 contents.html로 바뀔 것입니다.
이것은 target, 즉 목표가 지정이 안 되어있기 때문입니다.
위에서 봤던 프레임을 다시 한 번 봅시다.
(예1)
<frameset cols="300, *">
<frame src="./menu.html" name="menu">
</frame>
<frame src="./main.html" name="main">
</frame>
</frameset>
|
여기서 menu.html에 <a href="./contents.html"> 컨텐츠 표시 </a> 라는 링크가 있다고 칩시다.
이 링크를 누르면 프레임의 menu.html 페이지 부분이 contents.html 로 바뀌고, main.html은 그대로 표시되어있을 것입니다.
하지만 우리는 main.html 이 들어있는 프레임의 내용을 바꾸고 싶습니다. 이 때 바로 target을 지정합니다.
(예)<a href="./contents.html" target="main"> 컨텐츠 표시 </a>
이렇게 지정한 후 링크를 누르면, main 프레임창에 있는 main.html이 contents.html로 바뀌게 됩니다.
이것이 바로 프레임을 만드는 가장 큰 이유 중 하나입니다.
target속성은 이것 이외에도 몇 가지 기본 속성을 갖고 있습니다.
1) _blank : 새 창
2) _top : 모든 프레임을 무시하고 페이지 전체를 바꿈. 즉, 여기서는 frame.html 페이지 자체를 다른 페이지로 바꾸게 됨.
3) _parent : 이 창의 한 단계 위 부모창을 바꿈. (이 기능을 쓰게 되면 한 번 테스트해보세요.)
4) _self : 현재 창, 혹은 현재 프레임 내부를 바꿈.
만약 target에서 _blank를 지정하지 않았는데, 새 창에서 열린다면 그건 대게의 경우 target으로 지정된 대상이 없을 때입니다.
즉, 실수이거나 오타인 것이지요.
그런데 menu.html에는 하이퍼링크가 아주 많고, 그 대부분은 main 프레임의 내용을 바꾸고 싶습니다.
이 때 하이퍼링크 하나하나마나 target을 지정해줘야할까요?
답은 아닙니다.
#3. head 태그의 안을 한 번 건드려보자
2강에서 html의 기본구조를 배웠고, 거기서 html태그 안에는 head와 body태그가 있다고 배웠습니다.
그리고 우리가 그동안 배웠던 모든 것은 다 body태그 안에서 일어나는 일이구요.
이제 head 태그의 내부를 살짝만 건드려봅시다.
즉, html 문서에 설정을 하나 추가해봅시다. 아주 간단합니다.
다음은 menu.html 의 내부라고 가정합니다.
(예) # menu.html
<html>
<head>
설정이 들어갈 부분
</head>
<body>
<a href="./contents.html"> 컨텐츠 표시 </a>
</body>
</html> |
지금 우리가 이것을 보는 이유는, 모든 링크에 하나하나 target을 지정해주기가 귀찮아서였죠?
간단하게 한 줄로 써주죠.
<base target="main">
즉, 전체가 이렇게 됩니다.
(예) # menu.html
<html>
<head>
<base target="main">
</head>
<body>
<a href="./contents.html"> 컨텐츠 표시 </a>
</body>
</html> |
이제 다시 frame.html 로 가봅시다.
menu 프레임에 menu.html 이 불려져있습니다.
여기 있는 target 이 지정되어있지 않은 무슨 링크를 클릭하든,
내용이 바뀌는 것은 main 프레임의 내부입니다.
특정 페이지 전체의 기본 target을 다르게 설정해준 것입니다.
이제 프레임을 거의 다 봤습니다. 하나만 더 보겠습니다.
#4. 프레임을 지원하지 않는 브라우져
저는 한 번도 본 적이 없달까, 사실 대부분의 사람들이 제가 인터넷 익스플로러를 썼'었'기 때문에 잘 모르겠습니다만.
간혹 프레임이 표시되지 않는 브라우져가 있다고 합니다.
특히 요즘처럼 스마트폰이 많아지면 어떻게 될지 모르겠어요.
(아이팟에서 프레임이 지원되는 것은 확인했습니다만)
그러면 프레임을 지원하지 않는 브라우져를 위한 최소한의 배려는 없을까요?
그걸 배워보죠.
[ noframe 태그 ]
사용은 <noframe> 내용 </noframe> 이렇게 합니다.
보통은
<noframe>
이 페이지를 보려면 프레임을 지원하는 브라우저가 필요합니다.
</noframe>
이런 식으로 쓰고 끝입니다. 저 안에는 프레임을 지원하지 않는 브라우저가 볼 수 있는 내용이 출력됩니다.
어떤 식의 내용을 쓰실지는 제작자의 자유입니다.
#5. 인라인 프레임
인라인 프레임. 태그로는 iframe 이라고 씁니다. <iframe></iframe>
iframe은 html 문서 내부에 창문을 열어서 다른 문서를 불러오는 역할을 합니다.
프레임이랑 뭐가 다르냐구요?
frameset은 화면 전체를 가로나 세로로 나누는 것 밖에 못합니다.
하지만 iframe은 html 문서 안에 마치, 테이블로 작은 창을 하나 만든 것 처럼 구멍을 뚫어줍니다.
사용법을 볼까요?
<iframe src="./small_window.html" width="300" height="100" name="small_window" marginwidth="0" frameborder="0"></iframe>
기본적으로 frame 태그와 거의 같은 방식으로 쓰인다는 걸 볼 수 있을 것입니다.
하지만 table이나 td 태그 처럼 width와 height, 즉 가로 세로 길이를 지정하는 것이 보이죠?
이것은 페이지 한 가운데에 구멍을 낼 것이기 때문에 그 구멍의 크기를 지정해줄 필요가 있는 것입니다.
iframe은 페이지 가운데에 다른 페이지를 띄워서 특정 정보를 스크롤을 이용해서 보여줄 수도 있고,
iframe 내부의 정보만을 바꾸면서 외부에 영향을 주지 않을 수도 있는 등 다양한 용도로 활용될 수 있습니다.
이제 프레임도 다 배웠습니다.
html의 끝이 보입니다. 조금만 더 힘내죠. |
