"일모리의 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에서 이동 됨]
게시글 목록
| 번호 | 제목 |
|---|---|
| 12007 |
기타
그라디언트
5
|
| 12006 | |
| 12005 | |
| 12000 |
Flash
일러스트 단축키
4
|
| 11994 |
Flash
[[ 플래시 MX 단축키 요약 ]]
5
|
| 11993 | |
| 11992 | |
| 11991 |
JavaScript
adduser 명령어 기본사용법
|
| 11990 |
MySQL
리눅스 자동백업
|
| 11989 | |
| 29203 | |
| 11988 |
Linux
Xinetd 설치하기&설명
|
| 11986 |
MySQL
mysql버전확인
1
|
| 11985 |
JavaScript
su, telnet, ftp 권한제한
|
| 11984 | |
| 11983 |
JavaScript
Portsentry 1.1 설치하기(실시간해킹방지프로그램)
|
| 11982 |
Linux
리눅스에서 휴지통 (safedelete)
|
| 29202 |
HTML
apache2 가상호스트 설정방법
|
| 29201 | |
| 24968 | |
| 11981 |
JavaScript
시작과 멈춤이 가능한 스크롤 텍스트
|
| 29200 |
HTML
이미지에 마우스만 올려도 링크로 이동
|
| 29198 | |
| 11979 | |
| 11978 |
Flash
php.ini정보
|
| 11975 |
JavaScript
Lightbox2 적용 방법
2
|
| 11973 |
기타
rpm 명령어
1
|
| 11972 |
기타
Trac 설치
|
| 11971 | |
| 11970 |
기타
META 태그 사용법
|
| 11966 | |
| 11962 |
MySQL
MySQL 다운로드
3
|
| 29197 | |
| 29196 |
HTML
간단PHP(4)
|
| 11961 |
기타
간단PHP(3)
|
| 11960 |
기타
간단PHP(2)
|
| 11959 |
JavaScript
간단PHP(1)
|
| 11958 | |
| 11956 | |
| 11952 | |
| 11948 |
JavaScript
[질문] 페도라리눅스에서 한글깨짐현상
3
|
| 11944 | |
| 11936 | |
| 11935 | |
| 29195 | |
| 11934 |
JavaScript
포토샵 CS3에서 JPG 파일을 RAW 파일처럼 보정하기 - 사진 후보정
|
| 29191 | |
| 11933 |
JavaScript
[소스] 배경이미지 바꾸기 (PHP에서)에 대한 초보
|
| 29186 | |
| 11932 |
Flash
플래쉬쪽에서의 파일업로드
|
| 11931 |
Flash
플래쉬에서 PHP와 연동하면서 파일 업로드
|
| 11926 |
Flash
초보가 올리는 왼쪽 메뉴(허접)
4
|
| 11922 | |
| 29183 | |
| 11920 | |
| 11916 | |
| 11915 | |
| 11913 |
JavaScript
타일 이미지 멥핑
1
|
| 11910 | |
| 29182 |
HTML
브러쉬만들기
|
| 11904 | |
| 11901 |
기타
눈물만들기
2
|
| 11900 | |
| 29181 |
HTML
말랑말랑 젤리 텍스트
|
| 11898 | |
| 29179 |
HTML
간단하게 수채화 느낌 내기
1
|
| 11894 |
JavaScript
htmlspecialchars() 역변환(반대) 함수
3
|
| 11892 | |
| 11890 |
JavaScript
배경이미지 바꾸기 (PHP에서)
1
|
| 11889 |
JavaScript
검색창 추가
|
| 11888 | |
| 11886 |
기타
질문입니다
1
|
| 11883 | |
| 11879 | |
| 11875 | |
| 29178 |
HTML
팝업소스 관련질문-오늘하루창안열기
|
| 29167 |
HTML
자바스크립으로 플래쉬 메뉴처럼
10
|
| 11874 |
JavaScript
글씨의 색을 자동으로 변환시켜주는 함수
|
| 29166 | |
| 11872 | |
| 11870 |
JavaScript
[스크립트] 이미지 리사이징
1
|
| 11867 | |
| 11866 | |
| 11865 |
MySQL
MySQL에서 Query Cache 사용하기
|
| 29165 |
HTML
색상표
|
| 29162 |
HTML
입출력폼 생성기
2
|
| 11861 |
MySQL
무료 웹방화벽 Modsecurity..!
3
|
| 11851 |
MySQL
리눅스 포기 하고 싶습니다.. ㅠ.ㅠ
9
|
| 11850 | |
| 11847 | |
| 11846 | |
| 11845 |
JavaScript
ucc(동영상) 서비스 운영관련 자료 (키워드 ffmpeg)
|
| 11840 | |
| 11826 | |
| 11825 |
MySQL
MySQL 한글 정렬 Tip
|
| 11823 |
기타
외부문서불러오기
1
|
| 11816 | |
| 11808 |
Flash
플래시 메뉴 소스
7
|
| 11805 | |
| 11804 |
JavaScript
<script>
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기