본문 바로가기
조회 수 2080 추천 수 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/P4/


760px 넓이의 페이지를 위한 컨테이너 생성


 id=“page-container” 속성을 가진  <div> 생성


<body>

<div id="page-container">
Hello world.
</div>

</body>

An id is a unique identifier that we use for things that are only going to occur once on the page. So for headers, footers, navigation, etc we use id's, and for any reccuring elements like links we should use classes, which can occur multiple times on the same page.


CSS 파일에서 해당 div를 백그라운드와 길이를 설정. 그리고 해당 div를 중앙에 위치


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

Now you should have a centered red 760px wide block with “Hello World.” written in it. But its sitting about 8px away from the top/sides of the browser.


css.png


This is because the html and body tags have default margins and/or padding on nearly all browsers. So we need to write a CSS rule to reset the margins and padding on the html and body tags to zero. Add this rule to the very top of your css file:


html, body {
	margin: 0;
	padding: 0;
}

css2.png

A comma in between CSS selectors stands for “or”, so here the rule will be applied to the html tag or the body tag. Because both exist on the page, it will be applied to both.





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

Designed by sketchbooks.co.kr / sketchbook5 board skin

나눔글꼴 설치 안내


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

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

설치 취소

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5