http://tcpschool.com/html/html_space_layouts
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Layouts</title>
<style>
header {
background-color:lightgrey;
height:100px;
}
nav {
background-color:#339999;
color:white;
width:200px;
height:300px;
float:left;
}
section {
width:200px;
text-align:left;
float:left;
padding:10px;
}
footer {
background-color:#FFCC00;
height:100px;
clear:both;
}
header, nav, section, footer { text-align:center; }
header, footer { line-height:100px; }
nav, section { line-height:240px; }
</style>
</head>
<body>
<h1>HTML5 레이아웃</h1>
<header>
<h2>HEADER 영역</h2>
</header>
<nav>
<h2>NAV 영역</h2>
</nav>
<section>
<p>SECTION 영역</p>
</section>
<footer>
<h2>FOOTER 영역</h2>
</footer>
</body>
</html>
'자료 > 지연' 카테고리의 다른 글
| input 변화 감지 동적 이벤트 (0) | 2022.08.03 |
|---|---|
| Spring Boot 서버 자료 (0) | 2022.08.03 |
| 중간보고서 (0) | 2022.08.02 |
| DB 설계에 유용한 사이트 (0) | 2022.08.01 |
| 로그인, db설계, 웹페이지 (0) | 2022.08.01 |
