상품의 옵션선택란 제목의 가로길이 조절 및 스타일 주기 > 기술자료

• 목록

상품상세화면을 개별디자인 하실 때 상품에 대해 선택하는 옵션이 2종류가 있고 각 옵션선택란의 제목이 "용량" 및 "다채로운 색상을 선택" 등과 같이 글자수가 차이가 난다면 아래 그림1 처럼 상품상세화면안에서 옵션선택란의 정렬이 위 아래가 어긋나게 보일 수가 있습니다.


그림1

이때 상품상세화면을 개별디자인 하고 그 html 소스에 옵션선택란의 제목에 대한 스타일을 지정해 주면 정렬을 맞출 수 있답니다. 가령 상세화면을 개별디자인한 html 소스에 아래와 같은 스타일을 선언 하면

<style type="text/css">
#option1_title {
width:128px;
background-color:yellow;
}
</style>

그림1 처럼 보여지던 부분을 그림2 와 같이 변경할 수 있습니다.


그림2

그림2에서 노란색은 강조하기 위해 일부러 넣은 거구요
그림2를 보시면"용량" 이라는 옵션선택란의 제목이 보여지는 부분의 가로길이가 늘어나서 옵션을 선택하는 셀렉트박스가 오른편으로 이동한 것을 보실 수 있습니다.
또한 아래와 같은 스타일을 선언하면

<style type="text/css">
#option1_title {
text-align:right;
padding-right:4px;
width:128px;
background-color:yellow;
}
</style>

그림 3과 같은 식으로 보여주실 수 있답니다.


그림3

위와 같은 스타일을 선언해서 사용할때 주의점을 말씀드리자면

1. 상품상세화면을 개별디자인 해야 적용되며 특히 [OPTION1] 및 [OPTION2] 라는 가상태그를 써서 상품상세화면을 개별디자인 해야 적용됩니다. [OPTION1] 에 대해서는 위 스타일중에 #option1_title 과 같이 써서 선언하며 만일 [OPTION2] 에 대해서 선언시에는 #option2_title 으로 씁니다.

2. 위에 스타일에서 width:128px; 으로 선언하는 가로길이 부분은 쇼핑몰 운영자님께서 입력하신 옵션선택란의 제목의 글자수에 대한 적당한 너비에 맞게 맞추어 사용하시면 됩니다.

3. 같은 대분류 안에 옵션선택란의 제목이 서로 다른 상품들이 있다면 가령 상품1은 "색상" 과 "무게" 를 선택해야 하고 상품2는 "용량" 과 "색상"을 선택해야 한다든지 해서 옵션선택란의 제목의 가로길이가 상품에 따라 달라지게 된다면 해당 스타일을 상품관리->판매상품 기본관리-> 판매상품 신규등록/관리 메뉴에서 상품정보 입력시에 상품의 상세내용에 입력하여 사용하시면 되겠습니다.


자료제공 : 메이크샵