레이아웃용 division 강좌

2011.07.05 23:01

Myip 심걸 조회 수:14151

  • 레이아웃용 division 마크업에는 표준화된 id 선택자 네이밍을 부여합니다. 표준화된 id 네이밍으로는 #wrap, #header, #container, .spot, .snb, #content, .aside, #footer 가 있습니다.
  • HTML 4.01 Transitional 기준으로 작업되어 있습니다. XHTML 1.0 으로 전환하는 것은 문제가 없지만 Quirks Mode 으로 전환하려면 약간의 디버깅이 필요할 수 있습니다.
  • float을 해제 시키기 위한 방법으로 overflow 속성 대신 빈 엘리먼트가 사용되었는데 이것은 레이아웃 폭을 벗어나는 오브젝트에 대응하기 위함 입니다.
  • 실제 서비스 적용시 레이아웃 박스의 너비는 디자인 가이드에 따라 수정하시고 배경색은 제거하여 사용하세요.
  • 실제 서비스 적용 후 IE 6.x 이하 브라우저의 double margin 버그와 width-padding 버그를 반드시 체크하세요.
  • IE의 레이아웃 관련 버그를 회피하기 위하여 가능한 모든 레이아웃 박스에는 width 값을 지정 하였습니다.



레이아웃 유형 목록



고정폭 2단컬럼




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

<title>NHN :: NULI &gt; Guidelines &gt; UIO &gt; Layout &gt; 2단 컬럼 + 고정폭 + 로컬메뉴 + 컨텐츠</title>

<script type="text/xxjavascript" src="http://html.nhndesign.com/js/default.js"></script>

<style type="text/css">

/* Layout */

*{margin:0; padding:0;}

body{_text-align:center;}

#wrap{width:600px; _text-align:left; margin:0 auto;}

#header{width:100%;}

#container{width:100%;}

.snb{width:180px; float:left;}

#content{width:400px; float:right;}

#footer{width:100%;}

.clear{display:block; float:none; clear:both; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;}

/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */

div{padding:10px 0; margin:0 0 10px 0; font:bold 14px Tahoma; color:#2D2C2D;}

#wrap {padding:10px; _width /**/:620px; border:1px solid #bdbdbd; background:#f7f7f7;}

#header {margin-top:10px;}

#header,

#container{padding:10px; border:2px solid #bfbfbf; background:#e5e5e5;}

#header,

#container{width:auto;}

.snb,

#content{margin-top:10px; background:#fff; border:1px solid #bdbdbd; text-align:center;}

#content{width:380px; height:200px;}

#footer{padding:10px; background:#e5e5e5; border:2px solid #bfbfbf; width:auto;}

</style>

</head>

<body id="index">

<div id="wrap">

#wrap

<div id="header">

#header

</div>

<div id="container">

#container

<div class="snb">

.snb

</div>

<div id="content">

#content

</div>

<div class="clear">

</div>

</div>

<div id="footer">

#footer

</div>

</div>

</body>

</html>


고정폭 2단 컬럼




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

<title>NHN :: NULI &gt; Guidelines &gt; UIO &gt; Layout &gt; 2단 컬럼 + 고정폭 + 컨텐츠 + 부가정보</title>

<script type="text/xxjavascript" src="http://html.nhndesign.com/js/default.js"></script>

<style type="text/css">

/* Layout */

*{margin:0; padding:0;}

body{_text-align:center;}

#wrap{width:600px; _text-align:left; margin:0 auto;}

#header{width:100%;}

#container{width:100%;}

#content{width:400px; float:left;}

.aside{width:180px; float:right;}

#footer{width:100%;}

.clear{display:block; float:none; clear:both; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;}

/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */

div{padding:10px 0; margin:0 0 10px 0; font:bold 14px Tahoma; color:#2D2C2D;}

#wrap {padding:10px; _width /**/:620px; border:1px solid #bdbdbd; background:#f7f7f7;}

#header {margin-top:10px;}

#header,

#container{position:relative; padding:10px; border:2px solid #bfbfbf; background:#e5e5e5;}

#header,

#container{width:auto;}

.aside,

#content{position:relative; margin-top:10px; background:#fff; border:1px solid #bdbdbd; text-align:center;}

#content{width:380px; height:200px;}

#footer{padding:10px; background:#e5e5e5; border:2px solid #bfbfbf; width:auto;}

</style>

</head>

<body id="index">

<div id="wrap">

#wrap

<div id="header">

#header

</div>

<div id="container">

#container

<div id="content">

#content

</div>

<div class="aside">

.aside

</div>

<div class="clear">

</div>

</div>

<div id="footer">

#footer

</div>

</div>

</body>

</html>


가변폭 2단 컬럼




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

<title>NHN :: NULI &gt; Guidelines &gt; UIO &gt; Layout &gt; 2단 컬럼 + 가변폭 + 로컬메뉴 + 컨텐츠</title>

<script type="text/xxjavascript" src="http://html.nhndesign.com/js/default.js"></script>

<style type="text/css">

/* Layout */

*{margin:0; padding:0;}

#wrap{width:100%;}

#header{width:100%;}

#container{width:100%;}

.snb{width:180px; float:left; margin-right:-200px;}

#content{margin-left:200px;}

#footer{width:100%;}

.clear{display:block; float:none; clear:both; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;}

/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */

div{padding:10px 0; margin:0 0 10px 0; font:bold 14px Tahoma; color:#2D2C2D;}

#wrap {margin:0; width:auto; padding:10px; border:1px solid #bdbdbd; background:#f7f7f7;}

#header {margin-top:10px;}

#header,

#container{width:auto; padding:10px; border:2px solid #bfbfbf; background:#e5e5e5;}

.snb,

#content{margin-top:10px; background:#fff; border:1px solid #bdbdbd; text-align:center;}

#content{height:200px;}

#footer{padding:10px; background:#e5e5e5; border:2px solid #bfbfbf; width:auto;}

</style>

</head>

<body id="index">

<div id="wrap">

#wrap

<div id="header">

#header

</div>

<div id="container">

#container

<div class="snb">

.snb

</div>

<div id="content">

#content

</div>

<div class="clear">

</div>

</div>

<div id="footer">

#footer

</div>

</div>

</body>

</html>


가변폭 2단 컬럼




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

<title>NHN :: NULI &gt; Guidelines &gt; UIO &gt; Layout &gt; 2단 컬럼 + 고정폭 + 컨텐츠 + 부가정보</title>

<script type="text/xxjavascript" src="http://html.nhndesign.com/js/default.js"></script>

<style type="text/css">

/* Layout */

*{margin:0; padding:0;}

#wrap{width:100%;}

#header{width:100%;}

#container{padding-right:200px; _float:left; _width /**/:100%;}

#content{width:100%; float:left; margin-right:-200px;}

.aside{width:180px; float:right; position:relative; left:200px;}

#footer{width:100%;}

.clear{display:block; float:none; clear:both; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;}

/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */

div{padding:10px 0; margin:0 0 10px 0; font:bold 14px Tahoma; color:#2D2C2D;}

#wrap{position:relative; _float:left; margin:0; width:auto; padding:10px; background:#f7f7f7;}

#wrap {border:1px solid #bdbdbd;}

#header {width:auto; margin-top:10px; padding:10px;}

#header,

#container{border:2px solid #bfbfbf; background:#e5e5e5;}

#container{position:relative; padding-left:10px;}

#content{margin-top:10px; background:#fff; position:relative; height:200px; border:1px solid #bdbdbd; text-align:center;}

.aside{left:190px; width:170px; margin-top:10px; background:#fff; border:1px solid #bdbdbd; text-align:center;}

#footer{width:auto; clear:both; padding:10px; background:#e5e5e5; border:2px solid #bfbfbf;}

</style>

</head>

<body id="index">

<div id="wrap">

#wrap

<div id="header">

#header

</div>

<div id="container">

#container

<div id="content">

#content

</div>

<div class="aside">

.aside

</div>

<div class="clear">

</div>

</div>

<div id="footer">

#footer

</div>

</div>

</body>

</html>

고정폭 3단 컬럼




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

<title>NHN :: NULI &gt; Guidelines &gt; UIO &gt; Layout &gt; 3단 컬럼 + 고정폭</title>

<script type="text/xxjavascript" src="http://html.nhndesign.com/js/default.js"></script>

<style type="text/css">

/* Layout */

*{margin:0; padding:0;}

body{_text-align:center;}

#wrap{width:600px; _text-align:left; margin:0 auto;}

#header{width:100%;}

#container{width:100%;}

.snb{width:180px; float:left; margin-right:20px;}

#content{width:200px; float:left;}

.aside{width:180px; float:right;}

#footer{width:100%;}

.clear{display:block; float:none; clear:both; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;}

/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */

div{padding:10px 0; margin:0 0 10px 0; font:bold 14px Tahoma; color:#2D2C2D;}

#wrap {padding:10px; _width /**/:620px; border:1px solid #bdbdbd; background:#f7f7f7;}

#header {width:auto; margin-top:10px; padding:10px;}

#header,

#container{position:relative; width:auto; padding:10px; border:2px solid #bfbfbf; background:#e5e5e5;}

.snb{position:relative; margin-top:10px; margin-right:5px; background:#fff; border:1px solid #bdbdbd; text-align:center;}

#content{position:relative; height:200px; margin-top:10px; background:#fff; border:1px solid #bdbdbd; text-align:center;}

.aside{position:relative; margin-top:10px; background:#fff; border:1px solid #bdbdbd; text-align:center;}

#footer{width:auto; padding:10px; border:2px solid #bfbfbf; background:#e5e5e5;}

</style>

</head>

<body id="index">

<div id="wrap">

#wrap

<div id="header">

#header

</div>

<div id="container">

#container

<div class="snb">

.snb

</div>

<div id="content">

#content

</div>

<div class="aside">

.aside

</div>

<div class="clear">

</div>

</div>

<div id="footer">

#footer

</div>

</div>

</body>

</html>


가변폭 3단 컬럼





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

<title>NHN :: NULI &gt; Guidelines &gt; UIO &gt; Layout &gt; 3단 컬럼 + 가변폭</title>

<script type="text/xxjavascript" src="http://html.nhndesign.com/js/default.js"></script>

<style type="text/css">

/* Layout */

*{margin:0; padding:0;}

#wrap{width:100%;}

#header{width:100%;}

#container{padding-left:200px; padding-right:200px; _width /**/:100%;}

.snb{width:180px; float:left; margin-right:-180px; position:relative; left:-200px;}

#content{width:100%; float:left;}

.aside{width:180px; float:left; margin-left:-180px; position:relative; left:200px;}

#footer{width:100%;}

.clear{display:block; float:none; clear:both; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;}

/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */

div{padding:10px 0; margin:0 0 10px 0; font:bold 14px Tahoma; color:#2D2C2D;}

#wrap {position:relative; width:auto; padding:10px; border:1px solid #bdbdbd; background:#f7f7f7;}

#header{width:auto; margin-top:10px; padding:10px; border:2px solid #bfbfbf; background:#e5e5e5;}

#container{position:relative; border:2px solid #bfbfbf; background:#e5e5e5;}

.snb{width:178px; margin-top:10px; background:#fff; left:-190px; border:1px solid #bdbdbd; text-align:center;}

#content{margin-top:10px; background:#fff; position:relative; height:200px; border:1px solid #bdbdbd; text-align:center;}

.aside{width:178px; margin-top:10px; background:#fff; left:190px; border:1px solid #bdbdbd; text-align:center;}

#footer{width:auto; clear:both; padding:10px; background:#e5e5e5; border:2px solid #bfbfbf;}

</style>

</head>

<body id="index">

<div id="wrap">

#wrap

<div id="header">

#header

</div>

<div id="container">

#container

<div class="snb">

.snb

</div>

<div id="content">

#content

</div>

<div class="aside">

.aside

</div>

<div class="clear">

</div>

</div>

<div id="footer">

#footer

</div>

</div>

</body>

</html>



이상 도움이 되시길 바랍니다. ^^



번호 제목 글쓴이 날짜 조회 수
20 Linux에서 Tape 장비로 백업하기 Myip 심걸 2011.07.20 13648
19 UTF-8 상태에서 whois 한글깨짐 스크립으로 해결 Myip 심걸 2011.07.20 19852
18 리눅스에서 하드 추가하기 [14] Myip 심걸 2011.07.20 13993
17 Php로 10만건 이상의 대용량 메일 처리하기 [1] Myip 심걸 2011.07.20 15784
16 Linux / yum 을 이용하여 그룹단위로 패키지 설치 [2] Myip 심걸 2011.07.20 13691
15 [하이퍼바이져호스팅] VMware ESXi4.1 클라이언트 설치 동영상강좌 [54] file 이건 2011.07.20 20537
14 IIS를 이용한 FTP서버 구축하기 서버 접속 [35] 여광 2011.07.20 14143
13 *win7 iis 설치하기 [20] file 이건 2011.07.17 15583
12 xp에서 IIS 웹서버설치 [7] 여광 2011.07.13 13422
11 LNB 표준모드강좌 [2] Myip 심걸 2011.07.10 14061
10 [Xe] 게시판 생성하기 file MYIP박광춘 2011.07.10 16207
9 [하이퍼바이저호스팅] XenServer 5.6 클라이언트 설치 매뉴얼 [199] file 최재원 2011.07.08 24911
8 [xe] 게시판 모듈 설치 방법 - 다른모듈 설치시 응용가능 [24] file MYIP박광춘 2011.07.08 17950
7 [하이퍼바이져호스팅] VMware ESXi4.1 - WindowsXP 설치 매뉴얼 [52] 최재원 2011.07.06 16583
6 [하이퍼바이져호스팅] VMware ESXi4.1 클라이언트 설치 매뉴얼 [261] 최재원 2011.07.06 30864
» 레이아웃용 division 강좌 Myip 심걸 2011.07.05 14151
4 [하이퍼바이져호스팅] VMware ESXi4.1 - CentOS 5 설치 매뉴얼 [633] file 최재원 2011.07.04 35067
3 Xe코어 다운로드 및 설치방법 [이미지] [6] MYIP박광춘 2011.07.02 13199
2 [하이퍼바이져호스팅] VMware ESXi4.1 - Windows 2003 Server 설치 매뉴얼 [144] file 최재원 2011.07.01 26549
1 PS팁 야간풍경만들기 [1] file 이건 2011.07.01 12812