워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

웹페이지를 만들면 주로 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


loyalty , ,

댓글 (15)

댓글 목록