[1일 1코딩] 코딩독학 HTML iframe 요소 feat. tcpschool
오늘도 tcpschool로 코딩실습
가즈아
iframe : inline frame
해당 웹페이지 안에 다른 웹페이지를 삽입할 수 있음
테두리는 style의 border 속성 이용
테두리 없애고 싶으면 border 값 >> none
<h1 style = "color:orange">iframe태그를 이용한 웹 페이지 삽입</h1>
<iframe src="/css/intro" style="width:80%; height:150px; border: 3px dashed orange"></iframe>
<h1 style = "color:green">iframe의 테두리 삭제</h1>
<iframe src="/css/intro" style="width:80%; height:150px; border:none"></iframe>
>> 결과
iframe 요소의 페이지 변경하기
<a>태그의 target 속성과 iframe의 name 속성을 같게 설정해서 링크를 눌렀을 때 iframe의 페이지를 변경할 수 있도록 함.
링크 때 공부했던 것도 복습해봤다.
자꾸 까먹음...
<head>
<meta charset="UTF-8">
<title>HTML Iframes</title>
<style>
a:link { color: blue; }
a:visited { color: red; text-decoration: none }
a:hover { color: yellow; text-decoration: none }
a:active { color: gray; text-decoration: none }
</style>
</head>
<body>
<h2>iframe 요소의 페이지 변경하기</h2>
<iframe src="/css/intro" name="frame_target" style="width:100%; height:300px"></iframe>
<p><a href="/php/intro" target="frame_target">PHP 수업 확인하러 가기 =></a></p>
<p>위의 링크를 클릭하면 iframe 요소의 페이지가 다른 페이지로 변경돼요!</p>
</body>
>> 결과
프레임셋(frameset) :
하나의 브라우저 창에 둘 이상의 페이지를 표시할 수 있음
종료 태그가 없음
noframes 요소는 해당 브라우저가 frame요소를 지원하지 않을 때 보여지는 문자열
크기를 표시할 때 * 을 쓰면 나머지 칸을 다 차지하는 것 같음.
noresize를 명시하지 않으면 사용자가 마음대로 페이지 크기를 조절할 수 있음.
수직 프레임셋 :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Frames</title>
</head>
<frameset cols="20%,20%,*">
<frame name="left" src="/html/intro"/>
<frame name="center" src="/css/intro"/>
<frame name="right" src="/php/intro"/>
<noframes>
<body>
이 브라우저는 frame태그를 지원하지 않습니다!
<!--> frame태그를 지원하지 않는 브라우저에서 보이는 메시지 <-->
</body>
</noframes>
</frameset>
</html>
>> 결과
수평 프레임셋 :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Frames</title>
</head>
<frameset rows="20%,60%,20%">
<frame name="top" src="/html/intro" noresize="noresize" />
<frame name="center" src="/css/intro" noresize="noresize" />
<frame name="bottom" src="/php/intro" noresize="noresize" />
<noframes>
<body>
이 브라우저는 frame태그를 지원하지 않습니다!
</body>
</noframes>
</frameset>
</html>
>> 결과
출처 : TCP스쿨
'[1일1코딩]' 카테고리의 다른 글
| 코딩독학 HTML form 요소 1 feat. tcpschool (0) | 2018.05.14 |
|---|---|
| 코딩독학 HTML 레이아웃 요소 feat. tcpschool (2) | 2018.05.11 |
| 코딩독학 HTML 블록과 인라인 feat. tcpschool (0) | 2018.05.09 |
| 코딩독학 HTML 테이블 feat. tcpschool (0) | 2018.05.04 |
| 코딩독학 HTML 리스트 feat. tcpschool (6) | 2018.05.02 |