728x90
* html5 outliner
https://gsnedders.html5.org/outliner/
HTML 5 Outliner
gsnedders.html5.org
항상 코딩을 하기에 앞서,
아웃라이너 작업을 해서 순서대로 코딩을 할 수 있도록 습관을 들이자.
(네이버 같은 사이트도 아웃라인이 어떻게 잡혀있는지 알수있다.)
* 아웃라이너 예시
- 봄에 피는 꽃 봄에 피는 꽃
- 뉴스스탠드
- 주제별 캐스트
- Sign in
- 타임스퀘어
- 공지사항
- Creators
- Partners
- Developers
- 네이버 정책 및 약관
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="webstoryboy">
<meta name="description" content="반응형 사이트 따라하기">
<meta name="keywords" content="반응형사이트, 웹퍼블리셔, 웹접근성, HTML5, webstoryboy, webs">
<title>반응형 사이트 만들기 : 아웃 라이너</title>
<!-- style -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- 파비콘 -->
<link rel="shortcut icon" href="icon/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="icon/favicon-152.png">
<link rel="icon" href="path/to/favicon.png">
<link rel="icon" href="icon/favicon-16.png" sizes="16x16">
<link rel="icon" href="icon/favicon-32.png" sizes="32x32">
<link rel="icon" href="icon/favicon-48.png" sizes="48x48">
<link rel="icon" href="icon/favicon-64.png" sizes="64x64">
<link rel="icon" href="icon/favicon-128.png" sizes="128x128">
<!-- HTLM5shiv ie6~8 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script type="text/javascript">
alert("현재 당신이 보는 브라우저는 지원하지 않습니다. 최신 브라우저로 업데이트해주세요!");
</script>
<![endif]-->
</head>
<body>
<header>
<h1>반응형 사이트</h1>
</header>
<nav>
<h2>반응형 사이트 전체 메뉴</h2>
</nav>
<article>
<h2>반응형 사이트 서브 타이틀</h2>
</article>
<main>
<section>
<h2>반응형 사이트 컨텐츠</h2>
<section>
<h3>반응형 사이트 왼쪽 컨텐츠</h3>
<article><h4>반응형 사이트 왼쪽 컨텐츠1</h4></article>
<article><h4>반응형 사이트 왼쪽 컨텐츠2</h4></article>
<article><h4>반응형 사이트 왼쪽 컨텐츠3</h4></article>
</section>
<section>
<h3>반응형 사이트 가운데 컨텐츠</h3>
<article><h4>반응형 사이트 가운데 컨텐츠1</h4></article>
<article><h4>반응형 사이트 가운데 컨텐츠2</h4></article>
<article><h4>반응형 사이트 가운데 컨텐츠3</h4></article>
</section>
<section>
<h3>반응형 사이트 오른쪽 컨텐츠</h3>
<article><h4>반응형 사이트 오른쪽 컨텐츠1</h4></article>
<article><h4>반응형 사이트 오른쪽 컨텐츠2</h4></article>
<article><h4>반응형 사이트 오른쪽 컨텐츠3</h4></article>
</section>
</section>
</main>
<footer>
<h2>반응형 사이트 푸터</h2>
</footer>
<!-- JavaScript Libraries -->
<script src="js/jquery.min_1.12.4.js"></script>
<script src="js/modernizr-custom.js"></script>
</body>
</html>'내마음대로만들어보자 > HTML' 카테고리의 다른 글
| 여백 초기화 참고 (0) | 2022.04.09 |
|---|---|
| background url (0) | 2022.04.09 |
| 반응형 사이트 만들기 - 레이아웃5 (0) | 2022.04.08 |
| 반응형 사이트 만들기 - 레이아웃4 (0) | 2022.04.07 |
| 반응형 사이트 - 레이아웃3 (0) | 2022.04.07 |
