<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="20%, *">
<frame src="">
<frameset cols="30%, *">
<frame src="">
<frameset rows="50%, *">
<frame src="" name="ss1">
<frame src="" name="ss2">
</frameset>
</frameset>
</frameset>
</html>
말 그대로 프레임을 나눈다고 생각하면 된다. body 안에 넣을 필요 없이 바로 선언해주면 됨!
<frameset rows="20%,*"> frameset은 상위태그. 화면을 나누는 역할을 한다. 옵션으로는 rows/cols이 있다. 가로/세로 나누어준다. "20%, *" 왼쪽은 선언한 부분의 크기를 지정한다. 가로를 설정했으면 윗부분의 크기, 세로를 설정했으면 왼쪽부분의 크기. px로 설정해도 되고 % 퍼센트로 설정해도 됨. 후자의 경우는 전체 화면의 몇 퍼센트인지 설정가능하고, 반응형 웹에서 많이 사용된다. * 별의 뜻은 80% 이렇게 나눠 줄 필요 없이 20%를 사용하고 남은 영역을 다 의미한다.
<frame src="URL 및 문서명"> frameset 하위태그. </> 이걸로 닫아 줄 필요 없다. 화면링크를 정하는 태그다. 그런데 왜 가장 안에 있는 프레임에는 두 개가 지정 됐을까? 위에 있는 프레임에는 또다른 frameset으로 대체를 한 것으로 마지막에 오는 프레임에는 두 개를 설정하면 된다.
Q. <iframe>과는 어떻게 다른가?
A. iframe은 따로 영역을 설정한다. frameset은 전체 영역을 나누는 태그이다.
(2-1) |
(2-2) |
(2-3) |
여기 서로 다른 파일을 불러와서 사용하는 방법이 있다.
<!DOCTYPE html>
<html>
<head></head>
<body bgcolor="yellowgreen">
안녕하세요!!
</body>
</html>(2-1) 그저 배경색과 글자만 있는 페이지 이걸 어따써? 생각할 수 있지만 (2-2)처럼 사용할 수 있다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="http://www.incheon.go.kr" target="tt1">인천시청</a>
<a href="http://www.seoul.go.kr" target="tt1">서울시청</a><br><br>
<iframe src="bgcolor.html" name="tt1" width="400" height="200"></iframe>
</body>
</html>(2-2) 이 코드는 인천시청과 서울시청 글씨를 누르면 아래에 있는 iframe 영역에 홈페이지가 뜨도록 하는 태그들이다.
<a> 태그의 옵션들을 살펴보자. 글씨를 클릭했을 때 홈페이지로 이동하는 하이퍼링크 텍스트다. href 어디로 이동할 것인가 설정하는 옵션이고, target은 어디에 띄울 것인가 설정하는 옵션이다. "_blank"를 입력하면 새 창을 띄우지만 이런식으로 "tt1" 타겟을 내 맘대로 설정할 수 있다.
바로 아래를 보자. <iframe>은 위에서 언급했듯 내가 원하는 만큼의 영역을 설정한다. width/height 크기의 영역을 설정한 것이다. src="URL 또는 파일명(bgcolor.html)" 위에 있는 초록색 배경의 파일을 불러왔다. name="tt1"으로 이 영역의 이름을 만들었다.
다시 <a target="tt1"> 태그를 보자. iframe 태그에서 설정한 'tt1' 이름을 넣어 준 것이다. 그러니 인천시청과 서울시청 하이퍼텍스트를 선택 했을 때 (2-3)처럼 tt1 프레임에 사이트가 뜬다.
여기서 잠깐!!
href / src 차이를 설명하자면..
href는 하이퍼텍스트에서 사용하는 규약으로 누르면 그쪽으로 이동을 한다. src는 이미지를 갖고 오는 규약이라고 할 수 있다. 규약이라는 것은 이미 만들 때부터 약속을 하고 정하는 것이기에 이해가 안 돼도 그렇구나~ 억지로 이해하는 수 밖에 없다.
'개발일지 > Front' 카테고리의 다른 글
| html 파일 frame 영역에 불러오기(src), 주석 (0) | 2021.09.03 |
|---|---|
| 클래스 선언과 화면 나누기 (0) | 2021.09.02 |
| css 파일 불러오기(link,import) (0) | 2021.09.02 |
| 02.form 태그연습 (0) | 2021.09.01 |
| 01. html, css의 기본구성 & table태그 (0) | 2021.08.31 |
