CSS 기본 교육

CSS 박스 모델

CSS3기본 튜토리얼

CSS 참조 가이드

CSS @규칙(RULES)

CSS 예제大全 CSS Counter(카운터)

css 레이아웃(웹 레이아웃)

CSS 레이아웃설계가 간편합니다. 우리는 CSS 레이아웃을 사용하여 웹 페이지를 설계할 수 있습니다. 예를 들어, 홈페이지, 연락처, 회사 정보 등입니다.

웹 페이지 레이아웃을 설계하는 방법이 세 가지 있습니다：

HTML Div+CSS 레이아웃：현재 널리 사용되고 있습니다。
HTML 테이블：느리며, 인기가 없습니다.
HTML 프레임워크：제거됨.

CSS 레이아웃은 헤더, 푸터, 왼쪽 패널, 오른쪽 패널, 본문 부분을 포함할 수 있습니다. 간단한 CSS 레이아웃 예제를 보겠습니다.

CSS 레이아웃 예제

예제

<!DOCTYPE　html>　　
<html>　　
<head>　　
<style>　　
.header{margin:-8px　-8px　0px;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}　　
.container{width:100%}　　
.left{width:15%;float:left;}　　
.body{width:65%;float:left;background-color:pink;padding:5px;}　　
.right{width:15%;float:left;}　　
.footer{margin:-8px;clear:both;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}　　
</style>　　
</head>　　
<body>　　
<div　class="header"><h2>기본 튜토리얼　oldtoolbag.com</h2></div>　　
　　
<div　class="container">　　
<div　class="left">　　
<p>왼쪽 패널</p>　　
</div>　　
<div　class="body">　　
<h1>본문</h1>　　
<p>페이지 내용이 여기에 있습니다</p><p>페이지 내용이 여기에 있습니다</p><p>페이지 내용이 여기에 있습니다</p>　　
<p>페이지 내용이 여기에 있습니다</p><p>페이지 내용이 여기에 있습니다</p><p>페이지 내용이 여기에 있습니다</p>　　
<p>페이지 내용이 여기에 있습니다</p><p>페이지 내용이 여기에 있습니다</p><p>페이지 내용이 여기에 있습니다</p>　　
<p>페이지 내용이 여기에 있습니다</p><p>페이지 내용이 여기에 있습니다</p><p>페이지 내용이 여기에 있습니다</p>　　
<p>페이지 내용이 여기에 있습니다</p>　　
</div>　　
<div　class="right">　　
<p>오른쪽 패널</p>　　
</div>　　
</div>　　
　　
<div　class="footer">　　
<p>Footer</p>　　
</div>　
</body>　　
</html>

테스트 보기‹/›

출력 결과:

기본 튜토리얼 oldtoolbag.com

왼쪽 패널

본문

페이지 내용이 여기에 있습니다

오른쪽 패널

하단

CSS 예제大全 CSS Counter(카운터)