본문 바로가기
조회 수 2108 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print Files
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print Files

http://www.subcide.com/articles/creating-a-css-layout-from-scratch/P5/


주요 부분 구성을 위한 5개의 div를 추가


<div id="page-container">

<div id="main-nav">Main Nav</div>

<div id="header">Header</div>

<div id="sidebar-a">Sidebar A</div>

<div id="content">Content</div>

<div id="footer">Footer</div>

</div>


Without CSS, the divs will be arranged from top to bottom, one under the other, in the same order as they are in the code. This is usually refered to as the ‘flow’ of the document.


#header {
background: blue;
height: 150px;
}

#sidebar-a {
background: darkgreen;
}

#content {
background: green;
}

#footer {
background: orange;
height: 66px;
}

위 새로 추가한 각 div에서는 width를 따로 설정하지 않았다. 이 경우 이전에 설정한 #page-container div 의 width에 따른다.
div가 height 설정이 없다면 the heights are dependant on the content that’s inside them, so we wont set a height. 

#page-container {
width: 760px;
margin: auto;
background: red;
}

1.png


Title
List of Articles
번호 제목 글쓴이 날짜 조회 수
11 Refresh HTML Page in Browser Automatically Hojung 2014.06.07 1337
10 div태그와 span태그 비교 Hojung 2013.12.07 2102
9 What is the difference between <section> and <div>? Hojung 2013.12.07 1583
8 CSS 선택자의 종류 Hojung 2012.03.15 2753
7 CSS 적용방법 Hojung 2012.03.15 2084
6 CSS 강좌5 - CSS 레이아웃 생성 file Hojung 2012.03.15 3714
» CSS 강좌4 - 주요 요소 설정 file Hojung 2012.03.13 2108
4 CSS 강좌3 - 갠버스 설정 file Hojung 2012.03.13 2060
3 CSS 강좌2 - 기본 html 작성 Hojung 2012.03.13 1978
2 CSS 강좌1 - 레이아웃 잡기 file Hojung 2012.03.13 8212
1 추천 CSS 강좌 (Good) Hojung 2012.03.13 2174
Board Pagination ‹ Prev 1 Next ›
/ 1

Designed by sketchbooks.co.kr / sketchbook5 board skin

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5