11주차 - jsp&css (18) <header>, <section>, <footer>
2022. 9. 14. 18:35ㆍjsp/css
이번의 목표
01. <header> 태그에 대해 알아보자
02. <section> 태그에 대해 알아보자
03. <footer> 태그 대해 알아보자
코드를 작성할 때에 영역을 나눌 때에는 <div>를 주로 사용합니다.
이때 스타일을 지정하기 위해 <div>에 id나 class를 부여해서 스타일을 넣습니다.
이때 id로 주로 사용되는 것이 header, section, footer 인데 이것을 아예 태그로 사용할 수가 있습니다.
사실상 특별한 기능을 가지고 있는 것은 아니지만 구역을 나누는 기능을 해줍니다.
01. jsp 코드
02. 실행 화면
01. jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex18</title>
<style type="text/css">
#wrap{border:2px solid black; margin: auto; width: 500px;}
header{text-align: center; border: 3px solid green; text-decoration: blink;}
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>
<!-- section = content = article -->
<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>section 1</span><p>float 속성은 시맨틱 문서 구조에 유용하게 사용할 수 있습니다.</p>
</section>
<section>
<span>section 2</span><p>float 속성은 시맨틱 문서 구조에 유용하게 사용할 수 있습니다.</p>
</section>
<footer> 마지막 글 </footer>
</div>
</body>
</html>02. 실행 화면
'jsp > css' 카테고리의 다른 글
| 11주차 - jsp&css (20) table-layout (0) | 2022.09.14 |
|---|---|
| 11주차 - jsp&css (19) box-sizing (0) | 2022.09.14 |
| 11주차 - jsp&css (17) overflow (0) | 2022.09.14 |
| 11주차 - jsp&css (16) float, clear (0) | 2022.09.14 |
| 11주차 - jsp&css (15) 절대 위치, 고정 위치 (0) | 2022.09.14 |