<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body { margin:0; padding:0; height:100%; }
.header { width:100%; height:15%; background:yellow; }
.nav { width:15%; height:70%; float:left; background:orange; }
.section { width:70%; height:70%; float:left; background:yellowgreen; }
.aside { width:15%; height:70%; float:left; background:orange; }
.footer { width:100%; height:15%; clear:both; background:plum; }
a { text-decoration:none; }
iframe { width:100%; height:99.5%; }
/* clear: both; float지시를 무시하고 아래에 배치 */
</style>
</head>
<body>
<header class="header">머리</header>
<nav class="nav">
<a href="http://www.incheon.go.kr" target="s1">인천시청</a><br>
<a href="http://www.seoul.go.kr" target="s1">서울시청</a>
</nav>
<section class="section">
<iframe src="" name="s1"></iframe>
</section>
<aside class="aside"></aside>
<footer class="footer"></footer>
</body>
</html>
html, body { 마진 패딩을 0으로 선언하면서 간격을 없앰 }
height:100% 해주면서 간격 없이 꽉 채움
float:left 왼쪽부터 차례대로 쌓아주는 것
clear:both; float에서 지시한 것을 무시하고 아래쪽에 배치를 한다.
'개발일지 > Front' 카테고리의 다른 글
| form 복습 - 다양한 효과들 적용해보기 (1) | 2021.09.03 |
|---|---|
| html 파일 frame 영역에 불러오기(src), 주석 (1) | 2021.09.03 |
| css 파일 불러오기(link,import) (1) | 2021.09.02 |
| 03. 다양한 frmae 태그활용하기(화면나누기, 프레임 안에서 페이지 띄우기) (2) | 2021.09.01 |
| 02.form 태그연습 (2) | 2021.09.01 |
