[tag] 홈페이지의 기본골격 - 프레임(frame,iframe) HTML_XML_CSS

홈페이지는 기본적으로 프레임을 갖는다.
프레임은
<frame> 혹은 <iframe> 를 사용하며, 아예 이 프레임을 사용하지 않기도 한다.
현재, 대부분의 사이트들은 이러한 프레임을 사용하지 않는다.(물론, iframe 은 빈번히 사용한다.)
naver.com , empas.com , daum.net 등 대부분의 포탈 사이트들은 이러한 프레임방식을 사용하지 않는다.
프레임은 무엇인가?
프레임은 윈도우의 페이지를 쪼개어서 쓰는 것이다.
즉, 화면을 분할해서 사용하는것.
소스코드는 아래와 같다.
<html>
<head>
<title>제목</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<frameset rows="*,29" cols="*" framespacing="0" frameborder="NO" border="0">
<frame src="문서1" name="mainFrame">
<frame src="문서2" name="bottomFrame" scrolling="NO" noresize>
</frameset>
<noframes>
<body>
</body></noframes>
</html>
------------------------------------------------------------------------------------------
위에서 보듯이 frameset 로 페이지를 분할해준다.
여기서 빨간색 태그 rows 는 화면을 위아래로 어떻게 쪼갤것인지, 파란색 태그 cols 는 좌우를 어떻게 쪼갤것인지를 지정하는 것이다.
rows="*,29"
이것은 페이지를 100 으로 볼때, 하단을 29픽셀, 그리고 나머지를 상단에 할당한다는 것이다.
(먼저 나오는 숫자가 상단, 나중에 나오는 숫자가 하단에 대비된다)
cols="*"
이것은 굳이 쓰지 않아도 되는것인데, 좌우를 분할하지 않고 전체를 쓴다는 지정이다.
만약 좌우로 페이지를 분할할 경우에는 cols="100,*" 처럼 사용한다.
(먼저 나오는 숫자가 좌측, 나중에 나오는 숫자가 우측에 해당한다)
frame 는 문서에 해당하는것이 아니라 기본 골격에 해당하므로, <body> 태그 이전에 두며, 각각의 분할된 프레임에 불러올 문서는 위처럼 '문서1' 과 '문서2' 에 해당한다.
각 프레임에 불러올 문서는 src 라는 태그로 불러오게 된다.
src="문서1"
문서1 을 불러오라는 지시다.
src 는 웹서버에서 해당 문서(파일이름)가 있으면 불러오게 하는것이다.
만약, view.htm 이라는 파일을 해당 프레임에 불러오고자 한다면
src="view.htm" 이렇게 쓴다.
기타설명.
<title>
타이틀은 이 문서의 이름,제목으로 <title>제목</title> 로 작성해 놓으면, 타이틀 안의 내용이 윈도우의 타이틀 부분에 표시된다.
<meta>
메타태그는 일종의 알림부,페이지정보 같은 역활을 합니다.
이 문서가 어떤어떤 문서이다 라고 정의해 놓는것이다.
메타태그에 씌어지는 내용은 subject(주제),title(이름,주제),author(만든사람),publisher(만든단체나 회사),other agent(웹 책임자),date(날짜),keywords(키워드,검색할 포인트가 되는말) 등이다.
(기타, 웹에디터를 무엇을 썻는지 기록해주는 Generator 이나, progid(프로그램 아이디) 등이 기록되기도 하는데 이는 없어도 무방하다)
실제로 적용해보면,
-언어 선언.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ks_c_5601-1987">
-페이지에 관한 정보.
<META name="Subject" content="엠파스블로그 ">
<META name="Title" content="엠파스 블로그입니다.">
<META name="Author" content="홍길동">
<META name="Publisher" content="주식회사엠파스">
<META name="Other Agent" content="천사">
<META name="Date" content="2XXX년 X월 XX일">
<META name="keywords" content="태그배워보기">
<META name="GENERATOR" content="Microsoft FrontPage 4.0">
<META name="ProgId" content="FrontPage.Editor.Document">
-특별기능.
<META http-equiv="Refresh" content="5"; URL="이동할 페이지">
<META http-equiv="Refresh" content="0">
<META http-equiv="Page-Enter" content="revealTrans(Duration=3,Transition=0)">
<META http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=0)">
위처럼, 여러가지 용법이 있지만, 실제로 젤 첫번째 나온 문서의 특성을 지정한 태그 말고 나머지 태그는 사용하지 않아도 전혀 지장이 없다.
언어선언에 해당하는 메탙태그는 반드시 넣어주는것이 좋다. 넣지 않아도 동작에 아무런 무리가 없지만, 간혹 웹페이지의 글자가 깨져서 나오거나 하는 경우가 발생할 수 있으므로 넣어준다.
언어 선언부에서 charser=euc-kr 과 그 아래의 charset=ks_c_5601-1987 로 나뉘어져 있는데, 이것은 어떤 언어 종류인지 지정해주는 부분이다.
개인적으로는 아래의 ks_c_5601-1987 이 euc-kr 보다 페이지가 깨질 염려가 덜했던것으로 생각한다.
페이지에 관한 정보 부분은 이 페이지가 어떻게 만들어 졌는지에 대한 정보들로 이루어져 있는데, 대부분 사용하지 않는다.
다만, 이 페이지의 저작권이 누구한테 있는지 굳이 고시하고 싶다면 할 수 도 있을듯하다.
keywords 는 웹사이트에서 검색할때 검색되는 키워드로, 예전에 포탈사이트의 검색창에서 어떤 단어를 치고 검색을 누르면, 웹상의 페이지들의 키워드 정보를 분석해서 불러온다고 하여 나름대로 중요시 했었지만, 요즘은 워낙이 홈페이지들이 많아졌고, 포탈 사이트들이 사이트 검색시 상위로 검색되게 해주는 댓가로 돈을 받고 있는 실정이라 그리 유용하지도 않아졌다.
더군다나, 구글(google)같은 검색사이트는 아예 웹페이지 자체에 들어있는 문장을 검색하기 때문에 이런 키워드 등록이 더 필요없어졌는지도 모르겠다.
워낙이 홈페이지들이 많아져서, 자신의 홈페이지가 검색시 상위에 랭크되게 하는것은 거의 불가능 해졌다고 해도 과언이 아닐것이다.
따라서, 검색사이트에서 자신의 사이트가 상위에 랭크되어 검색되어지기를 바라는것은 무모하다.
(키워드 태그의 실용성이 점차 없어져 버렸다.)
Generator 은 이것이 페이지가 어떤 프로그램에 의해서 만들어졌는지 기록하는 것이다.
이하 progid 는 프로그램 아이디.
특별기능에서 http-equiv="refresh" 는 페이지를 새로고침 하는 태그라고 지정한것으로, content="5" 는 5초가 지나면 새로고침 하라는 지정이고, URL="이동할 페이지" 는 5초후에 이동할 페이지이다.
만약, content="0" 이라고 쓰고, 이동할 페이지를 지정하지 않으면, 이 페이지를 0초마다 새로고침 하라는 뜻이다.
(사용하지 말것. 같은 웹페이지를 0초에 한번씩 새로고침 하는것은 수학적으로도 말이 안되고, 컴퓨터의 CPU 가 연산오류를 일으키며 윈도우가 멈춰버릴것이다.)
그 아래의 http-equiv="page-enter" 는 페이지에 들어갈때를 지정, content="revealTrans(Duration=3,Transition=0)" 이라는 설정은 화면이 바뀌어 들어갈때 어떤 모양으로 출력해줄것인지 지정하는 것이다. 마치 책장을 열듯이 화면이 좌우로 갈라지면서 보여지거나, 위아래로 갈라지는것 같은 효과를 내준다. 뒤의 Transition 은 0~23 까지의 숫자를 사용하며, 23 은 랜덤으로 불러오는 설정이다.
http-equiv="page-exit" 는 페이지에서 빠져나갈때의 지정.
태그는 영어의 대문자,소문자를 구별하지 않으니, 대문자로 쓰던, 소문자로 쓰던 상관없다.
frame 과는 달리 iframe 는 페이지 자체를 분할하는것이 아니라, 페이지안에 프레임을 만들어 내는것이다.
iframe 은 해당페이지를 만든후, 그 안에 iframe 를 지정해주고, 그 안에 불러올 문서의 URL(경로)을 지정해주면, 그 프레임박스 안에 해당 페이지를 불러온다.
iframe 이 어떻게 쓰여졌는지 보려면, Daum.net 에서 자신의 메일을 확인하는 페이지, 카페 목록보는 페이지등에서 쉽게 볼수 있다.
(daum.net 에서는 로그인후 자신의 메일을 확인하는 페이지에 frame 와 iframe 를 모두 사용하고 있다.)
Daum 의 메일확인 페이지를 기준으로 frame 과 iframe 를 보자.


위의 그림에서 빨간색으로 나뉘어진 것이 frame 이고, 초록색으로 박스모양으로 되어있는것이 iframe 이다.
(실제, 왼쪽의 초록박스는 iframe 는 아니고, 예를들어 설명한것임)
이 페이지에서보면 전혀 frame 로 나누어진 티가 안나는데, 그것은 애초에 디자인을 할때 frame 에 굵기를 없애서 표가 안나게 한다음, 1,2,3 번 페이지의 디자인을 각각 어울리게 맞춰 놓은 것이다.
자.. 그렇다면, frame 과 iframe 는 각각 어떤때 쓰이는가?
그것은, 페이지의 효율성을 높이기 위해서 사용된다.
페이지를 보는 사람의 효율성(빠른로딩속도)과 홈페이지 제작자의 효율성(간편한 작업) 두가지를 위해서 사용되는데,
1. 보는 사람의 효율성은,
웹페이지 자체에 출력되는 내용들이 많고, 링크(외부에서 불러오는 문서들)가 많을수록 사용자가 어떤 작동버튼을 누르고 기다려야 하는 시간이 길어지기 마련이다.
따라서, 새로 불러오지 않아도 될 기본적인 정보를 담고 있는 페이지들은 그대로 놔두고, 자주 동작시키는 페이지를 프레임으로 나누어서 그 페이지만 작동시킨다면, 그만큼 페이지의 내용이 짧아지고, 로딩속도 또한 빨라지기 때문이다.
2. 제작자의 효율성은,
홈페이지를 보는 사람 입장에서는 그페이지가 그페이지 같아 보이지만, 실제로 a.htm 에서 b.htm 으로 문서가 링크된다고 볼때, 중복되는 태그,코딩들이 많다.
하지만, 1 에서의 설명처럼 아예 페이지를 나누어서 자주 쓰는 페이지만 따로 떼어놓고 작업을 하면, 그만큼 중복되는 내용을 쓰지 않아도 되기 때문에 제작자에게는 편한 일이다.
하지만, 프레임을 쓰면 안좋은 점들이 몇가지가 있다.
그것은, 디자인을 깔끔하게 하기 곤란한점과 스크립트 사용시 오류가 발생할 가능성이 많아 진다는 것이다.
1. 디자인을 깔끔하게 하기 곤란하다는것은,
페이지 자체가 한 통 으로 되어있으면, 각 모양의 사이즈를 맞추어서 끼워넣기만 하면 되지만, 프레임으로 페이지가 나뉘어져 있을 경우에는 겉으로 보기에는 한 통 처럼 보이는 페이지도 실제로는 각각의 프레임에 로딩되어 있는 별개의 문서들에 쪼개어져 있기 때문이다.
2. 스크립트 사용시 오류는,
스크립트는 일반적으로 한 프레임 안에서 동작이 용이하게 되어 있기 때문에, 위의 'daum.net' 에서처럼 프레임이 1,2,3 으로 쪼개어져 있고 메뉴는 1 이나 2에 있고, 그 메뉴버튼을 눌렀을때 실행되는 페이지가 3에 있다면, 1이나 2에서 버튼을 눌러 실행시킨 스크립트의 값을 3에 있는 페이지로 날려줘야 하기 때문에 간혹 에러가 발생할 가능성이 생기는것이다.

덧글

댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


통계 위젯 (화이트)

1551332
8632
10134704

google_myblogSearch_side

▷검색어

Flag Counter style2