frame태그란?
frame 태그란 화면을 분할해주는 태그이다.
<frame></frame>태그에는 <body></body>가 없다.
먼저 프레임을 만들어보자.
<frameset></frameset>을 이용하여 프레임을 만들 수 있다.
<frameset></frameset>안에 만들고 싶은 프레임 개수만큼 <frame></frame>을 써준다.
<frameset cols="200,*">
<frame></frame>
<frame></frame>
</frameset>cols는 프레임을 세로로 나누고, rows는 프레임을 가로로 나눈다.
cols="200,*" / rows="30%,*"와 같이 " , "는 화면분할을 어떻게 할건지 비율을 정해준다.
" , "안에는 픽셀값과 %값 모두 들어갈 수 있다.
*는 앞의 값의 나머지를 의미한다. 예를 들어 rows="30%,*"에서 *는 70% 를 의미한다.
2단 프레임을 만들어보자.
<frameset cols="20%,*">
<frame src = title.html></frame>
<frame src = main.html></frame>
</frameset>
이 코드는 2 : 8로 화면분할이 되고, 각 화면에 title.html과 main.html이 표시된다.
3단 프레임을 만들어보자.
<frameset rows="30%,*">
<frame src="title.html" noresize></frame>
<frameset cols="20%,*">
<frame src="main.html"></frame>
<frame src="headline.html"></frame>
</frameset>
</frameset>rows로 가로를 나눈 다음 70%부분을 세로로 한 번 더 나눈 코드이다.
프레임에 스크롤바 지정하기
<frame src="left2.html" scrolling="auto"></frame>
// scrolling="auto"는 scrolling의 기본값으로
화면보다 내용이 길때, 자동으로 스크롤바가 생성된다.
<frame src="main2.html" scrolling="yes"></frame>
// scrolling="yes"는 무조건 스크롤바를 나타낸다.
<frame src="main3.html" scrolling="no"></frame>
// scrolling="no"는 화면보다 내용이 길어도 스크롤바를 나타내지 않는다.프레임 안의 공백 지정하기
<frame scr="main3.html"marginwidth="100" marginheight="80"></frame>
// 가로의 공백은 100으로, 세로의 공백은 80으로 지정하였다.
프레임에 타겟 지정하기
<a href="https://www.coupang.com" target="right">쿠팡</a><br>
<!-- 밑의 <frame scr = " "에서 " "사이에 있는 파일 안에 위의 소스를 치고
target을 밑에 있는 코드의 name=""의 ""으로 지정하면
위의 링크를 눌렀을 때, <frmae name="right">로 이동하게 된다.-->
<frame src="menu3.html">
<frame name="right">타겟의 종류
<target=""> 의 ""안에 프레임 name을 적어주면 그 frame 화면에 링크가 뜨게 된다.
<target= "_blank" 링크된 결과를 새 창에서 보여준다
<target= "_self" 링크 태그가 있는 곳에서 링크된 결과를 보여준다
<target= "_top 현재창을 없애고 전체화면으로 링크된 결과를 보여준다
iframe이란
iframe이란 화면에 작게 frame을 띄워주는 것이다.
iframe은 <body></body>을 없애지 않고 그냥 쓴다. 그렇기 때문에 배경색을 지정할 수 있다.
<iframe src="iframe01.html" width="900" align="right">
프레임의 테두리 속성
테두리 색상 지정하기
<frameset rows="50%,*" border="10" bordercolor="blue">
<frameset cols="30%,*" border="20" bordercolor="green">
테두리 없애기
<frameset rows="20%,*" border=0>이렇게 하면 테두리는 있지만 보이지 않게 된다
end😊
