1. Webpage를 구성 할 때 화면을 이런식으로 나눌 수 있다.
<style>
div{width:500px; border: 3px solid blue; margin:0 auto;}
header{border:3px solid pink;}
nav{float: left; width:170px; height:195px; border: 3px solid gold;}
section{ margin: 0 0 0 177px; width:315px; border:3px solid red;}
footer{height:20px; border:3px solid skyblue;}
</style>
</head>
<body>
<div id="wrap">
<header><h1>제목</h1></header>
<nav>
<span>목차 (nav)</span>
<ul><li><a href="#">google</a></li>
<li><a href="#">apple</a></li>
<li><a href="#">w3c</a></li></ul></nav>
<section> <span>section1</span>
<p>float속성은 시멘틱 문서 구조에 유용하게 사용될 수 있습니다</p></section>
<section> <span>section2</span>
<p>float속성은 시멘틱 문서 구조에 유용하게 사용될 수 있습니다</p></section>
<footer>마지막글</footer>
</div>
2.예제 하나더.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>quiz6</title>
<style>
*{ box-sizing: border-box; }
div.default { width:500px; height:500px; margin:0 auto; }
header{ border-style: solid; height:20%; text-align:center; background: red; }
nav { background:gold; height:15%; border-style: solid; }
section { width:70%; height:40%; background:green; border-style: solid; float: left;}
aside { float: right; background:skyblue; width:30%; height:40%; border-style: solid; }
footer { border-style: solid; height:20%; background:pink; clear: both}
h3{ text-align:center; }
section header{background:gold; width: 70%; height: 15%; margin-left: 50px;}
section article{
width: 70%; height: 15%; margin: 10px 0px 10px 50px;
background:gold; border-style: solid; text-align:center;
}
section footer{ background:gold; width: 70%; height: 15%; margin-left: 50px; text-align: center;}
</style>
</head>
<body>
<div class="default">
<header><h1>< header ></h1></header>
<nav>
<h3>< nav ></h3>
</nav>
<section>
<h3>< section ></h3>
<header> header </header>
<article> article </article>
<footer> footer </footer>
</section>
<aside> <h3> < aside > </h3></aside>
<footer><h3>< footer ></h3></footer>
</div>
</body>
</html>
'코딩 공부 > CSS' 카테고리의 다른 글
| CSS 예제들 (0) | 2022.10.23 |
|---|---|
| CSS Table (0) | 2022.10.22 |
| CSS 예제 (clear, overflow, box-sizing) (0) | 2022.10.20 |
| CSS 예제 (ul, li, border, margin, position) (0) | 2022.10.19 |
| CSS (0) | 2022.10.18 |
