<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe</title>
</head>
<body>
<h3>iframe 공간 분할 예제</h3>
<div style="background-color:#ffff00;">
<span>
<a href="intro.html" target="if_a">인사말</a>
</span>
<span>
<a href="lectur.html" target="if_a">강좌소개</a>
</span>
<span>
<a href="info.html" target="if_a">저자소개</a>
</span>
<span>
<a href="http://cafe.naver.com/go2web" target="if_b">저자 홈페이지</a>
</span>
</div>
<p/>
<iframe src="basic.html" width="400" heigth="200" name="if_a" frameborder="0"></iframe>
<iframe src="basic.html" width="400" height="200" name="if_b" scrolling="no"></iframe>
<div style="background-color:#ffff00;">한빛아카데미(주)</div>
</body>
</html>iframe 공간 분할 예제
한빛아카데미(주)
iframe = An HTML iframe is used to display a web page within a web page.
<p/> = <p></p> 빈 paragraph 를 만들겠다. 간단하게 쓰는 방식.
frameborder = 프레임 두께를 해준거 like <table border="1">
해당 예제는 div 는 블록으로 쌓이는데 span은 늘리는 거다보니까 둘이 섞여서 창이 좁아지면 블록처럼 쌓이고
창이 넓어지면 옆으로 늘어난다.
1. 시맨틱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Basic Page</title>
</head>
<body>
<!--전체를 감싸는 태그-->
<div id="page-wrapper">
<!--헤더-->
<header id="main-header"></header>
<!--내비게이션-->
<nav id="main-navigation"></nav>
<!--본문-->
<div id="content">
<!--본문 좌측 영역-->
<section id=""main-section></section>
<!--본문 우측 영역-->
<aside id="main-aside"></aside>
</div>
<!--푸터-->
<footer id="main-footer"></footer>
</body>
</html>'HTML' 카테고리의 다른 글
| CSS 선택자 (0) | 2023.04.09 |
|---|---|
| CSS 수업 내용 (0) | 2023.04.09 |
| 시간/날짜/나이/범위안에서 지점 선택 (0) | 2023.04.06 |
| 0330 HTML 입력양식 (0) | 2023.03.30 |
| 글자 태그 / 목록 태그 (0) | 2023.03.30 |
