2017. 2. 24. 20:19ㆍWork/CSS
웹 페이지 레이아웃
- 일반적인 웹 페이지 구성 요소
-- Header : 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택등 링크) 등으로 구성
-- Navigation : 링크 중에서 중요도가 높은 링클르 체계적으로 구성해 놓은 것, 링크를 별도로 모아둔 영역
-- Aside : 배너, 용어 설명, 관련 상품등 관련성이 적거나 없는 내용으로 구성
-- Section : 관련있는 내용을 요소별로 묶어 표시, 섹션마다 나름의 제목 체계를 가질 수 있다.
-- Footer : 바닥 영역 또는 꼬리말, 저작권, 연락정보 등 본문과 관련성 있지만 본문에 담기 어려운 내용
Header |
Navigation |
Aside |
Section |
Footer |
- 레이아웃 구분
1. 웹페이질르 구상
2. 웹페이지의 구성 영역을 분리
3. 구성 영역을 행 단위로 분리
4. 나누어진 행의 내부 요소를 분리
- 초기화 코드 구성
<style>
*{margin: 0; padding: 0;}
body{font-family: 'Times New Roman',serif;}
li{list-style: none;}
a{text-decoration: none;}
img{border: 0;}
</style>
-> 초기화 사이트 : Eric Meyer's Reset CSS http://meyerweb.com/eric/tools/css/reset/
HTML5 Doctor Reset stylesheet http://html5doctor.com/html-5-reset-stylesheet/
YUI 3 CSS Reset http://developer.yahoo.com/yui/3/cssreset/
- 폰트
구글 폰트(http://www.google.com/fonts)
<link href="https://fonts.googleapis.com/css?family=Mr+Dafoe" rel="stylesheet" type="text/css">
<style>
#title{
font-family: 'Mr Dafoe', cursive;
}
</style>
-> 현재에서는 SELECT THIS FONT 에서 Fast 쪽에서 사용
- 메뉴
<!-- 메뉴(1)-->
<style>
#main_gnb > ul {overflow: hidden;}
#main_gnb > ul > li {float: left;}
#main_gnb > ul > li > a{
display: block;
padding: 2px 10px;
border: 1px solid black;
}
#main_gnb > ul > li > a:hover{
background: black;
color: white;
}
#main_gnb > ul > li:first-child > a{
border-radius: 10px 0 0 10px;
}
#main_gnb > ul > li:last-child > a{
border-radius: 0 10px 10px 0;
}
</style>
<!-- 메뉴(2)-->
<style>
#main_lnb > ul {overflow: hidden;}
#main_lnb > ul > li {float: left;}
#main_lnb > ul > li > a{
display: block;
padding: 10px 20px;
border: 1px solid black;
}
#main_lnb > ul > li > a:hover{
background: black;
color: white;
}
#main_lnb > ul > li:first-child > a{
border-radius: 10px 0 0 10px;
}
#main_lnb > ul > li:last-child > a{
border-radius: 0 10px 10px 0;
}
</style>
-> a 영역을 넓혀서 선택 범위를 늘렸다.
- 콘텐츠
<!-- 콘텐츠-->
<style>
#content{
/* 중앙 정렬*/
width: 960px; margin: 0 auto;
/* 수평 레이아웃 구성*/
overflow: hidden;
}
#content > #main_section{
width: 750px; float: left;
}
#content > #main_aside{
width: 200px; float: right;
}
<section id="main_section">
<h1>Main Section</h1>
</section>
<aside id="main_aside">
<h1>Main Aside</h1>
</aside>