하이브리드웹설계
5주-2회 HTML FRAME & IFRAME
강의 내용
FRAME 소개
FRAME 기본 페이지 구조
FRAME 실습 예제
한 화면에 여러 개의 완전한 html 문서를 배치하기 위해 사용되는 tag
각 frame들의 배치에 관해 정의를 하는 frameset page를 main page로 지정해야 함
여러 frame(개별의 html문서)를 한 페이지에 배치할 수 있다.
Frameset -page의 구조
body tag없이 바로 frame을 정의한다.
화면을 분할하기 위해 frameset tag를 사용. cols는 세로로 분할, rows는 가로로 분할을 뜻함.
frame의 소스 파일을 정의해주는 부분
frameset tag에는 소속된 frame들의 크기(상대 크기 혹은 절대 크기)을 지정해줘야 하며, frameset 내에 다른 frameset을 정의할 수도 있다.
Frameset –page 예제
*은 나머지를 뜻함
Frameset –page 예제-2
이 코드에 대한 설명
-세로로 나뉘어진 3개의 프레임을 만들어라.
-첫번째 frame은 50픽셀의 너비로 만들어라.
-나머지는 두번째와 세번째 frame으로 나누어라.
그러나 세번째 frame은 두번째 frame의 2배 크기로 만들어라.
-첫번째 frame에 han.html을, dong.html을 두번째 frame에, hgu.html을 세번째 frame에 넣어라.
<Frameset> tag에 줄 수 있는 attribute
BORDER=“크기”
- frame 경계선의 크기를 지정
BORDERCOLOR=“색상”
- 색상은 16진수 RGB코드(#000000)형식으로 입력
FRAMEBORDER=“NO”
- Frame 경계선을 없앰
NORESIZE
- 브라우저에 따라 frame 크기가 변경되는 것을 방지
<frame> tag에 줄 수 있는 attribute
WIDTH=“너비” HEIGHT=“높이”
- 각각 frame의 넓이와 높이를 지정
SCROLLING=“NO”
- frame의 크기를 벗어나는 내용을 가져도 scroll bar가 생기지 않도록 설정
MARGINWIDTH=“크기” MARGINHEIGHT=“크기”
- Frame의 여백 값(각각 좌우 여백, 상하 여백)을 지정
NAME=“이름”
- Frame의 이름을 지정. 이 이름은 hyper-link 대상을 load할 target으로 사용됨
frame 이름 지정하기
<frame> tag 내에 NAME=“이름” 옵션을 줌으로써 frame의 이름을 지정할 수 있음
hyper-link를 걸 때 <a> tag 내에 target=“이름” 옵션을 줌으로써 연결하는 대상을 해당 frame에 load되도록 설정할 수 있음
frameset 페이지 han.html
hyper-link를 클릭한 결과 hisnet 홈페이지가 우측 frame에 load됨
Magic-target
magic-target이라 불리는 4가지의 예약된 name이 존재 - NAME=“_top”
현재 화면 전체에 link 대상을 load - NAME=“_self”
현재 frame(hyper link가 소속된 frame)에 link 대상을 load - NAME=“_blank”
새 창에 link 대상을 load - NAME=“_parent”
현재 frame(hyper link가 소속된 frame)의 상위 frame에 link 대상을 load
실습 예제
frame page인 master.html
홈페이지를 구성하는 3개의 html
실습 예제
홈페이지를 구성하는 3개의 html
IFRAME
코드 & 모양
<iframe src=“#” width=“600” height=“400” name=“iframe1”> </iframe>
