<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--가로폭을 디바이스의 가로폭에 맞추고 초기화면 배율은 100%로 설정-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--viewpoint meta tag-->
<!--프로퍼티 Description 사용예-->
<!--width viewport 너비(px). 기본값: 980px width=240-->
<!--width=device-width-->
<!--height viewport 높이(px) height=800-->
<!--width=device-height-->
<!--initial-scale viewport 초기 배율 initial-scale=1.0-->
<!--user-scale 확대 축소 가능 여부 user-scale=no-->
<!--maximum-scale viewport 최대 배율 maximum-scale=2.0-->
<!--minimum-scale viewport 최소 배율 minimum-scale=1.0-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
/* Simple Reset CSS */
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #58666e;
background-color: #f0f3f4;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjus: 100%; /* iphone font size 변경 방지 */
}
li { list-style: none; }
a { text-decoration: none; }
h1, h2, h3, h4, h5, h6, p {
margin: 10px 5px;
}
h1 { font-size: 1.8em; }
#wrap {
width: 100%;
/* margin-top = header height */
margin-top: 60px;
}
/* Navigation bar */
header {
/* for sticky header */
position: fixed;
top: 0;
width: 100%;
height: 60px;
z-index: 2000;
background-color: #fff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
}
.logo {
display: inline-block;
height: 36px;
margin: 12px 0 12px 25px;
}
.logo > img { height: 36px; }
nav {
float: right;
}
.nav-items {
margin-right: 20px;
}
.nav-items > li {
display: inline-block; /* 가로정렬 */
}
.nav-items > li > a {
line-height: 60px; /* for Vertical Centering */
padding: 0 30px; /* nav item 간 간격 */
color: rgba(0,0,0,0.4);
}
.nav-items > li > a:hover {
color: rgba(0,0,0,0.8);
}
/* navigation icon for Mobile Layout */
.navicon {
cursor: pointer;
/*header 영역의 크기와 같은 height*/
height: 60px;
/*아이콘의 padding 조정*/
padding: 28px 15px;
/*header 우측의 절대 위치에 배치되어야 하므로 absolute*/
position: absolute;
top: 0; right: 0;
/*navigation icon 을 클릭했을 때 이미지가 선택되지 않게 하는 벤더 프리픽스*/
/*navigation icon 이 텍스트이기 때문에 발생하는 문제.*/
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
/* span tag 로 정의한 nav icon 의 내부 막대 */
.navicon-bar {
background-color: #333;
display: block;
/*가상요소에 절대 위치를 지정하였기 때문에 가상 요소의 부모요소인 span 오소에 relative*/
position: relative;
/* navigation icon animation */
/*체크되어 x 표시가 만들어질 때 transition 효과를 부여해 부드럽게 움직이게 한다.*/
transition: background-color .2s ease-out;
width: 20px;
height: 3px;
}
.navicon-bar::before,
.navicon-bar::after {
background-color: #333;
content: "";
display: block;
height: 100%;
position: absolute;
/* navigation icon animation */
transition: all .2s ease-out;
width: 100%;
}
.navicon-bar::before {
/*-7 픽셀 위치에 before 요소 출력*/
top: -7px;
}
.navicon-bar::after {
top: 7px;
}
/* toggle navigation icon */
.nav-toggle:checked ~ .navicon > .navicon-bar {
/*만약 체크가 된다면 중간 막대를 없애고*/
background: transparent;
}
.nav-toggle:checked ~ .navicon > .navicon-bar::before {
/*위의 막대는 45도 회전시키고*/
transform: rotate(45deg);
top: 0;
}
.nav-toggle:checked ~ .navicon > .navicon-bar::after {
/*아래 막대는 -45도 회전시켜 x 표시를 만든다*/
transform: rotate(-45deg);
top: 0;
}
/* contents */
/* clearfix */
#content-wrap:after {
content: "";
display: block;
clear: both;
}
aside {
/* for fixed side bar */
position: fixed;
top: 60px;
bottom: 0;
width: 200px; /* 너비 고정 */
padding-top: 25px;
background-color: #333;
}
/* aside navigation */
aside > ul {
width: 200px;
}
aside > ul > li > a {
display: block;
color: #fff;
padding: 10px 0 10px 20px;
}
aside > ul > li > a.active {
background-color: #4CAF50;
}
aside > ul > li > a:hover:not(.active) {
background-color: #555;
}
aside > h1 {
padding: 20px 0 20px 20px;
color: #fff;
}
/* Section */
section {
float: right;
margin-left: 200px; /*aside width*/
}
article {
/*1행에 2열로 배치하기 위해 값들 수정. 97% width, 왼쪽 정가운데 오른쪽 1퍼씩
총 3퍼를 마진이 가져감.*/
width: 48.5%;
margin: 1%;
padding: 25px;
background-color: white;
/*왼쪽정렬로 2열로 정렬되도록 함.*/
float: left;
}
article:nth-of-type(2n) {
/*한 행의 두번째 요소의 왼쪽 마진 0으로 하여 첫번째 요소의 오른쪽 마진과 겹치는 현상 방지.*/
margin-left: 0;
}
article:nth-of-type(n+3) {
/*3번째부터 등장하는 (n은 0부터 시작) 요소들의 위쪽 마진을 0으로 하여 마진 2% 되는 현상 방지*/
margin-top: 0;
}
/* footer */
footer {
/* footer 를 aside 위에 올리기 위해 사용(부유객체) */
position: absolute;
height: 60px;
width: 100%;
padding: 0 25px;
line-height: 60px;
color: #8a8c8f;
border-top: 1px solid #dee5e7;
background-color: #f2f2f2;
}
/*스마트폰 이외의 layout 에서는 화면에 표시되지 않도록 함*/
/*CSS 적용 우선 순위 (Cascading Order)를 고려하여 가장 마지막에 정의하는 것이 안전하다.
일반적으로 media query 를 가장 마지막에 정의하므로 media query 정의부 직전에 위치시킨다.*/
.nav-toggle {
display: none;
}
.navicon {
display: none;
}
/*@media 을 사용하여 미디어 별로 style 을 지정하는 것을 Media Query 라 한다.*/
/*프로퍼티 Description*/
/*width viewport 너비(px)*/
/*height viewport 높이(px)*/
/*device-width 디바이스의 물리적 너비(px)*/
/*device-height 디바이스의 물리적 높이(px)*/
/*orientation 디바이스 방향 (가로 방향: landscape, 세로방향: portrait)*/
/*device-aspect-ratio 디바이스의 물리적 width/height 비율*/
/*color 디바이스에서 표현 가능한 최대 색상 비트수*/
/*monochrome 흑백 디바이스의 픽셀 당 비트수*/
/*resolution 디바이스 해상도*/
/*orientation 을 제외한 모든 프로퍼티는 min/max 접두사를 사용할 수 있다.*/
/*CSS 적용 우선 순위 (Cascading Order)에 따라 나중에 선언된 스타일이 우선 적용된다.
따라서 Media Query 는 기술 순서에 의미가 있다. 만일 스마트폰용 스타일을 태블릿용 스타일보다 먼저
기술하면 최종적으로 태블릿용 스타일이 적용된다. 따라서 Non Mobile First 방식의 경우, max-width 의
값이 큰 것부터 기술하여 한다.*/
/* Media Query */
/* for tablet: ~ 800px */
@media screen and (max-width: 800px) {
header {
/*헤더 영역을 2배로 늘리고 중앙정렬*/
height: 120px;
text-align: center;
}
nav {
/*float:right 프로퍼티를 해제하여 가로로 나란히 정렬되있는 로고와 nav 를 두줄로 배치*/
/*navigation bar 가 block 프로퍼티를 가지게 되어 로고의 아래 영역으로 내려가게 됨.*/
float: none;
margin-right: 0;
}
#wrap {
/* margin-top = header height */
/*헤더가 길어진 만큼 aside 와 section 영역도 2배*/
margin-top: 120px;
}
aside {
top: 120px;
}
article {
/*2열로 배치되어 있던 article 을 1열로 배치.*/
width: inherit;
display: block;
margin: 10px;
float: none;
}
article:nth-of-type(2n) {
margin: 10px;
}
article:nth-of-type(n+2) {
margin-top: 0;
}
}
/* for smartphone: ~ 480px */
@media screen and (max-width: 480px) {
header {
/*태블릿 모드에서 120px 로 바꿨었기 때문에 원상태로 복원*/
height: 60px;
}
/*초기상태에서는 비표시 되어야 함. 그리고 navigation icon 은 표시되어야 함.*/
.nav-items {
display: none;
}
.navicon {
display: block;
}
#wrap {
/* margin-top = header height */
/*콘텐츠 영역이 내려가 있는걸 원상태로 다시 끌어 올림.*/
margin-top: 60px;
}
/*480px 이하로 작아지면 고정 배치되어 있던 aside 를 article 을 위로 올려 배치한다.*/
aside {
top: 60px;
position: static;
width: 100%;
padding: 5px 0;
}
/* aside navigation */
aside > ul {
width: 100%;
}
aside > h1 {
padding: 5px 0 10px 20px;
color: #fff;
}
section {
float: none;
margin-left: 0;
}
/* View navigation item */
/*navigation icon 을 클릭하면 navigation icon 이 표시되도록 함.*/
.nav-toggle:checked ~ .nav-items {
display: block;
width: 100%;
background-color: #fff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
}
.nav-items > li {
display: block;
}
.nav-items > li > a {
line-height: 50px;
}
}
</style>
</head>
<body>
<div id="wrap">
<header>
<a class="logo" href="#home"><img src="https://poiemaweb.com/img/logo.png"></a>
<nav>
<!--nav 요소 안에 클릭할 수 있는 navigation icon 을 만들기 위해 html tag 를 추가한다.
for 프로퍼티 값과 id 프로퍼티 값이 일치하여야 한다. 그러면 label 요소를 클릭했을 때
input checkbox 요소가 클릭된다. 이것을 이용하여 커스텀 nav icon 을 만듬.-->
<input class="nav-toggle" id="nav-toggle" type="checkbox">
<!--span tag 는 navigation icon 의 내부 막대 3개를 표시하기 위해 정의하였음.-->
<label class="navicon" for="nav-toggle"><span class="navicon-bar"></span></label>
<ul class="nav-items">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<div id="content-wrap">
<aside>
<h1>Aside</h1>
<ul>
<li><a href="#" class="active">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
<li><a href="#">Newyork</a></li>
</ul>
</aside>
<section>
<article id="london">
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p>
<p>London, also referred to as Greater London, is one of 9 regions of England and the top-level subdivision covering most of the city's metropolis. The small ancient City of London at its core once comprised the whole settlement, but as its urban area grew, the Corporation of London resisted attempts to amalgamate the city with its suburbs, causing "London" to be defined in a number ways for different purposes.</p>
</article>
<article id="paris">
<h1>Paris</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p>
<p>London, also referred to as Greater London, is one of 9 regions of England and the top-level subdivision covering most of the city's metropolis. The small ancient City of London at its core once comprised the whole settlement, but as its urban area grew, the Corporation of London resisted attempts to amalgamate the city with its suburbs, causing "London" to be defined in a number ways for different purposes.</p>
</article>
<article id="tokyo">
<h1>Tokyo</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p>
<p>London, also referred to as Greater London, is one of 9 regions of England and the top-level subdivision covering most of the city's metropolis. The small ancient City of London at its core once comprised the whole settlement, but as its urban area grew, the Corporation of London resisted attempts to amalgamate the city with its suburbs, causing "London" to be defined in a number ways for different purposes.</p>
</article>
<article id="newyork">
<h1>Newyork</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p>
<p>London, also referred to as Greater London, is one of 9 regions of England and the top-level subdivision covering most of the city's metropolis. The small ancient City of London at its core once comprised the whole settlement, but as its urban area grew, the Corporation of London resisted attempts to amalgamate the city with its suburbs, causing "London" to be defined in a number ways for different purposes.</p>
</article>
</section>
<!-- end of content-wrap -->
</div>
<footer>© Copyright 2016 ungmo2</footer>
<!-- end of wrap -->
</div>
</body>
</html>