Layout 만들기 #3

2010. 5. 9. 22:10

미리 CSS에 설정되어 있는 레이아웃 배치에 의해 XHTML에서 클래스의 선택자 변경 만으로 레이아웃 배치를 바꿔보겠습니다. 앞서 column-left? column-right?에서 설명드렸지만 다음 티스토리, 텍스트큐브의 Layout Project 스킨에서 어떤 모양으로 작동되는지 간단하게 동영상으로 보여드리겠습니다. 이것의 활용 방법은 많이 쓰이지 않지만 미리 설정된 레이아웃이 있다면, 컨텐츠에 따라 레이아웃을 쉽게 변경 가능하다는 점에서 도움이 되리라 생각합니다.

<body class=" ... "> 와 같이 body 테그의 클래스를 통해 전체적인 레이아웃 변화를 보여드리지만 body 태그가 아닌 각 header, content, footer 열에서 사용할 수도 있습니다. 다음과 같습니다.

<div id="header" class="column-left">

<div id="content" class="column-right">

<div id="footer" class="column-left">

그리고 column-left와 column-right로 행의 레이아웃 변화 뿐만 아니라 layout-left, layout-center, layout-right의 쓰임도 확인해보세요. 일반적으로는 중앙에 위치하는 레이아웃이 많이 쓰입니다. 하지만 왼쪽으로 위치시키거나 오른쪽으로 위치시키는 레이아웃도 종종 볼 수 있지요.

CSS를 살펴보면 간단합니다.

.column-left #header-alpha, .column-left #header-beta, .column-left #header-gamma {
    display: inline;
    float: left;
}
.column-right #header-alpha, .column-right #header-beta, .column-right #header-gamma {
    display: inline;
    float: right;
}

body태그에 class="column-left" 혹은 class="column-right"라고 사용되었으니 CSS에서는 .column-left #header-alph와 같이 차례대로 선택자를 이어서 쓰면 됩니다. .column-left에는 속성이 float가 쓰이고 값은 left입니다. .column-right는 값이 right 입니다.

'Customize' 카테고리의 다른 글

가로 사이즈 수정하기 (0)	2010.05.09
구글 텍스트큐브의 차이 (0)	2010.05.09
Layout 만들기 #2 (0)	2010.05.09
Layout 만들기 #1 (0)	2010.05.09
몇 가지 주의 사항 (0)	2010.05.09

T : C

Layout 만들기 #2

2010. 5. 9. 22:09

header, content, foot 세 가지 열을 만들어보았고, 이번에는 행을 만들어 보겠습니다. header 부분에 3번째 행으로 gamma를 넣어보겠습니다. 디폴트 상태에서는

#gamma {
display:none;
}

display:none으로 설정되어 있습니다. skin.html에서 <div id="gamma"> 감마 </div>라고 표현되더라도 화면에는 아무것도 출력되지 않는 상태인 것이지요. #gamma 행을 추가하기 위해서는 각 행의 width(가로) 사이즈를 변경해주어야 합니다. 디폴트 상태에서는

#header-alpha {
    width:580px;
}
#header-alpha-inner {
    width:560px;
}
#header-beta {
    width:240px;
}
#header-beta-inner {
    width:220px;
}

#header-alpha 행의 크기를 200px 줄이고 #header-gamma의 크기를 200px로 설정해보겠습니다. gamma 행 하나를 추가하는데 alpha의 가로 사이즈 200px를 줄이는 이유는 #container-inner의 가로 사이즈를 820px로 설정해두었기 때문입니다. 전체 가로 사이즈에 맞춰서 각 행의 가로 사이즈를 맞춰야합니다. 다음과 같습니다.

#header-alpha {
    width:380px;
}
#header-alpha-inner {
    width:360px;
}
#header-beta {
    width:240px;
}
#header-beta-inner {
    width:220px;
}
#header-gamma {
    width:200px;
}
#header-gamma-inner {
    width:180px;
}

다음의 동영상을 참고하시고, 추가로 gamma 다음으로 delta, 즉 4 행을 만드는 것까지 해보겠습니다.

'Customize' 카테고리의 다른 글

구글 텍스트큐브의 차이 (0)	2010.05.09
Layout 만들기 #3 (0)	2010.05.09
Layout 만들기 #1 (0)	2010.05.09
몇 가지 주의 사항 (0)	2010.05.09
column-left? column-right? (0)	2010.05.09

T : C

Layout 만들기 #1

2010. 5. 9. 22:07

누구나 레이아웃에 도전해볼 수 있도록 티스토리를 이용하겠습니다. 텍스트큐브 core와 구글 텍스트큐브도 동일합니다. 글로 설명하는 것보다는 보여주는 것이 이해가 빠르기 때문에 가능하다면 동영상으로 알려드리겠습니다. 글로 설명하는 것이 무색할 정도로 동영상을 보면서 따라하시면 금세 익힐 수 있으리라 믿습니다. 개인차는 있겠지만요. (~_~)

티스토리 든 텍스트큐브든 블로그를 가지고 계시거나 만드셨나요? Layout Project 스킨을 설치하신 후 하나씩 따라해보세요. 첫번째로 전체를 살펴본 후 세부적인 내용을 설명하기 위해 먼저 각 영역을 하나씩 추가해보겠습니다. 각 영역이란 다음과 같습니다.

Container
Header
Content
Alpha
Beta
Footer

티 스토리에서 Layout Project 스킨을 확인해보실 수 있는 블로그는 http://minordev.tistory.com/ 입니다. 예전에 개인 홈페이지로 제로보드가 널리 사용되었죠. 심플한 게시판 스킨 하나만 있어도 홈페이지 운영이 가능했었습니다. 요즘 블로그는 너무 복잡해 보인다고 예전에 많이 쓰이던 제로보드를 쓰는 것처럼 심플한 디자인의 블로그를 원하는 분들도 꽤 있는 것 같습니다. 지인의 부탁으로 시작되었지만, 컨셉은 제로보드와 같은 심플 디자인입니다.

container 태그가 전체를 두르고, 크게 header와 content 그리고 footer. 3 열로 되어 있습니다. alpha와 beta는 content 안에 포함되는 레이아웃입니다. header 부분만 넣어보고 그 다음 footer 그리고 content를 넣어보는 동영상입니다. github에 공개되어 있는 XHTML과 CSS를 복사 후 붙여넣기를 해보겠습니다.

'Customize' 카테고리의 다른 글

Layout 만들기 #3 (0)	2010.05.09
Layout 만들기 #2 (0)	2010.05.09
몇 가지 주의 사항 (0)	2010.05.09
column-left? column-right? (0)	2010.05.09
열과 행으로 마무리 (0)	2010.05.09

T : C

몇 가지 주의 사항

2010. 5. 9. 22:06

레이아웃 뿐만 아니라 웹페이지의 컨텐츠를 만드는 동안에는 가능하다면 크로스브라우징에 신경을 써야겠습니다. 웹표준을 다 지키지는 못하더라도 적어도 다양한 브라우저에서 동일한 결과가 나타나야합니다. 웹표준이나 크로스브라우징 같은 것을 잘 모를 경우 네이버의 웹표준화 가이드를 참고하세요.

더 울어 웹표준과 크로스브라우징에 가장 문제가 되는 것은 MS의 익스플로러 6입니다. 윈도우즈XP가 불법유통으로 개인에게 유통되다보니 여전히 국내에서는 많이 사용되고 있는 브라우저이기 때문이지요. 익스플로러 6이 없으면 테스트를 못하기 때문에 IETester라는 프로그램을 사용하면 됩니다.

익스플로러 외에 파이어폭스, 사파리, 오페라, 크롬과 같은 브라우저도 많이 사용됩니다. 모두 무료이기 때문에 설치해서 오류가 없는지 확인해봐야합니다.

다운로드

파이어폭스
사파리
오페라
크롬

디 폴트 CSS를 보시면 맨 아래에 :after라는 가상 클래스라는 것이 있습니다. 이를테면 부모요소인 #header가 자식요소인 #header-inner의 높이를 반영하지 않습니다. 때문에 가상클래스를 이용하는 것입니다. 자세한 CSS 설명은 웹표준에 관한 서적이나 컬 럼 구조 레이아웃 기법의 설명을 읽어보세요.

/* Utilities 레이아웃 가상클래스 ---- */

#header:after,
#header-inner:after,
#footer:after,
#footer-inner:after {
    content: " ";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0.1px;
    font-size: 0.1em;
    line-height: 0;
}

자신의 선택자 명칭에 맞게 가상 클래스 부분을 적용하시면 됩니다. 만약 #article이라는 선택자를 만들었다면 #article:after를 위의 가상클래스에 포함시키면 됩니다. 저의 디폴트 CSS를 이용해서 레이아웃을 짜다가 레이아웃이 뭔가 이상한 점이 발견된다면 혹시라도 잊지 않았는지 주의하시기 바랍니다. 레이아웃에 관여된다고 싶은 부분이 있다면 전부 가상클래스에 넣어버리세요. 가상클래스 같은 것에 깊이 고민하면 머리아프니까요. 아무튼 저의 디폴트 CSS를 이용하시면 그밖에 크로스브라우징을 위해 CSS hack 같은 것은 적용하지 않아도 됩니다. (혹시 모르니 버그나 잘못된 점이 있다면 지적 부탁합니다)

'Customize' 카테고리의 다른 글

Layout 만들기 #2 (0)	2010.05.09
Layout 만들기 #1 (0)	2010.05.09
column-left? column-right? (0)	2010.05.09
열과 행으로 마무리 (0)	2010.05.09
Default XHTML+CSS 두번째 (0)	2010.05.09

T : C

column-left? column-right?

2010. 5. 9. 22:04

CSS에서가 아닌 XHTML에서 class="left" 혹은 class="right"처럼 왼쪽, 오른쪽을 변경해주는 것만으로 레이아웃 배치를 간단하게 수정하는 방법이 있을까요? 특이한 부분을 이미 발견하셨을 겁니다.

.column-left #elsewhere-alpha, .column-left #elsewhere-beta {
    display: inline;
    float: left;
}
.column-right #elsewhere-alpha, .column-right #elsewhere-beta {
    display: inline;
    float: right;
}

.column-left와 .column-right에 각각 float: left;와 float: right의 속성이 사용되고 있습니다. 미리 레이아웃의 배치를 왼쪽순으로 할 것이냐 오른쪽 순으로 할 것이냐를 설정해 두었다면 XHTML에서 쉽게 .column 클래스를 선택하는 것으로 레이아웃 배치를 변경할 수 있습니다. XHTML에서 다음과 같이 쓸 수 있습니다.

<body class="column-left">

alpha 와 beta 순서는 XHTML에서 먼저 쓰인 영역 순으로 배치가 됩니다. 만약 beta를 alpha보다 먼저 쓴다면, class="column-left"의 경우 beta가 왼쪽에 자리잡게 되겠지요. 저의 디폴트 XHTML+CSS에서는 body 테그에 쓰이고 있으나 elsewhere 열에서만 쓰려면 <div id="elsewhere" class="column-left">와 같이 각 열에 맞출 수도 있습니다. 때문에 이것은 간단한 tip의 역할이고, 개인 사이트에서 레이아웃 배치를 자주 변경하는 경우는 없으니 "column-left", "column-right"와 같은 활동은 거의 쓰이지 않을 것입니다. 그래서 보통은 다음과 같이 left, right 클래스 없이 고정시켜두고 혹시라도 배치를 달리해야한다면 CSS에서 변경해주는 것만으로도 완벽합니다.

#elsewhere-alpha, #elsewhere-beta {      -> .column-left 클래스 없이 레이아웃 고정
  display: inline;
  float: left;
}

하지만 레이아웃을 자유자재로 누구나 쉽게 만들자라는 목표가 있기에 컨텐츠가 다이나믹하다면 이 tip의 활용도가 무척 높을 것입니다. 다음의 영상으로 레이아웃 변경을 자유자재로 하는 모습을 HD화질이니 전체보기로 확인해 보세요.

(스피커 볼륨을 줄여놨는데, 연결이 잘못되어 있었는지 지지직 소리가 녹음됐네요. youtube 볼륨을 끄고 보세요.)

'Customize' 카테고리의 다른 글

Layout 만들기 #1 (0)	2010.05.09
몇 가지 주의 사항 (0)	2010.05.09
열과 행으로 마무리 (0)	2010.05.09
Default XHTML+CSS 두번째 (0)	2010.05.09
Default XHTML+CSS (0)	2010.05.09

T : C

열과 행으로 마무리

2010. 5. 9. 22:03

열(세로, row)과 행(가로, column)으로 레이아웃을 마무리 지을 수 있습니다. 앞서 열을 맞춰봤으니 행을 설정해보겠습니다. 행의 선택자는 알파, 베타, 감마로 부르도록 하겠습니다. inner 역시 포함되어 있지요.

#alpha { ... }
#alpha-inner { ... }

#beta { ...}
#beta-inner { ... }

제 홈페이지의 첫번째 컨텐츠는 ElseWhere입니다. 그리고 오른쪽에 Profile이 있습니다. 즉 2개의 행이 사용되고 있습니다. 그러니까 #alpha와 #beta로 되어 있는 것이지요. 전체 XHTML 소스를 간추려 살펴보겠습니다.

<div id="elsewhere">
  <div id="elsewhere-inner">

         
<div id="elsewhere-alpha">
<div id="elsewhere-alpha-inner">

  <h1>ElseWhere</h1>
              <mt:ActionStreams> ... ... </mt:ActionStreams>

</div>
</div>
         

         
<div id="elsewhere-beta">
<div id="elsewhere-beta-inner">

            <mt:OtherProfiles> ... ... </mt:OtherProfiles>

</div>
</div>
         

  </div>
</div>

"elsewhere-alpha" 영역에 저의 최근 웹로그(기록)이 표시되고 "elsewhere-beta" 영역에 제가 이용하는 사이트의 프로필 링크가 표시된다는 걸 확인하셨습니다. 만약 행을 하나 더 추가하고자 한다면 선택자 명칭만 다를 뿐인 "elsewhere-gamma"를 beta 다음에 이어 넣으면 됩니다. 행을 4개로 할 경우 "elswhere-delta"를 이어붙이면 되고, 행을 5개로 한다면... force인가? 뭐로 하든 자신에게 편한 명칭을 쓰면 됩니다.

<div id="elsewhere-gamma">
      <div id="elsewhere-gamma-inner">
   ... ...
      </div>
</div>

CSS를 살펴보겠습니다. Default XHTML+CSS에서 전체 CSS를 이미 보셨겠지만 간추려서 살펴보겠습니다.

/* ---- Elsewhere  ---- */

#elsewhere {
  clear:both;
  width: 100%;                         -> 화면 전체를 표시하기 위한 가로 크기 100% 설정
  padding: 10px 0;
  background-color:#fff;
  border-bottom:1px solid #ccc;
}
#elsewhere-inner {
  width:980px;                          -> 중앙 정렬을 위해 980px 크기와 margin:0 auto 설정
  margin: 0 auto;
}
#elsewhere-alpha {
  width:720px;                          -> 알파 영역의 전체 크기 720px
}
#elsewhere-alpha-inner {
  width:700px;                          -> 알바-inner 크기 700px
}
#elsewhere-beta {
  width:240px;                          -> 베타 영역의 전체 크기 240px
}
#elsewhere-beta-inner {
  width:220px;                          -> 베타-inner 크기 220px
}
#elsewhere-alpha-inner, #elsewhere-beta-inner {
  overflow: hidden;
  margin-right: 10px;                 -> 알파, 베타 inner의 크기가 영역 전체 크기보다 작은 이유
  margin-left: 10px;                       바로 margin 좌우로 10px 크기 만큼의 간격을 둠
}
#elsewhere-alpha, #elsewhere-beta {
  position: relative;
}
#elsewhere-alpha-inner, #elsewhere-beta-inner {
  position: static;
}
.column-left #elsewhere-alpha, .column-left #elsewhere-beta {
  display: inline;
  float: left;
}
.column-right #elsewhere-alpha, .column-right #elsewhere-beta {
  display: inline;
  float: right;
}

컨텐츠가 무엇인가에 따라 간격 margin 혹은 padding이 다를 테니 여백을 살짝 주는 것도 좋습니다. 전체 크기를 조금 더 넓게 설정해주는 것이 CSS를 완벽하게 다를 줄 모르는 분들에게는 도움이 되리라 생각합니다.

'Customize' 카테고리의 다른 글

Layout 만들기 #1 (0)	2010.05.09
몇 가지 주의 사항 (0)	2010.05.09
column-left? column-right? (0)	2010.05.09
Default XHTML+CSS 두번째 (0)	2010.05.09
Default XHTML+CSS (0)	2010.05.09

T : C

Default XHTML+CSS 두번째

2010. 5. 9. 22:01

XHTML을 살펴보겠습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
              ... ...
</head>
<body class="column-left">
  <div id="container">
  <div id="container-inner">

                  

                  <div id="nav">
          <div id="nav-inner">

                    ... ....(생략)

      </div>
              </div>

                  

                  <div id="elsewhere">
            <div id="elsewhere-inner">

                    ... ....(생략)

        </div>
              </div>



                  

                  <div id="project">
            <div id="project-inner">

                    ... ....(생략)

        </div>
              </div>

                  

                  <div id="mylog">
            <div id="mylog-inner">

                    ... ....(생략)

        </div>
              </div>



                  

                  <div id="footer">
            <div id="footer-inner">

                    ... ....(생략)

        </div>
              </div>

</div>
</div>
</body>
</html>

컨 테이너(container)로 전체를 두르고, 그 다음 #nav, #elsewhere, #project, #mylog, #footer가 선택자명만 다를 뿐 똑같은 레이아웃 CSS가 반복되어 사용되었습니다. 디폴트 XHTML+CSS로 쉽게 레이아웃을 짜는 것이 보이신다면 이미 이 프로젝트는 끝난거나 다름 없습니다.

앞서 inner에 대해서 미리 언급 했었는데, #nav와 #nav-inner를 구별시킨 이유로서 메인페이지의 경우 #nav는 화면 가득 채우기 위해 width:100%;로(검정바탕) 설정되었고 #nav-inner는 중앙 정렬을 위해 width:980px; 그리고 margin: 0 auto;이 설정되었습니다. 웹페이지의 화면 전체를 활용할 때 유용하고 편리하게 관리가 됩니다. 화면 전체 뿐만 아니라 세부적인 요소 안에서도 편리하게 관리할 수 있습니다.

아래 이미지에 #nav와 #nav-inner의 실제 적용방법을 그려봤습니다. 그밖에 다른 선택자 역시 #alpha와 #alpha-inner 그리고 #beta와 #beta-inner를 분리해 놓은 이유를 쉽게 설명하기 위해 레이아웃의 각 영역에 테두리를 둘러서 그림을 만들어봤습니다. 각 영역의 간격을 inner로 관리하는 것입니다.

'Customize' 카테고리의 다른 글

Layout 만들기 #1 (0)	2010.05.09
몇 가지 주의 사항 (0)	2010.05.09
column-left? column-right? (0)	2010.05.09
열과 행으로 마무리 (0)	2010.05.09
Default XHTML+CSS (0)	2010.05.09

T : C

Default XHTML+CSS

2010. 5. 9. 21:59

디폴트 XHTML과 CSS는 github에서 보실 수 있으며 다운로드 가능합니다. 다음 티스토리와 텍스트큐브, 구글 텍스트큐브를 이용하여 테스트해보실 수 있습니다. 제 홈페이지의 XHTML과 CSS를 참고하셔도 좋습니다.

Github

DAUM TISTORY

TEXTCUBE

TEXTCUBE google - closed

Download

DAUM TISTORY

TEXTCUBE core

TEXTCUBE google - closed

레이아웃에 도전하시려면 기본적인 HTML과 CSS의 사용법은 알고 있어야합니다. 프로그래밍 배우듯 어려운 것이 아니니 부담없이 시작해 보시길 바랍니다. HTML과 CSS에 대한 설명은 하지 않겠습니다. 사실 레이아웃이 사이트 디자인의 절반은 완성한 것이니 레이아웃을 짜보면서 기본적인 사항을 익히는 것도 나쁘지는 않을 것 같습니다. 저 역시 여러 사이트에서 레이아웃 CSS을 따라하며 시작했었습니다.

저의 홈, 메인페이지에서도 동일하게 사용하고 있는 레이아웃의 디폴트 CSS를 먼저 보여드리겠습니다.

/* ---- Container ---- */

#container {                                  -> container는 어떤 레이아웃이든지 전체를 두르는 역할을 합니다.
  border-top: 5px solid #f1f1f1;
}
#container-inner {
  width: 100%;
}

/* ---- Header ---- */

#header {
  clear:both;
  width: 100%;                             -> 저의 홈페이지는 가로 사이즈 100%로 설정되어 있습니다.
  background-color:#333;
  border-bottom:1px solid #ccc;
}
#header-inner {
  width:980px;                            -> 가로 사이즈 100% 안에 inner는 가로 사이즈 980px로 설정됩니다.
  margin: 0 auto;                           -> 브라우저에서 항상 중앙에 정렬되도록 합니다.
}
#header-alpha {                             -> 이후는 선택사항입니다. alpha와 beta 2개의 행을 만듭니다.
  width:720px;                                   alpha와 beta보다 더 많이 추가할 수도 있습니다.
}
#header-alpha-inner {
  width:700px;
  margin:20px 0;
}
#header-beta {
  width:240px;
}
#header-beta-inner {
  width:220px;
  margin:20px 0;
}
#header-alpha-inner, #header-beta-inner {
  overflow: hidden;
  margin-right: 10px;
  margin-left: 10px;
}
#header-alpha, #header-beta {
  position: relative;
}
#header-alpha-inner, #header-beta-inner {
  position: static;
}
#header-alpha, #header-beta {
  display: inline;
  float: left;
}

CSS 를 조금이라도 아시는 분이라면 전체 레이아웃이 고작 이것밖에 안되냐고 생각하실 수도 있고, 어렵게 느끼신다면 마냥 복잡해 보일 수도 있겠습니다. CSS를 조금 다를 줄 아신다면 디폴트 CSS를 이용해서 계속 확장시키며 복잡한 레이아웃을 만들 수 있구나 하고 짐작을 하셨나요? 즉 위의 디폴트 CSS의 #Header를 다른 선택자로 변경해서 계속 붙여가는 것이지요.

#header {             -> #header를 #footer로
    clear:both;
    width: 100%;
    background-color:#333;
    border-bottom:1px solid #ccc;
}

#header 이 선택자명을 #footer와 같이 변경만 해주시고 이어서 붙여넣으면 된다는 이야기입니다. 그런데 #header만 있어도 될 텐데 #header-inner와 같이 inner 선택자가 있습니다. 그 이유는 레이아웃 각 영역 사이의 간격을 조절하는데 편리하기 때문입니다. #header와 #header-inner를 분리시켜서 CSS의 크기가 2배가 되었네요. 하지만 분리시키지 않았다면 정말 짧다는 걸 아시겠지요? 취향에 따라 대여섯 줄로 짧게 만들어 쓰실 수도 있다는 뜻이지요. Navigation, elsewhere, project, mylog, foot는 모두 똑같은 디폴트 CSS를 통해 반복 사용된 것을 확인해보세요. project에서는 3행이 사용되었습니다. alpha, beta 그리고 gamma가 추가된 것이지요. 실제 저의 메인 페이지 CSS는 다음과 같습니다.

http://minordev.com/layout.css

@charset "utf-8";

/*
Layout Project by minordev
*/

body {
  margin:0;
  padding:0;
  font-family: Arial, "Helvetica Neue", Verdana;
  line-height: 1;
}

/* ---- Container ---- */

#container {
  border-top: 5px solid #f1f1f1;
}
#container-inner {
  width: 100%;
}

/* ---- Navigation ---- */
#nav {
  clear:both;
  width: 100%;
  background-color:#333;
  border-bottom:1px solid #ccc;
}
#nav-inner {
  width:980px;
  margin: 0 auto;
}
#nav-alpha {
  width:720px;
}
#nav-alpha-inner {
  width:700px;
  margin:20px 0;
}
#nav-beta {
  width:240px;
}
#nav-beta-inner {
  width:220px;
  margin:20px 0;
}
#nav-alpha-inner, #nav-beta-inner {
  overflow: hidden;
  margin-right: 10px;
  margin-left: 10px;
}
#nav-alpha, #nav-beta {
  position: relative;
}
#nav-alpha-inner, #nav-beta-inner {
  position: static;
}
.column-left #nav-alpha, .column-left #nav-beta {
  display: inline;
  float: left;
}
.column-right #nav-alpha, .column-right #nav-beta {
  display: inline;
  float: right;
}

/* ---- Elsewhere  ---- */

#elsewhere {
  clear:both;
  width: 100%;
  padding: 10px 0;
  background-color:#fff;
  border-bottom:1px solid #ccc;
}
#elsewhere-inner {
  width:980px;
  margin: 0 auto;
}
#elsewhere-alpha {
  width:720px;
}
#elsewhere-alpha-inner {
  width:700px;
}
#elsewhere-beta {
  width:240px;
}
#elsewhere-beta-inner {
  width:220px;
}
#elsewhere-alpha-inner, #elsewhere-beta-inner {
  overflow: hidden;
  margin-right: 10px;
  margin-left: 10px;
}
#elsewhere-alpha, #elsewhere-beta {
  position: relative;
}
#elsewhere-alpha-inner, #elsewhere-beta-inner {
  position: static;
}
.column-left #elsewhere-alpha, .column-left #elsewhere-beta {
  display: inline;
  float: left;
}
.column-right #elsewhere-alpha, .column-right #elsewhere-beta {
  display: inline;
  float: right;
}

/* ---- Project ---- */

#project {
  clear:both;
  width: 100%;
  padding: 10px 0;
  background-color:#f9f9f9;
  border-bottom:1px solid #ccc;
}
#project-inner {
  width:980px;
  margin: 0 auto;
}
#project-alpha {
  width:480px;
}
#project-beta {
  width:240px;
}
#project-gamma {
  width:240px;
}
#project-alpha-inner {
  width:460px;
  margin:20px 0;
}
#project-beta-inner {
  width:220px;
  margin:20px 0;
}
#project-gamma-inner {
  width:220px;
  margin:20px 0;
}
#project-alpha-inner, #project-beta-inner, #project-gamma-inner {
  overflow: hidden;
  margin-right: 10px;
  margin-left: 10px;
}
#project-alpha, #project-beta, #project-gamma {
  position: relative;
}
#project-alpha-inner, #project-beta-inner, #project-gamma-inner {
  position: static;
}
.column-left #project-alpha, .column-left #project-beta, .column-left #project-gamma {
  display: inline;
  float: left;
}
.column-right #project-alpha, .column-right #project-beta, .column-right #project-gamma {
  display: inline;
  float: right;
}

/* ---- mylog ---- */

#mylog {
  clear:both;
  width: 100%;
  background-color:#fff;
  border-bottom:1px solid #ccc;
}
#mylog-inner {
  width:980px;
  margin: 0 auto;
}
#mylog-alpha {
  width:720px;
}
#mylog-beta {
  width:240px;
}
#mylog-alpha-inner {
  width:700px;
  margin:20px 0;
}
#mylog-beta-inner {
  width:220px;
  margin:20px 0;
}
#mylog-alpha-inner, #mylog-beta-inner {
  overflow: hidden;
  margin-right: 10px;
  margin-left: 10px;
}
#mylog-alpha, #mylog-beta {
  position: relative;
}
#mylog-alpha-inner, #mylog-beta-inner {
  position: static;
}
.column-left #mylog-alpha, .column-left #mylog-beta {
  display: inline;
  float: left;
}
.column-right #mylog-alpha, .column-right #mylog-beta {
  display: inline;
  float: right;
}

/* ---- Footer ---- */

#footer {
  clear:both;
  width:100%;
  margin-bottom: 20px;
  padding-bottom: 10px;
  background-color:#333;
}
#footer-inner {
  width:980px;
  margin:0 auto;
}
#footer-alpha {
  width:720px;
  font-size:10px;
}
#footer-beta {
  width:240px;
  font-size:10px;
}
#footer-alpha-inner {
  width:700px;
}
#footer-beta-inner {
  width:220px;
}
#footer-alpha-inner, #footer-beta-inner {
  overflow: hidden;
  margin-right: 10px;
  margin-left: 10px;
}
#footer-alpha, #footer-beta {
  position: relative;
}
#footer-alpha-inner, #footer-beta-inner {
  position: static;
}
.column-left #footer-alpha, .column-left #footer-beta {
  display: inline;
  float: left;
}
.column-right #footer-alpha, .column-right #footer-beta {
  display: inline;
  float: right;
}

/* Utilities ----------------------------------------------------------------- */

#nav:after,
#nav-inner:after,
#elsewhere:after,
#elsewhere-inner:after,
#project:after,
#project-inner:after,
#mylog:after,
#mylog-inner:after,
#footer:after,
#footer-inner:after {
  content: " ";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
}

'Customize' 카테고리의 다른 글

Layout 만들기 #1 (0)	2010.05.09
몇 가지 주의 사항 (0)	2010.05.09
column-left? column-right? (0)	2010.05.09
열과 행으로 마무리 (0)	2010.05.09
Default XHTML+CSS 두번째 (0)	2010.05.09

T : C

Layout Project ver 1.4

'Archives'에 해당되는 글 18건

Layout 만들기 #3

'Customize' 카테고리의 다른 글

Layout 만들기 #2

'Customize' 카테고리의 다른 글

Layout 만들기 #1

'Customize' 카테고리의 다른 글

몇 가지 주의 사항

'Customize' 카테고리의 다른 글

column-left? column-right?

'Customize' 카테고리의 다른 글

열과 행으로 마무리

'Customize' 카테고리의 다른 글

Default XHTML+CSS 두번째

'Customize' 카테고리의 다른 글

Default XHTML+CSS

Github

Download

http://minordev.com/layout.css

'Customize' 카테고리의 다른 글

최근 댓글

티스토리툴바