<body> 태그 안에 <header> <main> <footer> 태그를 사용해 웹 페이지의 상단, 본문, 하단 영역을 만들어봅시다!
- <header> – 웹사이트 상단 영역
- <nav> – 웹사이트 내 메뉴 버튼을 담는 공간
<header>
<nav>
...
</nav>
</header>
- <main> – 웹사이트 본문 내용
- <article> – 문서 내에서 독립적인 컨텐츠를 위한 공간
<main role="main">
<article>
...
</article>
</main>
- <footer> – 웹사이트 하단 영역
- <div> – 임의의 공간을 담는 공간
<footer>
<div>
...
</div>
</footer>
상단 영역 <header>
- 가장 중요한 정보를 담는 <h1> 태그 안에 <img> 태그를 사용해 엘리스 로고(elice_logo.png)를 넣습니다.
- 이전 실습에서 만든 메뉴 버튼을 <nav> 태그 안에 넣어 입력합니다.
<nav>
<li><a href="#">홈</a></li>
<li><a href="#">회사 소개</a></li>
<li><a href="#">연락처</a></li>
</nav>
Copy본문 영역 <main>
- 웹페이지 본문 영역 속 텍스트 정보를 담을 <article>...</article> 태그를 입력합니다.
- <h2>...</h2> 태그를 사용해 소제목 회사 소개를 입력합니다.
- <p>...</p> 태그를 사용해 본문 내용을 입력합니다.
하단 영역 <footer>
- 임의의 공간을 만드는 <div></div> 태그를 입력합니다.
- <p></p> 태그 안에 회사 주소와 전화 번호를 입력합니다.
- 회사 주소와 전화번호는 서로 다른 공간에 입력되어야 하므로, 각각 별개의 <div> 와 <p> 태그 안에 입력합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리스 :: elice</title>
</head>
<body>
<header>
<h1>
<img src= 'elice_logo.png'>
</h1>
<nav>
<li><a href="#">홈</a></li>
<li><a href="#">회사 소개</a></li>
<li><a href="#">연락처</a></li>
</nav>
</header>
<main role="main">
<article>
<h2>회사 소개</h2>
<p> 본문 내용</p>
</article>
</main>
<footer>
<div>
<p>서울시 서초구</P>
<p>010-1234-5678</p>
</div>
</footer>
</body>
</html>
'온라인 강의 > HTML' 카테고리의 다른 글
| 레이아웃에 영향을 미치는 속성 - float (0) | 2023.04.15 |
|---|---|
| Block 요소와 Inline 요소 (0) | 2023.04.13 |
| 텍스트 입력하기 (0) | 2023.04.13 |
| 링크와 이미지 입력하기 (0) | 2023.04.13 |
| HTML 문서를 구성하는 태그 (0) | 2023.04.13 |
