작성일자
카테고리 CSS/CSS기초

웹페이지를 만들면 주로 CSS로 레이아웃을 하기 때문에 포토샵으로 만든 이미지는 잘 사용하지 않습니다. 그래도 특수한 경우 작은 이미지를 사용해서 상하로 반복될 수 있는 이미지를 삽입하면 원하는 효과를 얻을 수 있습니다. 이번 글에서는 제 블로그의 방문자님이 궁금해 하는 내용으로 오랫만에 HTML/CSS에 관한 글을 올려봅니다. 우선 이 글의 제목을 보면 금방 이해가 힘들므로 그림을 보면서 무슨 의미인지 알아보겠습니다.



간단한 구조의 웹사이트 레이아웃입니다. 현재 상황을 보면 컨텐트와 사이드바 사이에 선이 그려져 있습니다. 두 곳의 배경 색상도 다르죠. 대부분의 경우 위와같은 레이아웃을 만들려면 두 개의 요소의 높이가 같아야합니다. 하지만 두개의 요소의 내용이 항상 같을 수는 없죠. 컨텐트 영역의 내용이 많으면 상하로 늘어나고 사이드바와 높이가 달라서 사이드바 영역의 배경이 다르게 나오게 됩니다. 위 상태에서 실제 사이드바의 높이가 어떤지 요소검사를 해보겠습니다.



요소검사를 해보니 사이드바의 높이가 200픽셀입니다. 하지만 컨텐트 영역과 같은 높이로 착각이 드는 것은 사이드바의 배경으로 포토샵으로 만든 이미지를 사용했기 때문입니다. 실제로는 사이드바의 배경은 투명이고 컨텐트와 사이드바 영역을 감싸고 있는 컨테이너의 배경이미지인 것입니다. 



이번에는 사이드바의 높이를 400픽셀로 늘렸습니다. 그런데도 컨텐트 영역의 높이가 사이드바와 같습니다. 이렇게 항상 두 영역의 높이가 같도록 나타나게 하는 방법이 이번 글에서 알아볼 내용입니다. 위그림에서 사용된 코드는 아래와 같습니다.


  1 
<!doctype html>
  2 
<html>
  3 
<head>
  4 
<meta charset="utf-8">
  5 
  <style>
  6 
  body { width:960px; margin:20px auto; background:#ddd;}
  7 
  .container {background:#fff url(bg.gif) repeat-y top right; width:960px;}
  8 
  .content { width:660px; height:300px; float:left;}
  9 
  .sidebar {width:300px; height:400px; float:left;}
 10 
  .header, .footer { height:100px; background:#ccc; }
 11 
  .clear {clear:both;}
 12 
  </style>
 13 
</head>
 14 
<body>
 15 
  <div class="header">
 16 
    헤더
 17 
  </div>
 18 
  <div class="container">
 19 
    <div class="content">
 20 
      컨텐트
 21 
    </div>
 22 
    <div class="sidebar">
 23 
      사이드바
 24 
    </div>
 25 
    <div class="clear"></div>
 26 
  </div>
 27 
    <div class="clear"></div>
 28 
  <div class="footer">
 29 
    푸터
 30 
  </div>
 31 
</body>
 32 
</html>


편의상 CSS는 임베드 방식으로 작성했습니다.


우선 body는 중앙배치를 하기 위해 width:960px; margin:20px auto;로 설정해서 폭을 960픽셀로 했습니다. 배경은 옅은 회색이고요. 컨텐트 영역과 사이드바의 영역은 좌우로 배치하기 위해 폭을 660과 300으로 했습니다. 좌우로 배치하기 위해 float:left;를 사용했습니다. 헤더와 푸터는 형식적으로 배치한 것이고 중요한 것은 컨테이너 영역입니다.


<div class="clear"></div>를 사용한 것은 요소가 float 되고 있으면 뜨게 되므로 아래에 있는 요소가 위로 올라와서 자리를 차지하는 것을 방지합니다. CSS에서 clear:both;가 작용을 하죠.


그러면 이제 .container 에 대한 설명만 남았습니다.


 13 
.container {background:#fff url(bg.gif) repeat-y top right; width:960px;}


우선 배경색상을 흰색으로 하고 이미지를 삽입했습니다. 이 이미지는 폭이 사이드바의 폭과 같은 300픽셀이고 높이는 2픽셀입니다. 1픽셀로 해도 됩니다. 이 작은 높이의 이미지가 상하로 반복돼서 사이드바의 배경을 만들고 있습니다. 바로 repeat-y 때문이죠. 이것은 y축을 기준으로 반복하라는 의미입니다. 바로 다음에 나오는 것이 헷갈리는 배경이미지의 위치 값입니다. 



현재 .container는 사이드바와 컨텐트 영역을 감싸고 있는데 폭이 960픽셀이고 배경이미지를 우측 상단에 배치하려면 top right을 사용합니다. 그 위치에서 상하로 반복되는 것이죠. 중앙을 기준으로 반복시키려면 top center으로 입력하면 됩니다. 



만일 사이드바를 좌측으로 하고 싶다면 top left로 하면 되지만 위 그림을 보면 배경이미지만 바뀌었죠. 그래서 실제 HTML의 코드도 위치를 바꿔줘야합니다.


 13 
.content { width:660px; height:300px; float:right;}
 14 
.sidebar {width:300px; height:400px; float:left;}


사이드바는 이미 float:left;되고 있으므로 컨텐트만 float:left;시켜주면 됩니다. 그러면 아래 그림처럼 나옵니다.



이처럼 CSS를 이용하면 사이드바와 컨텐트의 위치도 자유롭게 변경할 수 있습니다.


사용 코드와 이미지-->


layout-test.zip


저작자 표시 비영리 변경 금지
신고

비밀댓글입니다

BlogIcon 베누시안

네, 스킨 위자드는 CSS를 다루지 않는 경우에 만드는 것이고 이것만으로는 많은 부분을 변경할 수가 없죠. 직접 CSS를 변경하는 것이 훨씬 편합니다. 물론 잘 알아야겠죠.

BlogIcon 윈컴이

아하~ 사이드바 배경을 입힐때 배경 이미지를 사용하군요!

BlogIcon 베누시안

안녕하세요. 오랫만이십니다. 이미지를 사용하지 않고도 다른방법으로 할 수 있는데 방문자님이 원하시는대로 했답니다.

BlogIcon 윈컴이

어~ 저 아시고 계시군요 ^^;;
다른 방법도 있나 보군요 ㅎㅎ

BlogIcon 베누시안

알고말고요. 예전에 가끔 방문해서 댓글을 남기셨습니다.

BlogIcon 메리앤

그렇군요. ^^;
이것이 계기가 되서 많이 배우게 되겠군요.
다소 더디더라도 꾸준히 해볼랍니다. :)
감사합니다.

BlogIcon 베누시안

여러가지 레이아웃 방법이 많아서 하나씩 배우면 응용할 수 있답니다. 감사합니다~

비밀댓글입니다

BlogIcon 베누시안

직접 스킨을 만드시나 본데요. 전체적으로 감을 잡고서 하셔야합니다. 제가 보니 제대로 안돼있더군요. 이상황에서는 누가 해준다면 처음부터 끝까지 하는 수 밖에 없는데 그럴 시간이 안됩니다. 스킨 만드는 것이 간단한게 아니랍니다.

비밀댓글입니다

BlogIcon 베누시안

아 그런건 아니구요. 위에서 설명한 내용은 일반적인 이론 적인 것이기 때문에 이를 티스토리 스킨이나 다른 웹페이지 레이아웃에 적용하려면 선택자라든가 CSS를 잘 구별해서 입력해야합니다. 그리고 div 태그를 어느 부분이 어느것을 감싸고 있는지 잘 확인해야되고요. 그래서 이런 내용을 잘 알아야 스킨 수정 진행하는데 막힘이 없습니다. 그렇지 않으면 원하는대로 나오지 않습니다. 제가 방문해서 보니 여러가지 상황이 잘못돼있습니다. 위 압축파일을 열고 실행해서 웹브라우저에서 제대로 나온다면 오류는 없는 것이니 잘 검토해서 적용해보세요.

BlogIcon 베누시안

축하합니다. 어렵게 배우면 절대 잊지 않습니다. 이럴 때 float와 clear에 대해서 배우면 자신만의 지식으로 남을겁니다. 이곳( http://martian36.tistory.com/809 )으로 가서 연습해보세요. 간단하게 말로 하는 것보다 직접 경험해야 합니다.

BlogIcon 디노야놀자

도무지 해결이 안 돼서 포기한지 며칠이 지났네요. 근데 오늘 얼떨결에 해결 했습니다. 제가 실수한 부분이 바로 clear:both; 이거였네요. 저는 그냥 footer 레이아웃에만 clear 속성을 줬습니다. 근데 다시 강의를 차근차근히 훑어 보니 clear 속성이 두 개가 들어가 있더군요. 그래서 CSS 쪽에 컨테이너 레이아웃에 clear를 추가해 보기도 하고, 사이드바에 추가해 보기도 하고 했는데 안 되길래 결국 skin.html 쪽에 강의에 나온 것과 똑같은 위치에 clear 속성을 주니까 해결 됐네요. 이렇게 또 하나 배우게 되었네요. 감사합니다. 근데 <div class="clear"></div>가 왜 위와 같은 위치에 들어가는 건지 정확한 설명 좀 부탁 드려도 될까요? 그냥 똑같이 베껴서 해결하긴 했는데, 왜 저 위치에 저렇게 들어가는 건지 원리를 정확히 모르겠네요. 본문에는 float이 뜨기 때문에라고 적혀 있는데, 사이드바가 닫히는 </div> 바로 아래에 한 개, 컨테이너가 닫히는 </div> 바로 아래 한 개, 이렇게 두 개가 들어간 이유가 정확히 뭔지 궁금하네요.

비밀댓글입니다

티스토리 툴바