이미지 수정안하고 테두리 넣기 > 기술자료

• 목록

메이크샵의 프리미엄 서비스를 사용하실 때 상품의 상세화면에서 상품 보통이미지가 보여지는 곳에
보통 이미지 주위로 색이 들어간 테두리를 넣고 싶어하시는 분들이 계십니다.
그런데 저희 프리미엄 서비스의 상품관리메뉴에서 신규 상품 등록을 할때
테두리가 생성되도록 하는 기능을 쓰면 이미지 자체가 수정되서
테두리가 포함된 이미지가 만들어지는 것이므로 나중에 테두리를 빼려고 하면
이미지 파일들을 일일이 하나씩 수정해 주어야 하는 불편한 점이 생길 수 있습니다.
따라서 상품 보통이미지를 수정할 필요 없이 상품상세화면을 개별디자인해서
테두리를 넣으시려고 하는 분들도 계신데요, 그런데 개별디자인을 하시더라도
저희 프리미엄 프로그램 자체에서 상품상세화면에 상품 보통이미지가 보여질때
상품 보통이미지 바로 밑에 여백을 주기 때문에 이미지와 테두리가
딱 달라붙지 못해서 디자인이 틀어지는 경우가 있었습니다.



위 그림 2 에서 파란색 테두리는 이미지내부에 가장자리에
색칠한 것 으로 보시면 됩니다. 위와 같은 형식의 테두리를 바로 아래 그림 3와 같이
저희 프리미엄 관리자모드의 상품관리에서 기본 지원하는 테두리 생성 기능으로
만드실 수 있습니다. 물론 두께는 위 예제보다 좀 더 얇습니다.



<그림 3 판매상품 신규등록관리 메뉴에서 상품 신규 입력시 테두리 만드는 체크박스>


상품 상세화면을 개별디자인 하면서 대부분 아래와 같이 테이블 태그를 이용해서
상품의 보통이미지 주변에 테두리를 만드려고 하셨을 것 입니다.


<table cellpadding=0 cellspacing=0 style="border: #ff5100;border-width: 5px; border-style: solid;">
<tr><td>[IMAGE]</td></tr>
</table>


위에서 [IMAGE] 가상태그가 실제 개별디자인이 쇼핑몰에 적용되었을 때 상품 각각의
보통이미지를 보여주는 <img> 태그로 바뀌어 적용되게 됩니다.
대신에 그냥 위 내용 그대로 적용하시면 아래와 그림 4 와 같이 됩니다.



<그림 4 상세화면 개별디자인 적용 상태>


위 그림 4 에서 빨간색 테두리가 상세화면을 개별디자인하여 만든 테두리이며
위에서 개별디자인으로 만든 테두리와 상품 보통이미지의 영역을 보시면
상품 보통이미지와 그 밑에 테두리 사이에 여백이 있는 것을 보실 수 있습니다.
그 여백은 저희 프로그램에서 상품상세화면의 디자인템플릿과 상품 보통이미지 및
큰 이미지보기 버튼과의 위치를 균형있게 맞추기 위해서 넣는 것이기
때문에 개별디자인을 하더라도 뺄 수가 없었는데요.
이번에 스타일이 추가 되면서 그 여백을 없앨 수 있게 되었습니다.
관리자모드에 디자인마법사->인사이드디자인1->상품상세 화면 관리메뉴에서
상세화면을 개별디자인한 html 소스를 입력할 때 아래와 같은 스타일을


<style>
.detail_image { margin:0px; }
a { margin:0px; }
</style>


아래 그림 5 에서와 같이 html 입력란 상단에 입력해 주면 됩니다.



<그림 5 상세화면 개별디자인시에 스타일 입력 예>


위와 같이 입력하신다면 상품상세화면이 개별디자인된 내용이 실제
쇼핑몰 홈페이지에서 보여질 때 아래 그림 6 과 같이 보여지게 됩니다.



<그림 6 스타일이 적용된 예>


자료제공 : 메이크샵