layout의 핵심 - 블록 레벨 요소들을 원하는 위치에 배열
화면 크기 따라 적절히 화면 구성 변화시키는 반응형 웹디자인 > 필수사항
css 사용 시 layout을 구성할 때 자주 사용되는 핵심 기술은 float
layout - 웹사이트 구성하는 요소 배치할 공간 분할, 정렬
행 구분 후 행내부 요소를 분리하는 것이 일반적
1.Header&Navigation Bar
네비게이션바 - 기본적으로 링크들의 리스트 > ul,li tag 이용하는 것이 일반적
직관적인 box model 위해 box-sizing : border-box; 사용
*box-sizing https://y5l3-1k.tistory.com/14
header
header{
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);
}
float 프로퍼티로 navigation bar를 우측 정렬
*float 관련 https://y5l3-1k.tistory.com/19
logo image를 수직으로 중앙 정렬하기
logo 이미지 포함하는 a 태그의 높이를 logo 이미지와 같은 36px로 지정, 상하 margin을 12px씩 부여하면 logo 요소의 총 높이는 60px(36+12+12) header의 높이와 같아져 이미지는 수직 중앙 정렬됨
.logo {
display: inline-block;
height: 36px;
margin: 12px 0 12px 25px;
}
.logo > img { height: 36px; }
a 태그는 inline 요소 > margin 정의 위해서 display:inline-block을 설정
또한 img 태그에 부여한 높이 어트리뷰트를 css로 옮김
*원래 inline 요소는 width,height,margin-top/bottom 지정 불가능 https://y5l3-1k.tistory.com/15
.logo {
display: inline-block;
height: 36px;
margin: 12px 0 12px 25px;
}
.logo > img { height: 36px; }
.nav-items > li {
display: inline-block;
}
수직 정렬된 nav bar 수평정렬 display:inline-block 설정해 inline 요소처럼 가로로 정렬되게
.nav-items > li {
display: inline-block;
}
수평정렬된 nav를 수직 중양 정렬. line-height:60px로 텍스트 높이를 header 높이와 동일하게 고정
텍스트간 간격 유지 > padding 정의
.nav-items > li > a{
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);
}
2. section&aside
Section : 콘텐츠 영역 / 다시 article 영역으로 구분할 수 있음
Aside : 콘텐츠에 대한 navigation item이나 부가 정보 영역
두개 영역은 float 프로퍼티를 사용해 수평 정렬하는 것이 일반적
header 요소 뒤에 aside, section, article 포함하는 content-wrap 요소를 정의
<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>...</p>
</article>
<article id="paris">
<h1>Paris</h1>
<p>...</p>
</article>
<article id="tokyo">
<h1>Tokyo</h1>
<p>...</p>
</article>
<article id="newyork">
<h1>Newyork</h1>
<p>...</p>
</article>
</section>
</div>
aside를 좌측 정렬, section을 우측 정렬
이때 float 프로퍼티 요소를 감싸는 wrap 요소에 clearfix 부여 > float 프로퍼티가 선언된 두개 자식 요소 포함하는 부모요소의 높이가 정상값을 가지지 못하는 문제 해결해야 > clear:both;
#content-wrap:after{
content:"";
display: block;
clear:both;
}
aside{
float:left;
width: 20%;
}
section{
float: right;
width: 80%;
}
스크롤하면 네비게이션 바 사라짐> 상단 고정
fixed 프로퍼티를 사용
fixed는 부모 요소와 관계 없이 브라우저의 viewport 기준으로 좌표 프로퍼티를 사용하여 위치를 이동시킴, 스크롤되더라도 항상 같은 곳에 위치
header{
position: fixed;
top:0;
}
contents 상단 영역이 header와 겹침>contetns 영역을 header height 만큼 내림
#wrap{
margin-top: 60px;
}
좌측 aside의 네비게이션 고정
float:left 삭제, position:fixed추가, width도 고정폭으로 변경
이때 section 영역의 width 삭제, aside 만큼 우측으로 밀어서 나머지 영역 모두 차지
aside{
position:fixed;
top:60px;
bottom: 0;
width: 200px;
}
section{
float: right;
margin-left: 200px;
}
aside 네비게이션의 스타일 정리
aside{
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: #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;
}
article{
margin: 10px;
padding: 25px;
background-color: white;
}
h1의 크기가 위치한 영역에 따라 다름
> header 내의 h1은 section의 h1보다 크다
h1{font-size:1.8em;}
h1,h2,h3,h4,h5,h6,p{
margin: 10px 5px;
}
3. footer
content-wrap 다음에 footer 배치
<footer>© Copyright 2016 ungmo2</footer>
footer이 본문 가리는 것 곤란 > fixed 프로퍼티 설정X
> absolute 프로퍼티 설정
footer{
position: absolute;
height: 60px;
width: 100%;
padding: 0 25px;
line-height: 60px;
color: #8a8c8f;
border-top:1px solid #dee5e7;
background-color: #f2f2f2;
}
전체코드
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #58666e;
background-color: #f0f3f4;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
header{
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);
position: fixed;
top:0;
}
nav {
float: right;
}
.logo {
display: inline-block;
height: 36px;
margin: 12px 0 12px 25px;
}
.logo > img { height: 36px; }
.nav-items > li {
display: inline-block;
}
.nav-items > li > a{
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);
}
#content-wrap:after{
content:"";
display: block;
clear:both;
}
aside{
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: #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;
}
article{
margin: 10px;
padding: 25px;
background-color: white;
}
section{
float: right;
margin-left: 200px;
}
#wrap{
margin-top: 60px;
}
h1{font-size:1.8em;}
h1,h2,h3,h4,h5,h6,p{
margin: 10px 5px;
}
footer{
position: absolute;
height: 60px;
width: 100%;
padding: 0 25px;
line-height: 60px;
color: #8a8c8f;
border-top:1px solid #dee5e7;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div id="wrap">
<header>
<a class="logo" href="#home">
</a>
<nav>
<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>
<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article id="paris">
<h1>Paris</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article id="tokyo">
<h1>Tokyo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article id="newyork">
<h1>Newyork</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>
</div>
<footer>© Copyright 2016 ungmo2</footer>
</body>
</html>
