"일모리의 CSS 쉽게 배우기" 사이트를 보다가 간단하게 한번 짜보았습니다.
전체너비 700픽셀 가운데 정렬이며 충분히 실전에 사용가능한 심플한 예제입니다.
<!-- content exp --> 에서 <!-- /content exp --> 까지는 content 영역에 여러번 복제해서 사용해도 되도록 했습니다.
부족한 부분은 코멘트를 통해 보충해주시면 고맙겠습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> CSS 레이아웃 예제 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
/*기본코드*/
html {
background: none;
padding: 0;
margin: 0;
text-align: center;
font-family: tahoma, verdana, gulim, 굴림,sans-serif;
font-size: 12px;
}
body {
margin: 0;
text-align: center;/*가운데 정렬*/
}
a {
text-decoration: none;
color: black;
}
/*wrap */
#wrap {
background: #eee url(wrap.gif) no-repeat top left;
width: 700px;
padding: 0;
margin: 0 auto;
text-align: left;
}
/*wrap ie - ie에서는 width, height값에 padding, border 값등을 더한 값을 주어야 한다 */
* html #wrap {
width: 710px;
}
/* header 부분 */
/* id= header 로 정해진곳을 부릅니다 */
#header {
background: #aaa url(header.gif);
border: 1px solid #ddd;
width: 600px;
height: 70px;
padding: 0;
margin: 0;
}
/*sidebar 부분 */
.sidebar {
width: 90px;
padding: 0;
margin: 0;
background: #eee url(sidebar.gif) no-repeat top left;
float:left; /*왼쪽으로 붙입니다*/
}
.sidebar ul {
padding: 0;
margin: 0px;
}
.sidebar ul li {
padding: 0;
margin: 0;
list-style-image: none;
list-style-type: none;
}
/* menu 의 링크 꾸미기 없게*/
.sidebar ul li a {
text-decoration: none;
}
/* content 부분 */
#content {
float: left;
width: 500px;
padding: 0;
margin: 0;
text-align: left;
background: #bbb;
}
#content .mid {
float: left;
width: 245px;
padding: 0;
margin: 0;
text-align: left;
background: #ddd;
}
#content .right {
float: left;
width: 245px;
padding: 0;
margin: 0;
text-align: left;
background: #ccc;
}
.writing {
line-height: 150%;
letter-space: .2em;
margin:0;
width: 245px;
}
.hspace {
float: left;
width: 10px;
height: auto;
margin: 0;
padding: 0;
background: #fff;/*transparent*/
}
.vspace {
width: auto;
height: 10px;
margin: 0;
padding: 0;
background: #fff;/*transparent*/
clear:both;
}
/* id= footer 로 정해진곳을 부릅니다 */
#footer {
background: #ccc url(footer.gif);
border: 1px solid #ddd;
width: 600px;
height: 70px;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="wrap">
<pre>
CSS를 활용한 레이아웃 잡기 - 기본
h-가로여백, v-세로여백
전체 기본영역 700px로 해봅니다.
ie에서는 width, height값에 padding, border 값등을 더한 값을 주어야 하는점 필히 숙지하세요.
예) * html #wrap { width:710px; }
</pre>
<div id="header">헤더 600*70</div>
<div class="sidebar">좌측 메뉴 90
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
<div class="hspace">h</div>
<div id="content">콘텐츠 500 - 콘텐츠 최상위 영역으로 실제 보이지 않음
<div style="text-align:center;border:1px dashed #fff;">콘텐츠 상단 가로 통합영역<br><br></div>
<div style="clear:both;"></div>
<!-- content exp -->
<div class="vspace" style="text-align:center;">v</div>
<div class="mid">245 콘텐츠 좌측영역
<div class="writing">
<p>writing</p>
</div>
</div>
<div class="hspace">h</div>
<div class="right">245 콘텐츠 우측영역
<div class="writing">
<p>writing</p>
</div>
</div>
<div style="clear:both;"></div>
<!-- /content exp -->
<!-- content exp -->
<div class="vspace" style="text-align:center;">v</div>
<div class="mid">245 콘텐츠 좌측영역
<div class="writing">
<p>writing</p>
</div>
</div>
<div class="hspace">h</div>
<div class="right">245 콘텐츠 우측영역
<div class="writing">
<p>writing</p>
</div>
</div>
<div style="clear:both;"></div>
<!-- /content exp -->
<div style="text-align:center;border:1px dashed #fff;">콘텐츠 하단 가로 통합영역<br><br></div>
</div>
<div class="hspace">h</div>
<div class="sidebar">우측 메뉴 90
<ul>
<li>menu1</li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="footer">풋 600*70</div>
</div>
</body>
</html>
전체너비 700픽셀 가운데 정렬이며 충분히 실전에 사용가능한 심플한 예제입니다.
<!-- content exp --> 에서 <!-- /content exp --> 까지는 content 영역에 여러번 복제해서 사용해도 되도록 했습니다.
부족한 부분은 코멘트를 통해 보충해주시면 고맙겠습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> CSS 레이아웃 예제 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
/*기본코드*/
html {
background: none;
padding: 0;
margin: 0;
text-align: center;
font-family: tahoma, verdana, gulim, 굴림,sans-serif;
font-size: 12px;
}
body {
margin: 0;
text-align: center;/*가운데 정렬*/
}
a {
text-decoration: none;
color: black;
}
/*wrap */
#wrap {
background: #eee url(wrap.gif) no-repeat top left;
width: 700px;
padding: 0;
margin: 0 auto;
text-align: left;
}
/*wrap ie - ie에서는 width, height값에 padding, border 값등을 더한 값을 주어야 한다 */
* html #wrap {
width: 710px;
}
/* header 부분 */
/* id= header 로 정해진곳을 부릅니다 */
#header {
background: #aaa url(header.gif);
border: 1px solid #ddd;
width: 600px;
height: 70px;
padding: 0;
margin: 0;
}
/*sidebar 부분 */
.sidebar {
width: 90px;
padding: 0;
margin: 0;
background: #eee url(sidebar.gif) no-repeat top left;
float:left; /*왼쪽으로 붙입니다*/
}
.sidebar ul {
padding: 0;
margin: 0px;
}
.sidebar ul li {
padding: 0;
margin: 0;
list-style-image: none;
list-style-type: none;
}
/* menu 의 링크 꾸미기 없게*/
.sidebar ul li a {
text-decoration: none;
}
/* content 부분 */
#content {
float: left;
width: 500px;
padding: 0;
margin: 0;
text-align: left;
background: #bbb;
}
#content .mid {
float: left;
width: 245px;
padding: 0;
margin: 0;
text-align: left;
background: #ddd;
}
#content .right {
float: left;
width: 245px;
padding: 0;
margin: 0;
text-align: left;
background: #ccc;
}
.writing {
line-height: 150%;
letter-space: .2em;
margin:0;
width: 245px;
}
.hspace {
float: left;
width: 10px;
height: auto;
margin: 0;
padding: 0;
background: #fff;/*transparent*/
}
.vspace {
width: auto;
height: 10px;
margin: 0;
padding: 0;
background: #fff;/*transparent*/
clear:both;
}
/* id= footer 로 정해진곳을 부릅니다 */
#footer {
background: #ccc url(footer.gif);
border: 1px solid #ddd;
width: 600px;
height: 70px;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="wrap">
<pre>
CSS를 활용한 레이아웃 잡기 - 기본
h-가로여백, v-세로여백
전체 기본영역 700px로 해봅니다.
ie에서는 width, height값에 padding, border 값등을 더한 값을 주어야 하는점 필히 숙지하세요.
예) * html #wrap { width:710px; }
</pre>
<div id="header">헤더 600*70</div>
<div class="sidebar">좌측 메뉴 90
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
<div class="hspace">h</div>
<div id="content">콘텐츠 500 - 콘텐츠 최상위 영역으로 실제 보이지 않음
<div style="text-align:center;border:1px dashed #fff;">콘텐츠 상단 가로 통합영역<br><br></div>
<div style="clear:both;"></div>
<!-- content exp -->
<div class="vspace" style="text-align:center;">v</div>
<div class="mid">245 콘텐츠 좌측영역
<div class="writing">
<p>writing</p>
</div>
</div>
<div class="hspace">h</div>
<div class="right">245 콘텐츠 우측영역
<div class="writing">
<p>writing</p>
</div>
</div>
<div style="clear:both;"></div>
<!-- /content exp -->
<!-- content exp -->
<div class="vspace" style="text-align:center;">v</div>
<div class="mid">245 콘텐츠 좌측영역
<div class="writing">
<p>writing</p>
</div>
</div>
<div class="hspace">h</div>
<div class="right">245 콘텐츠 우측영역
<div class="writing">
<p>writing</p>
</div>
</div>
<div style="clear:both;"></div>
<!-- /content exp -->
<div style="text-align:center;border:1px dashed #fff;">콘텐츠 하단 가로 통합영역<br><br></div>
</div>
<div class="hspace">h</div>
<div class="sidebar">우측 메뉴 90
<ul>
<li>menu1</li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="footer">풋 600*70</div>
</div>
</body>
</html>
[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]
게시글 목록
| 번호 | 제목 |
|---|---|
| 24900 |
계약서
업무제휴계약서_인터넷
|
| 24899 | |
| 24898 | |
| 24897 | |
| 24896 |
견적서
수의계약 견적서_공사관리
|
| 24895 | |
| 24894 | |
| 24893 | |
| 24892 | |
| 24891 | |
| 24890 | |
| 24889 | |
| 24888 | |
| 24887 | |
| 24886 | |
| 11687 |
JavaScript
일러스트 미리보기 툴을 찾으시는 분들께..
4
|
| 24885 |
계약서
부동산 매매계약서
|
| 24884 | |
| 24883 | |
| 24882 |
계약서
물품매매계약서_계약
|
| 24881 |
계약서
물품구매 표준계약서_구매
|
| 24879 | |
| 24878 | |
| 24877 |
견적서
무역 영문견적서_회사
|
| 24875 |
기획서
마케팅 기획서_기업일반
1
|
| 24874 |
계약서
동업계약서샘플_일반계약
|
| 24873 |
계약서
대리점 계약서_일반계약
|
| 24872 | |
| 24871 | |
| 11683 | |
| 11662 |
Flash
그누보드용 플래시 최근게시물
20
|
| 11659 |
기타
인물 사진 보정하기
2
|
| 29136 | |
| 11647 |
JavaScript
왼쪽에 달면 좋을만한 소스
11
|
| 11644 | |
| 11641 |
JavaScript
최적의 해상도 설정법
2
|
| 11634 | |
| 11632 | |
| 29135 | |
| 11631 |
JavaScript
1px 라인 css와 2개이상 class 적용.
|
| 11628 | |
| 24870 | |
| 24869 |
계약서
기술제휴계약서_영업
|
| 24868 | |
| 24867 | |
| 24866 | |
| 24865 |
계약서
근로계약서_기업일반
|
| 24864 |
계약서
공증 채무승인계약서_채권
|
| 24863 | |
| 24862 |
계약서
고용계약서_총무
|
| 24861 | |
| 24860 |
계약서
계약서_부동산
|
| 11627 | |
| 24859 | |
| 24858 | |
| 24856 |
견적서
견적서_일반기업
1
|
| 24855 | |
| 24854 | |
| 24853 | |
| 24852 | |
| 29130 |
HTML
퀵마스크의 활용 예제
4
|
| 11625 |
JavaScript
익스플로러7 팝업창의 주소창 없애기
1
|
| 11622 | |
| 11617 | |
| 11604 | |
| 11596 | |
| 11591 | |
| 11586 | |
| 29128 |
HTML
외부필터 설치하기
1
|
| 11583 | |
| 11579 | |
| 11578 | |
| 11574 |
MySQL
MySQL 한글 매뉴얼
3
|
| 11566 |
Flash
swf파일에 링크 걸려면??
7
|
| 11565 | |
| 11562 | |
| 11561 |
MySQL
PHP 5.2.0 설치시 MySQL 문제
|
| 29125 |
HTML
움직이는 사진에 효과 넣을때
2
|
| 11558 |
기타
필름효과내기
2
|
| 11556 |
JavaScript
한글폰트가 안 보일때...
1
|
| 11533 |
Flash
국내지도 소스입니다.
22
|
| 11529 |
JavaScript
회전목마 - 스크롤링 소스
3
|
| 29118 |
HTML
포토샵 효과 모음2
6
|
| 11526 |
기타
포토샵 효과 모음
2
|
| 11519 |
JavaScript
[팁] 물방울 효과2
6
|
| 29115 |
HTML
[팁] 물방울 효과
2
|
| 11518 |
MySQL
official 64bit mysql
|
| 11516 | |
| 11515 | |
| 11509 |
JavaScript
CS2에서 포토샵 PSD파일과 일러스트 AI파일 미리보기 기능
5
|
| 11508 | |
| 29112 |
HTML
HTML 사전입니다.
2
|
| 11496 | |
| 29109 | |
| 29106 | |
| 11495 | |
| 11488 |
JavaScript
Ajax가 뭐죠?
6
|
| 11486 | |
| 11483 | |
| 11471 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기