코딩 16일째
F12
!window.Modernizr
->false
!!window.Modernizr
-> true
-----------------------------------------------------------------------------
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial=scale=1.0">
<!--기기의 크기에 맞추기-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Orbitron">
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
<title>태블릿 레이아웃</title>
</head>
<body>
<!--div.wrap>heder+(div.contents>aside+section)+footer-->
<div class="wrap">
<header>
<!-- h1#logo{Fluid}-->
<h1 id="logo">Fluid</h1>
<!-- nav>(ul#left>(li>a{Menu$})*5)+(ul#right>(li>a{Button$})*2) -->
<nav>
<ul id="left">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
<ul id="right">
<li><a href="#">Button1</a></li>
<li><a href="#">Button2</a></li>
</ul>
</nav>
</header>
<div class="contents">
<aside>
<ul class="aside_menu">
<li><a href="#">aside Menu1</a></li>
<li><a href="#">aside Menu2</a></li>
<li><a href="#">aside Menu3</a></li>
<li><a href="#">aside Menu4</a></li>
</ul>
</aside>
<section>
<!-- (article>h2{본문제목 $}+p)*3-->
<article>
<h2>본문제목 1</h2>
<p>
모든 국민의 재산권은 보장된다. 그 내용과 한계는 법률로 정한다. 대통령은 법률이 정하는 바에 의하여 사면·감형 또는 복권을 명할 수 있다. 이 헌법중 공무원의 임기 또는 중임제한에 관한 규정은 이 헌법에 의하여 그 공무원이 최초로 선출 또는 임명된 때로부터 적용한다. 제안된 헌법개정안은 대통령이 20일 이상의 기간 이를 공고하여야 한다. 국무총리는 국회의 동의를 얻어 대통령이 임명한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국가원로자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.
</p>
</article>
<article>
<h2>본문제목 2</h2>
<p>
대통령이 제1항의 기간내에 공포나 재의의 요구를 하지 아니한 때에도 그 법률안은 법률로서 확정된다. 누구든지 병역의무의 이행으로 인하여 불이익한 처우를 받지 아니한다. 의무교육은 무상으로 한다. 행정각부의 장은 국무위원 중에서 국무총리의 제청으로 대통령이 임명한다. 학교교육 및 평생교육을 포함한 교육제도와 그 운영, 교육재정 및 교원의 지위에 관한 기본적인 사항은 법률로 정한다. 제2항의 재판관중 3인은 국회에서 선출하는 자를, 3인은 대법원장이 지명하는 자를 임명한다. 정부는 예산에 변경을 가할 필요가 있을 때에는 추가경정예산안을 편성하여 국회에 제출할 수 있다. 이 헌법시행 당시에 이 헌법에 의하여 새로 설치될 기관의 권한에 속하는 직무를 행하고 있는 기관은 이 헌법에 의하여 새로운 기관이 설치될 때까지 존속하며 그 직무를 행한다.
</p>
</article>
<article>
<h2>본문제목 3</h2>
<p>
국가는 건전한 소비행위를 계도하고 생산품의 품질향상을 촉구하기 위한 소비자보호운동을 법률이 정하는 바에 의하여 보장한다. 대한민국의 영토는 한반도와 그 부속도서로 한다. 사법권은 법관으로 구성된 법원에 속한다. 모든 국민은 직업선택의 자유를 가진다. 헌법재판소는 법관의 자격을 가진 9인의 재판관으로 구성하며, 재판관은 대통령이 임명한다. 국무회의는 대통령·국무총리와 15인 이상 30인 이하의 국무위원으로 구성한다. 각급 선거관리위원회는 선거인명부의 작성등 선거사무와 국민투표사무에 관하여 관계 행정기관에 필요한 지시를 할 수 있다. 대통령후보자가 1인일 때에는 그 득표수가 선거권자 총수의 3분의 1 이상이 아니면 대통령으로 당선될 수 없다.
</p>
</article>
</section>
<footer>
<!-- h3{HTML 5 + CSS3 Basic}+p{© Fluid Layout}-->
<h3>HTML 5 + CSS3 Basic</h3>
<p>© Fluid Layout</p>
</footer>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------
main.css
@charset "uft-8";
@import url(normalize.css);
body {
width: 100%;height: 100%;
min-width: 800px;
background: #efe;
color: #333;
font: 16px 'Nanum Gothic', sans-serif;
}
/*.wrap*/
.wrap {
width: 100%;height: 100%;
}
/*header*/
header {
width: 100%;height:100px;
background: #0df;
color: #fff;
font-family: Orbitron, sans-serif;
}
#logo {
padding-left: 20px;
line-height: 70px
}
nav {
background: #07f;
line-height: 30px;
}
nav li {
float: left;
}
#left {
float: left;
margin-left: 20px;
}
#right {
float: right;
margin-left: 20px;}
#left a, #right a {
padding: 0.5px;
display: block;
}
#left a:hover,#right a:hover,
#left a:focus,#right a:focus {
background: #fff;
color: #333;
}
#left a {
transition: all 0.4s;
}
/*contents*/
.contents {
width: 100%; height: 100%;
}
.contents > aside {
float: left;
width: 200px;
padding-top: 20px;
}
.contents .aside_menu {
text-align: center;
text-transform: uppercase;
}
.aside_menu li {
margin-bottom: 5px;
}
.aside_menu a {
display: block;
/* 그래야 앵커가 리스트를 꽉 채운다*/
padding: 3px 0;
}
.aside_menu a:hover,
.aside_menu a:focus {
background: #0df;
color: #fff;
text-shadow: 1px 1px 2px #222;
}
.contents > section {
margin-left: 200px;
/* 굳이 플로트를 할 필요가 없다*/
background: #fff;
padding-top: 20px;
text-align: justify;
}
.contents article {
margin-bottom: 10px;
}
article h2 {
margin-bottom: 3px;
font-weight: normal;
font-size: 16px;
}
article p {
line-height: 1.6em;
font-size: 0.9em;
letter-spacing: -1px;
}
/*footer*/
footer {
background: #0ae;
color: #fff;
width: 100%;
padding: 10px 0;
text-align: center;
}n
footer h3 {
font-style: italic;
}
footer p {
font-weight: normal;
}
/*fixed*/
/*
footer {
position: fixed;
bottom: 0;
}
*/
header {
position: fixed;
top: 0;
}
.contents {
margin-top: 100px;
}
section {
height: 100%
}