클론코딩 with html5: header,section,footer,aside
2020. 11. 25. 17:48ㆍ퍼블리싱/HTML
반응형
Markup 실습(html5 기준)
header
section 제목태그 필수(h2-6)
footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--1. 상단-->
<header>
<!-- div.search>form>input+a[href="#"]>img-->
<div class="search">
<form action="">
<input type="text" placeholder="Search"><a href="#"><img src="images/icon-x.svg" alt="closing button"></a>
</form>
</div>
div.center>h1.logo>a[href="#"]>img
<nav>
<h2 class="blind">메인메뉴</h2>
ul>li*4>a[href="#"]
<!-- 서브메뉴 li 밑에-->
div.subWrap>ul.sub>li*5>a[href="#"]
</nav>
</header>
<hr>
<!--2. 본문-->
<section id="container">
<h2 class="blind">본문 전체</h2>
<section class="mainBanner">
<h3 class="blind">메인 배너</h3>
ul.banner>li>a[href="#"]>img
</section>
<section class="contents">
<h3 class="blind">매거진, 스토리, 프로모션</h3>
<div class="center">
<section class="magazine">
<h4 class="title">매거진</h4>
ul>li*3>(a[href="#"]>img+div.gBox)+a[href="#void">strong+span
<p class="more"><a href="#void">SHOW MORE</a></p>
</section>
<section class="story">
<h4 class="title">스토리</h4>
ul>li*4>(a[href="#void"]>img)+div.textBox>span.subTitle+h3.storyTitle+p+p.date
<p class="more"><a href="#void">SHOW MORE</a></p>
</section>
<section class="promotion">
<h4 class="title">프로모션</h4>
ul>li*4>(a[href="#"]>img)+p.text
div.promotionBtn>button*2
p.more>a[href="#void"]
</section>
</div>
<section class="sns">
<h4 class="title">SNS 계정</h4>
<p>계정명</p>
</section>
</section>
</section>
<hr>
<!--3. 하단-->
<footer>
<div class="footTop center">
ul.footMenu>li*2>strong+ul>li*5>a[href="#void"]
div.spcWrap
div.followWrap>strong+ul.sns
<div class="familySite">
<a href="#">Brand Sites</a>
ul.family>li*3>span+ul>li*5>a[href="#"]
</div>
</div>
<div class="footBottom">
<p>All Rights Reserved © </p>
</div>
</footer>
<aside class="fixedFooter">
p.top>a[href="#"]>(i>img)+span
ul.fixedMenu>li*4>a[href="#"]>(i>img)+span
</aside>
<aside class="fixedBanner">
div*2>(a[href="#"]>img)+button
</aside>
</body>
</html>
로고 링크 "/index.html" ( / =최상단을 의미)
#void 페이지의 현재위치
제목 태그의 중요성: validator outline 체크 시 목차 확인 가능
aside 퀵메뉴, 서브페이지에서 서브메뉴 삽입, 어디에 입력해도 상관없음
반응형
'퍼블리싱 > HTML' 카테고리의 다른 글
| html: favicon 파비콘 태그와 meta메타 태그, 시멘틱 태그 활용하여 마크업 실습 (0) | 2020.11.26 |
|---|---|
| html: audio, 지도 api, 공간 분할 태그, 시멘틱 태그, markup 실습, 홈페이지 레이아웃 짜기 (0) | 2020.11.25 |
| html: form 태그와 속성, input, label, select, fieldset (0) | 2020.11.23 |
| 이미지 태그, 이미지맵, 글자 태그, 테이블 태그 (0) | 2020.11.20 |
| html 레이아웃, 에디터, 태그의 종류 (0) | 2020.11.19 |