<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
/*주의할 점은 직관적인 box model 을 위해 box-sizing: border-box;을 사용*/
box-sizing: border-box;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: grey;
background-color: #f0f3f4;
}
li {
list-style-type: square;
}
a {
text-decoration: none;
}
/*즉, header 내의 h1은 section 내의 h1 보다 크다. 이것을 방지하기 위해서는 다음을 Rest CSS에 추가할 필요가 있다.*/
h1, h2, h3, h4, h5, h6, p {
margin: 10px 5px;
}
h1 { font-size: 1.8em; }
header {
width: 100%;
height: 60px;
z-index: 2000;
/*fixed 프로퍼티은 부모 요소와 관계없이 브라우저의 viewport 를 기준으로
좌표 프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킨다.
스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.*/
position: fixed;
top: 0;
background-color: #FFFFFF;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
}
#wrap {
/* margin-top = header height */
/*contents 영역 상단이 header 영역과 겹치므로 contents 영역을 header 의 height 만큼
아래로 끌어 내린다.*/
margin-top: 60px;
}
nav {
/*Navigation bar 를 우측정렬*/
float: right;
}
.logo {
/*a tag 는 inline 요소이므로 margin 을 정의하기 위해서 display: inline-block;을 설정*/
display: inline-block;
/*Page_Logo.png 를 포함하는 a tag(.logo)의 height 를 Page_Logo.png 와 같은 height 인 50px로 지정*/
height: 50px;
/*margin 은 이미지가 수직 중앙정렬하기 위해 사용*/
margin: 2px 0 5px 13px;
}
.logo > img {
height: 50px;
}
.nav_items > li {
/*수직 정렬되어 있는 Navigation bar 를 수평 정렬한다. block 요소인 li에 display: inline-block;를 설정하여 inline 요소와 같이 가로로 정렬케 한다.*/
display: inline-block;
}
.nav_items > li > a {
/*수평 정렬된 Navigation bar 수직 중앙 정렬한다. line-height: 60px;으로 텍스트의 높이를 header 의 height 와 동일하게 60px로 고정시킨다.
그리고 텍스트 간 적당한 간격 유지를 위해 padding 을 정의한다.*/
line-height: 60px;
padding: 0 30px;
color: rgba(0, 0, 0, 0.4);
}
.nav_items > li > a:hover {
/*마우스가 올라오면 색상 변경*/
color: rgba(0, 0, 0, 0.8);
}
/*float 프로퍼티가 선언된 두개의 자식 요소를 포함하는 부모 요소의 높이가 정상적인 값을 가지지 못하는 문제를 해결*/
#content-wrap:after {
content: "";
display: block;
clear: both;
}
aside {
/*aside 를 fixed 로 고정하고 200px 의 너비를 줌*/
position: fixed;
top: 60px;
bottom: 0;
width: 200px;
/*padding-top: 25px;*/
background-color: #333;
}
aside > ul {
width: 200px;
}
aside > ul > li > a {
display: block;
color: #FFFFFF;
padding: 10px 0 10px 20px;
}
aside > ul > li > a.active {
background-color: #4CAF50;
}
aside > ul > li > a:hover:not(.active) {
background-color: #F05F40;
}
aside > h1 {
padding: 20px 0 20px 20px;
color: #fff;
}
article {
margin: 10px;
padding: 25px;
background-color: white;
}
section {
float: right;
margin-left: 200px;
}
footer {
/* footer 를 aside 위에 올리기 위해 사용(부유객체) */
/*absolute 를 사용하면 다른 요소가 먼저 위치를 점유하고 있어도 뒤로 밀리지 않고 덮어쓰게 된다.*/
position: absolute;
height: 40px;
width: 100%;
padding: 0 25px;
line-height: 40px;
color: #8a8c8f;
border-top: 1px solid #dee5e7;
background-color: #f2f2f2;
}
</style>
<meta charset="UTF-8">
<title>Mckay</title>
</head>
<body>
<div id="wrap">
<header>
<a class="logo" href="#home">
<img src="../Items/Page_Logo.png">
</a>
<nav>
<ul class="nav_items">
<li><a href="#home">Home</a></li>
<li><a href="https://mckay-ml.ml/Programming">Programming</a></li>
<li><a href="../HTML_Prac/3.%20HTML_Basic_Prac.html">Photos</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>Mckay's Develope</footer>
</div>
</body>
</html>