개발일지/Front

클래스 선언과 화면 나누기

연습용365 2021. 9. 2. 16:33 

<!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에서 지시한 것을 무시하고 아래쪽에 배치를 한다.