추천/신규/스페셜 상품란 상품이미지와 가격사이 띄우기 > 기술자료

• 목록

저희 메이크샵의 프리미엄 서비스를 사용하시면서
쇼핑몰의 첫페이지 중앙화면을 개별디자인 하셔서 추천상품란이나 신상품란에
상품의 작은이미지들이 보여질 때 그 상품의 작은이미지와 그 밑에
상품판매가격 사이에 여백이 생기는 간격을 좀 더 세밀하게 조정하시고
싶은 경우가 있습니다.
그때 저희가 디자인마법사메뉴에 메인디자인->중앙화면관리에서 제공하는 스타일을 사용하면
그 간격을 원하시는 데로 조정하실 수가 있답니다.

가령 예를 들어 프리미엄 서비스로 만들어 지고 아래와 같이
개별디자인된 쇼핑몰 홈페이지가 있을 때



<그림 1 프리미엄 예제 쇼핑몰>

위 그림 1에 나오는 쇼핑몰 홈페이지에 가운데 붉은색으로 테두리 쳐진 부분이
추천상품란이며 실제 중앙화면을 개별디자인 한 html 소스 중에서는

<TABLE WIDTH="750" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr><TD width="750">[CHUCHUN1]</td></tr>
</TABLE>
:
:

위와 같이 표시될 것 입니다. 확대해서 보면 아래 그림 2와 같구요



<그림 2 확대해서 본 추천상품란>

위 그림 2에서 보여지는 추천상품란에서 상품이미지와 상품판매가격 사이의
여백을 0 으로 만들려면 아래 그림 3처럼 디자인마법사->메인디자인->중앙화면관리에서
스타일을 입력하시면 됩니다.



<그림 3 중앙화면관리에서 스타일 넣기>

위 그림의 내용중에 아래와 같은 부분이 실제 추가해야 할 내용이구요

<style>
.main_brandname1 { height:0px; }
</style>

위 내용에서 0px 의 0 이라는 숫자대신에 다른 숫자를 넣으면 그만큼 간격이
생기게 된답니다.
아래 그림 4는 위에 소스 그대로 간격이 0 으로 입력된 경우 적용 예 입니다



<그림 4 간격을 0 으로 해서 적용한 예>

만일 숫자를 100 으로 하면 어떻게 될까요? 그만큼 간격이 생기게 되구요
아래 그림 5는 위에 간격을 100 으로 입력한 경우 적용 예 입니다

<style>
.main_brandname1 { height:100px; }
</style>



<그림 4 간격을 100 으로 해서 적용한 예>

만일 상품란을 추천상품란이 아니라 신상품란을 보여주려면 html 소스중에서
[CHUCHUN1] 을 [NEW1] 으로 바꿔 쓰시면 되구요, 위에 스타일 내용중에서
main_brandname1 를 main_brandname2 로 main_brandname 다음에 오는 숫자만
바꿔 주시면 됩니다. 적용 소스 예제는 아래와 같습니다

<style>
.main_brandname2 { height:0px; }
</style>

<TABLE WIDTH="750" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr><TD width="750">[NEW1]</td></tr>
</TABLE>
:
:


만일 상품란을 스페셜상품란으로 보여준다고 하면 추천상품란과 동일하게 보여주는
[SPECIAL4] 또는 [SPECIAL5] 와 같은 식으로 숫자가 4, 5 가 들어가는 가상태그를
써서 보여주셔야 하며 마찬가지로 스타일에서는 main_brandname 다음에 오는 숫자가
3 이 됩니다. 적용 소스 예제는 아래와 같습니다

<style>
.main_brandname3 { height:0px; }
</style>
<TABLE WIDTH="750" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr><TD width="750">[SPECIAL4]</td></tr>
</TABLE>
:
:

그런데 위 스타일을 적용하실 때 주의하실 점이 있는데요

한가지는 반드시 디자인마법사->메인디자인->중앙화면관리에서 개별디자인을 하셔야 적용된다 는 점 이구요,

또 한가지는 이미지와 가격 사이 여백을 띄우는 것이기 때문에
만일 상품명과 가격 사이 여백을 주려면 보통 30px 이상의 값을 주어야 한다는 점 입니다.

꼭 참고 하시기 바랍니다.

감사합니다.


자료제공 : 메이크샵