레이아웃 (3일차 이어서)
<div id="footer">
<h1 style="display: none;">꼬리말</h1>
<ol style="list-style-type: none;">
<li>이용약관</li>
<li>개인정보 처리방침</li>
<li>인쇄복권당첨금지급기준</li>
</ol>
주소 : 06719 서울 서초구 남부순환로 2423 한원빌딩 4층 고객문의 1588-6450 FAX 02-6933-3
</div> <!-- footer end -->
화면에 표현되지 않지만 구조를 잡을 때 사용하는 태그를 시맨틱 태그라고 한다. (시맨틱 요소)
시맨틱 요소
의미를 부여한 태그이다.
- <article> : 주로 내용이 있는 부분을 지정하는 경우 사용한다. 내용이 없는 부분은 사용하지 않는다.
- <aside> : 헤더, 메인, 푸터가 아닌 영역을 지정할 때 사용한다.
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav> : 링크로 구성되어 있는 섹션이다.
- <section> : 일련번호로 구성된 제목을 지정하는 경우. <article>, <nav>, <aside>로 나눌 수 있다.
- <summary>
- <time>
<!DOCTYPE html>
<html lang="ko">
<head>
<title>17_동행복권.html</title>
</head>
<body>
<!-- 동행복권 웹페이지와 시맨틱 요소 -->
<!-- 참조 https://dhlottery.co.kr/ -->
<!-- 참조 15_레이아웃.html -->
<div id="wrap">
<header>
<section>
<span>동행복권</span>
<input type="button" value="로그인">
<input type="button" value="회원가입">
<input type="button" value="마이페이지">
<input type="button" value="고객센터">
</section>
<section>
<h1 style="display: none;">대분류</h1>
<nav>
<ul style="list-style: none;">
<li><a href="">복권구매</a></li>
<li><a href="">복권정보</a></li>
<li><a href="">당첨결과</a></li>
<li><a href="">판매점</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">행복공감</a></li>
</ul>
</nav>
</section>
</header><!-- header end -->
<main>
<h1 style="display: none;">본문</h1>
<div id="sub">
<h2 style="display: none;">중분류</h2>
<span>판매점</span><br>
<nav>
<ul style="list-style: none;">
<li><a href="">구입처안내</a></li>
<li><a href="">당첨판매점</a></li>
</ul>
</nav>
</div><!-- sub end -->
<div id="content">
<article>로또는 온라인복권입니다.</article>
<article>자동, 반자동, 수동으로 고객이 선택하여 구입할 수 있습니다.</article>
<article>판매량에 따라 복권기금과 1등 당첨금액이 결정됩니다.</article>
</div><!-- content end -->
</main><!-- main end -->
<aside>
퀵메뉴 및 광고
</aside><!-- aside end -->
<footer>
<section>
<h1 style="display: none;">꼬리말</h1>
<nav>
<ol style="list-style-type: none;">
<li><a href="">이용약관</a></li>
<li><a href="">개인정보 처리방침</a></li>
<li><a href="">인쇄복권당첨금지급기준</a></li>
</ol>
</nav>
</section>
<section>
<article>주소 : 06719 서울 서초구 남부순환로 2423 한원빌딩 4층 고객문의 1588-6450 FAX 02-6933-306</article>
</section>
</footer><!-- footer end-->
</div><!-- wrap end -->
</body>
</html>
참고
https://www.w3schools.com/html/html5_semantic_elements.asp
HTML Semantic Elements
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'웹개발 교육 > HTML' 카테고리의 다른 글
| [3일] html (3) - 입력 양식, 블록, 레이아웃 (0) | 2022.07.31 |
|---|---|
| [2일] html (2) - 기본 구조, 텍스트 입력, 색상, 이미지, 동영상, 프레임, 링크, 목록, 표 (0) | 2022.07.30 |
