개별디자인으로 쇼핑몰 양쪽 사이드에 테두리 넣기 > 기술자료

• 목록

개별디자인을 하시는 분들 중에 많은 분들이 쇼핑몰 홈페이지의 오른쪽 가장자리에

세로 직선을 넣어서 쇼핑몰 홈페이지의 오른쪽 여백(이벤트 알리미가 나오는 부분)과

쇼핑몰 홈페이지의 중앙화면 부분을 서로 구분하기를 원하는 경우가 있습니다.

그런데 그 부분을 각 서브 페이지별로 개별디자인해서 만들게 되면

개별디자인이 안되는 주문서작성 페이지나 게시판 페이지 등등에서는 세로 직선을

넣을 수가 없어서 문제가 될 수 있습니다. 따라서 이 경우는 쇼핑몰 홈페이지에서

왼쪽메뉴+중앙화면 부분에 대해 전체적으로 가로 직선으로 된 배경이미지를 넣음으로써

쇼핑몰 홈페이지 첫페이지 뿐만 아니라 모든 서브 페이지들에 대해서도 오른쪽 테두리가

되는 세로 직선을 보여줄 수 있답니다.

먼저 쇼핑몰 홈페이지를 개별디자인 하실 때 전체적인 쇼핑몰 홈페이지의 메뉴 구성을

"상단메뉴 가로길이 = 왼쪽메뉴 + 중앙화면 가로길이 = 하단메뉴 가로길이"

가 되도록 테이블을 구성해서 만드셔서 전체적으로 직사각형이 되도록

개별디자인 하셔야 한답니다. 지금 예제로 나오는 <그림 1> 에서는 전체적인 쇼핑몰

홈페이지의 메뉴 구성을




<그림 1>

상단메뉴 가로길이 900 픽셀
= 왼쪽메뉴 150 픽셀 + 중앙화면 가로길이 750 픽셀
= 하단메뉴 가로길이 900 픽셀

위와 같이 구성해 보았습니다.

그리고 현 상태에서 "왼쪽메뉴 + 중앙화면"에 대해 들어갈 배경이미지를 만듭니다.

이때 이미지는 아래와 같은 형식으로 구성 됩니다.

<[점]---왼쪽메뉴배경색----[점|---------------흰색---------------|점|>
<-------왼쪽메뉴가로길이-----|---------중앙화면가로길이------------->
<-----------150픽셀----------|--------------750픽셀----------------->



<그림 2>

위와 같은 이미지를 "왼쪽메뉴 + 중앙화면"에 대해 배경이미지로 선언한다면

위와 같은 이미지가 계속 위에서부터 밑으로 반복되면서 겹쳐서 배경이 되기

때문에 결과적으로는 배경이미지의 양쪽 가장자리에 있는 점이 모아져서

세로 직선이 되는 것입니다. 따라서 아래에 나오는 <그림3> 과 같은 상태의

쇼핑몰 홈페이지가 배경이 적용되면 <그림 4>와 같은 상태의 쇼핑몰 홈페이지로

보여지게 되며 결과적으로 쇼핑몰 홈페이지의 양쪽 가장자리에 테두리를

넣을수 있게 됩니다. 이 부분은 쇼핑몰 홈페이지의 어떤 서브 페이지로

들어가더라도 동일하게 적용되게 된답니다.


<그림 3>


<그림 4>

위에서 <그림 2>와 같은 이미지를 "왼쪽메뉴 + 중앙화면"에 대해 배경이미지로

선언하는 것은 디자인마법사->메인디자인->하단메뉴관리에서 하단메뉴의

html 소스를 입력하실 때 아래와 같은 스타일을 선언하시면 됩니다.

<style>
#makebanner { background-image:url('/design/상점아이디/웹ftp에올린그림2'); }
</style>

위에서 "/design/상점아이디/웹ftp에올린그림2" 은 말 그대로 웹ftp 에

<그림 2> 파일을 올려놓았을때 웹ftp 상에서의 <그림 2> 의 상대경로입니다.

한가지 주의하실 점은 (1) 위와 같이 개별디자인 하시게 되면 각 서브 페이지들에

대해 개별디자인 하실 경우 각 서브 페이지들의 중앙화면 부분이 <그림 2>

안쪽에 들어오도록 가로길이를 정해서 개별디자인 하셔야 한답니다.

가령 위와 같은 예제에서는 가로길이 750 픽셀 이내에 들어가도록 만드셔야 되겠지요.

또 한가지 주의하실 점은 (2) 만일 디자인마법사->쉬운 디자인 서비스->쉬운 배경 설정/복사방지 메뉴에서 쇼핑몰 배경을

설정하시면 위 스타일이 적용이 안될 수 있다는 점 이구요,

마지막으로 주의하실 점은 (3) "상단메뉴 가로길이 = 왼쪽메뉴 + 중앙화면 가로길이 = 하단메뉴 가로길이"

처럼 만드실때 왼쪽메뉴와 중앙화면 사이에 여백이 들어갈 수

있다는 점 입니다. 이 여백을 없애시려면 디자인마법사->메인디자인->중앙화면관리메뉴에서

미리보기와 확인버튼 바로 위에 보시면 "왼쪽메뉴와 메인페이지 사이 공백 없애기"

와 같은 체크박스가 있으니 여기에 체크하신 후에 확인버튼을 눌러서 저장하시면 됩니다.

(중앙화면을 개별디자인 안하셨다면 체크박스 위에 커다란 텍스트박스 안에 공백을

몇칸 입력하시고 체크박스에 체크하신 후 저장하기를 누르시면 됩니다. 중앙화면을

개별디자인 안하시더라도 어차피 적용은 개별디자인 옵션메뉴에서 선택해 주셔야 한답니다.)

참고하시기 바라며,

마지막으로 양쪽에 무늬가 있는 테두리를 넣는 것을 보여 드리겠습니다.

개별디자인 설정상 각 메뉴의 가로길이는 처음 예를 들었을 때 처럼 가로 900 픽셀에

맞추어져 있구요, 아래 이미지가 "왼쪽메뉴 + 중앙화면"에 대해 배경이미지로 들어가게 됩니다.


<그림 5>

위와 같은 배경이미지가 들어 갔을 때 쇼핑몰 홈페이지에서 배경이 적용된 예제 입니다.


<그림 6>


<그림 7>


<그림 8>

위에서 보시는 바와 같이 한번만 배경을 적용해 놓으면 쇼핑몰의 어느 서브 페이지를

보더라도 동일하게 쇼핑몰의 양쪽 가장자리에 테두리가 생기게 됩니다.

따라서 일일이 서브 페이지들을 개별디자인 하실 필요가 없게 된답니다.

감사합니다. ^^