"일모리의 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에서 이동 됨]
게시글 목록
| 번호 | 제목 |
|---|---|
| 11111 | |
| 11108 | |
| 11107 | |
| 11105 |
JavaScript
이미지 저작권 관련 설명 1탄
1
|
| 11101 |
Flash
초간단 플래시테두리 없애는 방법입니다.
3
|
| 11099 |
JavaScript
직접만든 자바스크립트 Trim 함수입니다.
1
|
| 11095 | |
| 11093 | |
| 24843 | |
| 11065 | |
| 11063 | |
| 11059 |
JavaScript
PHP Ajax 프레임워크
3
|
| 29001 | |
| 11054 |
JavaScript
일반PC로 서버 만들경우....
4
|
| 28999 | |
| 11050 | |
| 28998 |
HTML
mshtml.dll error 발생시
|
| 28956 | |
| 11044 | |
| 11023 |
JavaScript
[입문자용 강좌] 상수?
20
|
| 11004 | |
| 28946 |
HTML
[입문자용강좌] 변수란?
9
|
| 10993 | |
| 10990 | |
| 28903 | |
| 10984 | |
| 24842 |
계약서
고용계약서
|
| 28900 |
HTML
marquee 태그 활용법
2
|
| 10982 | |
| 10978 |
JavaScript
실제 이미지 크기 알아내기
3
|
| 28899 | |
| 10974 |
Flash
플래쉬 투명바탕 어떻게 하는거죠?
3
|
| 10970 | |
| 24831 | |
| 24830 |
계약서
표준임대차 계약서
|
| 10967 |
JavaScript
ie,firefox alpha값
2
|
| 10965 | |
| 10963 | |
| 10956 |
JavaScript
왕초보 소스 중 질문있어요...^^;
6
|
| 10954 |
Flash
플래시 그림판 소스 입니다.
1
|
| 10950 |
Flash
[펌]겔러리에 적용하면 괜찮은 소스
3
|
| 10946 | |
| 24818 |
견적서
홈페이지 견적서입니다
11
|
| 10943 |
Flash
플래시 활성화 영역 안나오게 하기...
2
|
| 28885 |
JavaScript
외부의 이미지를 자신의 서버경로에 썸네일 만드는 방법
13
|
| 24813 | |
| 10940 | |
| 10927 |
JavaScript
포토샵질문드려요.
12
|
| 10925 |
Flash
FLEX 참고자료 URL
1
|
| 10920 |
JavaScript
이동도구(v)팁
4
|
| 10916 | |
| 10914 | |
| 10913 |
기타
FLEX 란?
|
| 10908 |
Flash
플래시 플레이어 오류발생할 때 패치
4
|
| 10905 | |
| 10904 | |
| 10899 | |
| 24803 | |
| 28882 |
HTML
링크클릭시 나타나는 점선 없애주기
2
|
| 10898 |
Flash
간단한 퀵메뉴
|
| 28878 |
기타
Ajax 마스터하기
3
|
| 28877 | |
| 24802 | |
| 24801 | |
| 24800 | |
| 24799 | |
| 10893 | |
| 10892 | |
| 24797 | |
| 24794 | |
| 10891 |
Flash
정상적인 사운드가 빠르게 재생될때
|
| 28871 |
HTML
id와 class의 차이점?
5
|
| 28870 | |
| 10881 |
MySQL
평가 표시 ★☆로 할 때
9
|
| 10872 | |
| 10870 | |
| 28868 | |
| 10868 |
JavaScript
3D 회전식 메뉴입니다. 드레그해서 붙혀서 사용해보세요
1
|
| 10866 | |
| 28862 |
HTML
Ajax로 만든 쇼핑몰입니다.
5
|
| 10864 |
기타
랜덤백그라운드
1
|
| 28861 |
HTML
마소 컬러 선택 대화상자
|
| 10863 |
기타
회원에게만 보여준다
|
| 28860 |
HTML
KOSDAQ소스
|
| 10862 |
JavaScript
ZDNet Korea레이어
|
| 28859 | |
| 28858 | |
| 10861 |
JavaScript
present[다음에서 발췌]
|
| 10859 | |
| 28856 |
HTML
클릭한 메뉴 고정하기
1
|
| 10857 |
JavaScript
클릭시 화면이 위로 올라가는 현상 막아주기
1
|
| 28854 | |
| 10856 |
기타
쿠키1년간체크
|
| 28853 |
HTML
자막파일(.smi) 싱크밀고 당기기
|
| 28852 |
JavaScript
일정시간동안 이미지 자동으로 변경하기
|
| 28851 |
HTML
이미지 파일 에러 처리
|
| 10855 |
JavaScript
이미지 미리 로딩시켜놓기
|
| 28850 |
HTML
웹로봇 배제 표준
|
| 10854 | |
| 28849 |
HTML
아이프레임하나만 새로고침하기
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기