레이아웃 시리즈 1.5

Thursday, July 21, 2005

이번에는 A2님의 조언을 수용해서 다른 레이아웃을 단순한 CSS 만으로 바꾸어 보겠습니다. 이것은 css의 레이아웃 구조만 잘 이해하고 있다면 특별히 어려운 부분은 아니라고 봅니다.

전혀 xhtml부분은 건드리지 않았습니다. 단순히 약간의 포지셔닝을 첨부하여 바꾸었습니다.

결과물은 이렇습니다.
레이아웃 강좌 그림

하늘이님께서 제작하신 테터의 테마(스킨)가 약간은 이러한 형태입니다. 왼쪽에 사이드 바가 있고, 헤더 콘텐트 푸터가 오른쪽부분에 위치하는것이죠. 특히나 sidebar 는 position으로 제작되기때문에 자바스크립트로 스크롤함에 따라 위아래로 움직이는것 또한 구현 문제 없겠네요.

그럼 얼만큼 바꾸면 될까요. 네, 4가지밖에(사가지로 읽지 마시고 네가지로 읽어주세요 ㅡㅡ) 바뀐것이 없습니다. ^^;

/*기본 정의 */
body {
	font-family: Gulim, 굴림, Arial, sans-serif;
	font-size: .8em;
	text-align: center;  /*IE 5.5 */
	margin:0;
	padding: 0;
	background: #fff;
	}

/*레이아웃 부분 */
#wrap {
	text-align: left;
	width: 800px;
	margin: 0 auto;
	padding: 0;
	position:relative; /* ### 첨부된 부분 */
	}
#header {
	height: 200px;
	margin: 0 0 0 200px;
	padding: 0;
	background: red;
	}
#middle {
	margin: 0;
	padding: 0;
	float:right;

	background: gray; /*임의로 삽입 */
	}
#sidebar {
	width: 200px;
	margin: 0;
	padding: 0;
	float:left;
	/* #### 첨부된 부분  ### */
	position:absolute;  
	top:0;
	left:0;
	/* 첨부 끝 */

	height: 300px; /*임의로 삽입 */
	background: blue; /*임의로 삽입 */
	}
#content {
	width: 600px;
	margin: 0;
	padding: 0;
	float:right;

	height: 200px; /*임의로 삽입 */
	background: black; /*임의로 삽입 */
	}
#footer {
	height: 50px;
	padding: 0;
	margin: 0;
	clear:both;

	background: green;/*임의로 삽입 */
	margin-left: 200px;  /* ## 첨부됨 */
	}

## 을 붙여서 첨부된 부분을 나타내 보았습니다.
#wrap 부분에 position: relative;
#sidebar 부분에 position:absolute; top:0; left:0;
#header 부분에 왼쪽 200 마진
#footer 부분에 왼쪽 200 마진

자 설명해 보겠습니다.
#wrap 부분에는 position: relative 를 주었습니다. 나중에 sidebar에 position: absolute을 줄때에 바로 relative 값을 준곳 안에서 위치를 찾기 때문에 그렇습니다.

그래서 sidebar에서는 position: absolute; 을 주면서 위치는 왼쪽 맨 위로 올렸네요. 이것은 position 즉 위치하는것 이기 때문에 지금 header는 줄어든것이 아니고 sidebar에 200px이 가려진 것입니다. 그러하니 수동으로 줄여줘야겠죠. 그래서 #header에 200 px margin을 왼쪽에 주었습니다. width를 직접 제어하는것이 아닌 margin으로 제어하게 되는거네요 잠깐 케스케이딩 효과를 보겠습니다. 효과라고 할수는 없지만,,,

#header {
height: 200px;
margin: 0;
padding: 0;
background: red;
margin-left: 200px; /*### 첨부된 부분*/
}

margin 이 2번 불려졌습니다. 충돌이 생길까요? 네 아닙니다. 위에서부터 아래로 컴퓨터가 읽어가면서 겹치는것은 후에 나온것으로 겹쳐 버리기 때문입니다.
margin: 0; 는 margin-top, margin-left, margin-right, margin-bottom이 다 0 이라고 짧게 설명한 것이기 때문에 후에 margin-left: 200px;을 주었으니 margin-left만 영향을 받고, 나머지 셋은 그대로 0으로 됩니다.

그렇다면 이렇게 하면?
#header {
height: 200px;
height: 300px;
}

네. height은 300px;이 됩니다.

이런 하나의 xhtml을 가지고 css로 응용하여 보여주는것은 젠가든에서 아주 잘 나타내어 주고 있습니다. 처음 이곳에 대해 들어보셨다면 꼭 가서 구경하시기 바랍니다. 아름다운 css. =]

  1. A2

    A2

    Jul/21/05 @ 1:07 pm

    수고하셨습니다. ㅎㅎ
    이 얼마나 멋진가요.
    데이터와 디자인의 분리!
    이렇게 멋진걸 자칭 웹개발자들은 왜 피하려 하는건지.
    근데 제목을 #1.5라고 해야하지 않을까요? :roll:

  2. A2

    A2

    Jul/21/05 @ 1:18 pm

    앗! 갑자기 재밌는 이벤트가 떠올랐습니다. 움하하~

    1.일단 일모리님이 단순한 xhtml 문서를 하나 올립니다.

    2.방문하는 사람들이 각자 올려진 xhtml 문서를 바탕으로 마음대로 CSS를 구성합니다.

    3.각자 완성된 CSS를 이곳에 올립니다.

    4.서로의 다른 사람의 CSS를 가져와서 xhtml 문서에 입혀봅니다.

    5.하나의 문서가 여러가지 모양으로 바뀌는 것에 감탄합니다.

    6.CSS레이아웃, 웹표준, 웹접근성의 중요함을 깊이 깨닫고 국내 웹발전을 위해서 적극 활동합니다.

    라는 이런 이벤트 입니다. 재밌겠죠. 그쵸? :lol:

    (4)번 항목에서각자 CSS를 올릴때 이곳이 복잡해지지 않도록 어떻게 올리면 좋을지도 생각해 봐야 할거구요.
    트랙백을 이용한다해도 불편하지 않을까요?
    이벤트를 위한 특정 명령어를 넣어서 그 안에 넣은 글은 클릭하면 보였다가 사라졌다가 하는 기능을 추가하는 것도 좋다고 생각합니다.

  3. 일모리

    일모리

    Jul/21/05 @ 2:24 pm

    :grin: Zen Garden과 같은 개념이군요. 오호라,,, 간단히 이벤트 형식으로 하는것도 괜찮을꺼 같습니다 물론 상품같은걸 드려야겠죠. 뭐 저번에 출간된 zen of css garden 책이라던지 말입니다. 아무튼 생각해 볼만한 이벤트군요 ^^
    이제 곧 웹표준 책도 출간되고 많은 분들의 공부의 시간도 이번 여름에 갖게 되면서 올해 가을즈음에 해보는게 어떨가 생각해 봅니다. ^^

  4. A2

    A2

    Jul/21/05 @ 3:38 pm

    그렇다면 이런 메세지를 걸어두는 것이 어떨까요?

    “가을에 이벤트를 실시할 예정이오니 그전에 공부를 많이 하셔서 상품으로 제공될 ‘최신형 PC’를 받으시기 바랍니다.”

    라고… (ㅡㅡ; )=3 후다닥~

  5. 와니

    와니

    Jul/21/05 @ 8:12 pm

    요즘 아주 열심히신걸요~
    전 솔직히 헷갈리지만 그래도 잘보고 있습니다 ^^

  6. 너굴;

    너굴;

    Jul/21/05 @ 9:11 pm

    정말 잘 보고 있습니다.
    만들어보고 싶은 욕구가 쑥쑥 자라는 글들입니다.
    다만… 욕구만 충만하네요.
    (언제 만든다는 거야? :roll:)

  7. 떡아이

    떡아이

    Jul/22/05 @ 5:09 am

    쿠쿠 이벤트하면 좋겠어용… 한국형 젠가든 이벤트가 빨리 이뤄지는 그날까지 화이팅! :cool:

  8. 일모리

    일모리

    Jul/23/05 @ 3:55 pm

    A2// ㅎㅎ 이번주 내로 한번 베너라도 만들어서 달아놓아야 겠군요 ^^

    와니// 와니님 앞에서 열심은요 무슨 ^^; 와니님 뒤에서 언제나 팍팍 후원 해드리고 있습니다. ^^ 사이트 제작도 무료로,, 쿨럭,,

    너굴// 만드십시오. ^^ 멋지게 링크 걸어드리겠습니다. 아 그리고 너굴님도 언젠가 워프 플러그인 콘테스트에 함 출가해 보심도,, 좋을듯 합니다. :)

    떡아이// 화이팅!! 빨리 멋진 테마 공개하세요 ^^

  9. Gosinga

    Gosinga

    Aug/25/05 @ 3:35 pm

    CSS 禪院

    웹디자인을 하는 이들이라면 CSS를 다루지 않을 수 없다. 그리고 CSS를 공부하기 위해 웹상에서 자료를 구하다 보면, 어느 곳에서나 언급하고 있어서 필연적으로 둘러보게 되는 곳이 CSS Zengarden…

  10. Gosinga

    Gosinga

    Sep/05/05 @ 3:53 pm

    CSS 禪院 번역

    CSS 선원은 각 나라 웹 디자이너들의 참가를 독려하기 위해 번역문들을 제공하고 있다. 주요 언어는 대부분 번역이 되어 있으며 한글로도 번역이 되어 있다.

    한글로 번역해 준 정성이 무척 …

  • html 코드삽입시 [code lang="xml"] 과 [/code] 를 앞뒤에 붙여주시고
    css 코드삽입시 [code lang="css"] 와 [/code] 를 앞뒤에 붙여주세요