AWS AWS 디딤 클라우드

알림톡 통합메시징(알림톡)

이니톡 결제 이니톡(알림톡) 결제!

일본결제지원 일본결제지원!

이전
목록
다음
a

날나리 강좌. ㅋ 레이아웃 짜기, 완성 예제

aequum
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2012-01-12 (목) 19:06:37 · 4212
김군 왈, " 허허허.. 드디어 다 되었도다... "

A군 왈, " 어? 뭐가 ? "

김군 왈, " 레이아웃 짜는 것이 모두 끝났다고... "

A군 왈, " 마무리는 왜 니가 짓노? 하는 것은 다 내가 한 것 같은데... "

김군 왈, " 어허.. 마지막이니 멋진 김군은 이제 빠빠 잖아... "

A군 왈, " 가끔은.. 왜 A양, B양, O양 설정하지 않고 김군으로 했는지... 했는데..  정도 들었고 그간 고생했다. "

김군 왈, " 근데... 이니셜이 무슨 모양 모양 비디오 같은데서 들어 본 것 같은데? "

A군 왈, " 허허.. 역시 눈치 빠른 김군... 내가 못 당해..  "

김군 왈, " 이제 마지막이니.. 그동안 한 것을... 총 복습으로 마무리 완성품을 만들어 볼께... "

A군 왈, " 그래.. 그래.. 화이팅 "

<!doctype html>
<head>
<title> aequum's layout </title>
<style>
html, body {height: 100%}
body {font:14px/1.5 georgia}
html, body, div, p, form, img { margin:0;padding:0; border:0;}

#wrapper {
    position: relative;
    z-index: 5;
    background:url('bg.png') repeat-y ;
}

div.setWidth {
    width: 960px;
}

body.setAlign #wrapper,
body.setAlign #ADBlockItems,
body.setAlign.left #wrapper,
body.setAlign.left  #ADBlockItems  {margin: 0 auto 0 0;}

body.setAlign.center #wrapper,
body.setAlign.center #ADBlockItems {margin:0 auto;}

body.setAlign.right #wrapper,
body.setAlign.right #ADBlockItems  {margin: 0 0 0 auto;}

#header    {height:100px; background:#fff; border:1px solid #EFEFEF; }
#container {position:relative; overflow:hidden; zoom:1;}
#footer    {height:150px; background:#fff; border:1px solid #EFEFEF;}

#container #leftSidebar {
    float:left; width:240px; padding:10px;
    display: inline;
}
#container #content {float:left; width: 480px; padding:10px;}
#container #rightSidebar {float:left; width: 180px; padding:10px;}

#ADBlock   {
    position:absolute;width:100%;height:100px;
    left:0;top:100px;
    overflow:hidden
}
#ADBlockItems {
    position:relative;
    margin:0 auto;
}
#ADBlock div.AD {
    position:absolute;width:100px;
    background:#E7E7E7;
    height:100px;
}
#ADBlock div.AD.left  {left:-100px;}
#ADBlock div.AD.right {left:960px;} 

#wrapper.fixedFooter {
    min-height:100%; height:auto !important; height:100%;
}
#wrapper.fixedFooter #container {padding-bottom:152px;}
#wrapper.fixedFooter #footer    {
    position:absolute;
    bottom:0;width:100%
}
</style>
</head>
<body class="setAlign center">

<div id="wrapper" class="setWidth fixedFooter">

    <!-- #header -->
    <div id="header">
        #Header
    </div>

    <!-- #main -->
    <div id="container">
        <div id="leftSidebar">
            #leftStdebar 
        </div>
        <div id="content">
            #content
        </div>
        <div id="rightSidebar">
            #rightSidebar
        </div>
    </div>

    <!-- #footer -->
    <div id="footer">
       #footer
    </div>

</div>

<!-- #ADBlock -->
<div id="ADBlock">
    <div id="ADBlockItems" class="setWidth">
        <div class="AD left"> .AD.left </div>
        <div class="AD right"> .AD .right </div>
    </div>
</div>

</body>
</html>


A군 왈, " 그동안 가르친 보람이 있는데...  어떻게 작성했는지 설명해봐 "

김군 왈, " 나름 재활용 가능하게... 코드를 나름 다소 구조적(?)인 작성을 헀어.

정렬기능이 있어.<body>클래스에 "setAlign"과 함께 center 등이 사용되면 그에따라 정렬되게 하였고.... 
또 문서 폭은 한 번에  div.setWidth를 수정해주면 그에 맞게 차지하게 했어. wrapping 했기에 그안에 header, container, footer 같은 요소의 폭은 따로 정해줄 필요가 없고... height는 각각 맞게 고치면 돼. width 변경으로 container 내부 float된 것은 물런 다시 계산해서 설정해야할 것이고..  

게다가... 나름 광고 영역은 따로 분리해서 넣거나 빼는 등 쉽게 따로 관리가능하게 했고...
#wrapper <div>요소에 "fixedFooter" 클래스를 사용여부에 따라 바닥에 footer가 붙게 하거나 마는 등도 결정할 수 있게 하였어. "

A군 왈, " 오... 나름 보람을 느끼네.. ㅎㅎㅎ 자 그럼 그동안에 버그 잡기와 함꼐 다루었던 주제가 어떻게 적용되었는지 살펴보자고...

  • #wrapper : 배경 이미지 사용 - faux column의 적용
  • #wrapper : position:relative - footer의 absolute로 좌표계 기준으로 사용
  • #wrapper : z-index:5 - 광고 블록보다 앞으로 위치 (구형 브라우저의 음의 z-index 처리 차이 [CSS 2.1수정된 부분])
  • #container : overflow:hidden 과 zoom:1 - clear:both 대신 사용, hasLayout 관련 부분
  • #wrapper.fixedFooter : ie6도 가능한 min-height 트릭
  • #container #leftSidebar : display:inline - IE6에서 더블 마진 버그 해결

예제에서 빠졌지만 
  • IE6에서 음의 마진시 짤림 현상과 해결
  • IE6에서 float된 요소들이 마진이 있는 경우 문제 (hasLayout 관련)
  • IE9를 포함한 IE의 배경 투명에 대한 독특한 처리 및 해결 방법
  • 동일 높이 column의 처리 : faux column 사용, javascript 방법, absolute의 사용
  • 등등....? 
이제 레이아웃은 걱정없이 앞으로 잘 짤 수 있을 것이얌... "

6683638669_635e8db75a_b.jpg

사용한 배경 파일은 위에...

---- 

ㅃㅃ

#퍼블리셔팁 #퍼블리셔 #팁자료실 #html

첨부파일

layoutExample.zip (1.6 KB) 78회 2012-01-12 19:30
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-01-22 조회 3,497
12-01-21 조회 2,795
12-01-19 조회 4,812
12-01-18 조회 2,787
12-01-18 조회 2,788
12-01-18 조회 2,994
12-01-17 조회 2,764
12-01-17 조회 2,998
12-01-14 조회 1.1만
12-01-14 조회 3,553
12-01-14 조회 3,867
12-01-11 조회 3,214
12-01-11 조회 3,072
12-01-11 조회 3,040
12-01-11 조회 3,068
12-01-11 조회 3,407
12-01-11 조회 2,629
12-01-10 조회 3,019
12-01-10 조회 2,804
12-01-10 조회 2,806
12-01-09 조회 2,768
12-01-08 조회 2,814
12-01-07 조회 2,780
12-01-06 조회 2,639
12-01-06 조회 2,761
12-01-05 조회 2,762
12-01-02 조회 2,911
11-12-29 조회 2,789
11-12-28 조회 2,794
11-12-28 조회 2,769
11-12-27 조회 2,991
11-12-23 조회 2,712
11-12-23 조회 2,747
11-12-21 조회 3,864
11-12-21 조회 2,874
11-12-19 조회 2,801
11-12-14 조회 4,145
11-12-08 조회 3,209
11-12-08 조회 4,034
11-12-07 조회 4,322
11-12-06 조회 4,224
11-12-06 조회 3,553
11-12-05 조회 3,191
11-12-05 조회 4,815
11-12-04 조회 3,136
11-12-03 조회 3,516
11-12-02 조회 3,363
11-12-02 조회 3,448
11-12-02 조회 2,788
11-12-01 조회 2,749
11-12-01 조회 3,654
11-12-01 조회 2,739
11-11-29 조회 5,626
11-11-23 조회 3,562
11-11-23 조회 3,886
11-11-22 조회 3,880
11-11-22 조회 2,943
11-11-21 조회 3,487
11-11-21 조회 2,769
11-11-18 조회 3,866
11-11-18 조회 3,042
11-11-17 조회 2,934
11-11-17 조회 2,934
11-11-17 조회 4,502
11-11-11 조회 2,798
11-11-11 조회 2,799
11-11-11 조회 3,934
11-11-11 조회 4,637
11-11-08 조회 2,906
11-11-06 조회 3,351
11-11-06 조회 3,643
11-10-21 조회 2,452
11-10-21 조회 2,353
11-10-19 조회 2,405
11-10-19 조회 3,904
11-10-08 조회 2,460
11-10-06 조회 4,138
11-10-01 조회 2,458
11-09-30 조회 2,540
11-09-29 조회 2,541
11-09-26 조회 2,399
11-09-23 조회 2,396
11-09-23 조회 2,171
11-09-22 조회 2,758
11-09-09 조회 3,039
11-08-30 조회 3,927
11-08-23 조회 2,184
11-08-12 조회 2,357
11-08-04 조회 3,946
11-07-01 조회 2,916
11-06-09 조회 2,557
11-05-17 조회 2,633
11-05-07 조회 2,938
11-04-21 조회 2,605
11-04-12 조회 2,457
11-04-11 조회 3,567
11-02-11 조회 2,697
11-02-08 조회 2,128
11-01-11 조회 2,522
10-11-26 조회 3,885
글쓰기