STYLE GUIDE
textarea
0 /200자
0 /300자
0 /500자
0 /200자
오류메세지
0 /30자
<![CDATA[
<div class="textarea-wrap">
<textarea name="" id="" cols="30" rows="10"></textarea>
<span class="text-num"><strong>0</strong>/200<span class="unit">자</span></span>
</div>
<div class="textarea-wrap">
<textarea name="" id="" cols="30" rows="10"></textarea>
<span class="text-num"><strong>0</strong>/300<span class="unit">자</span></span>
</div>
<div class="textarea-wrap">
<textarea name="" id="" cols="30" rows="10"></textarea>
<span class="text-num"><strong>0</strong>/500<span class="unit">자</span></span>
</div>
<div class="textarea-wrap error-box">
<textarea name="" id="" cols="30" rows="10"></textarea>
<span class="text-num"><strong>0</strong>/200<span class="unit">자</span></span>
</div>
<span class="error-msg">오류메세지</span>
<div class="textarea-wrap no-num">
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<div class="textarea-wrap h30">
<textarea name="" placeholder="타이틀문구를 입력해 주세요."></textarea>
<span class="text-num"><strong>0</strong>/30<span class="unit">자</span></span><!-- 가이드에 맞추어 수정 -->
</div>
]]>
input
비밀번호를 입력하세요.
비밀번호 표시
?
오류메세지
완료메세지
<![CDATA[
<input type="text" placeholder="비밀번호 입력">
<input type="text" placeholder="비밀번호 입력" disabled>
<input type="text" placeholder="비밀번호 입력" value="입력완료" disabled>
<input type="text" class="error-box" placeholder="비밀번호 입력">
<span class="error-msg">오류메세지</span>
<input type="text" class="error-box blue" placeholder="비밀번호 입력">
<span class="error-msg blue">완료메세지</span>
]]>
email
<![CDATA[
<div class="form-area">
<div class="email">
<input type="text" class="error-box" placeholder="이메일 입력"/>
<span class="unit">@</span>
<select>
<option>이메일 선택</option>
<option>직접입력</option>
</select>
<span class="error-msg">이메일 주소를 입력하세요.</span>
<input type="text" class="custom error-box" placeholder="직접입력"/>
<span class="error-msg">이메일 주소를 입력하세요.</span>
</div>
</div>
]]>
phone num
<![CDATA[
<div class="form-area">
<div class="number">
<select>
<option>02</option>
<option>02</option>
</select>
<span class="unit">-</span>
<input type="text" class="error-box" placeholder="'-'없이 숫자만 입력해 주세요.">
<span class="error-msg">번호를 입력하세요.</span>
</div>
<div class="number">
<select>
<option>010</option>
<option>010</option>
</select>
<span class="unit">-</span>
<input type="text" class="error-box" placeholder="'-'없이 숫자만 입력해 주세요.">
<span class="error-msg">번호를 입력하세요.</span>
</div>
</div>
]]>
인풋 기타활용
기타
<![CDATA[
<div class="orderinfo-wrap">
<div class="order-option">
<strong>배송시 요청사항</strong>
<select>
<option>배송기사에게 전달되는 메시지 입니다.</option>
<option>배송 전 연락주세요.</option>
<option>부재 시 경비(관리)실에 맡겨주세요.</option>
<option>부재 시 택배함에 넣어주세요.</option>
<option>부재 시 문 앞에 놓아주세요.</option>
<option>직접 입력하기</option>
</select>
<input type="text" name="" value="" placeholder="요청사항을 입력해 주세요(최대20자)"><!-- 2020/11/18 -->
</div>
<div class="order-option refund-account">
<strong>환불계좌</strong>
<div class="payment-option">
<select>
<option value="">은행선택</option>
</select>
<input type="text" name="" value="" class="input-account-numb" placeholder="계좌를 ’_’없이 입력해 주세요.">
</div>
<input type="text" name="" value="" class="input-account-name" placeholder="예금주명을 입력해주세요.">
</div>
<div class="order-option">
<div class="point-area">
<div class="input-wrap price-num">
<input type="text" name="" value="0"><span class="unit">P</span>
</div>
<button class="cont-btn line-type active" type="button">전액사용</button>
</div>
</div>
</div>
<div class="addr-regist-area">
<dl>
<dt>주소</dt>
<dd class="address">
<div>
<button class="active" type="button" name="button">우편번호 찾기</button>
<input type="text" name="" value="" placeholder="우편번호">
</div>
<input type="text" name="" value="" placeholder="기본주소">
<input type="text" name="" value="" placeholder="상세주소 및 상세 건물명">
</dd>
</dl>
</div>
<div class="radio-wrap">
<input type="radio" id="rdo10" name="testrdo">
<label for="rdo10">기타</label>
<input type="text" placeholder="신청종류를 직접 입력해주세요.">
</div>
<div class="radio-wrap in-input">
<input type="radio" id="rdo6" name="testrdo">
<label for="rdo6"></label>
<div class="input-box clearfix">
<div class="input-wrap">
<input type="text">
<span class="unit">원</span>
</div>
<span>~</span>
<div class="input-wrap">
<input type="text">
<span class="unit">원</span>
</div>
</div>
<button class="cont-btn-s active">적용</button>
</div>
<div class="input-box clearfix">
<div class="input-wrap">
<input type="text">
<span class="unit">원</span>
</div>
<span>~</span>
<div class="input-wrap">
<input type="text">
<span class="unit">원</span>
</div>
</div>
]]>
selet / dropdown
전체
전체
전체
전체
전체
전체
전체
전체
전체
전체
전체
전체
전체
전체
전체
전체
전체
전체
전체
최대 70% 특가 ! 시그마 렌즈
BEST 시그마 필터 최대 70% 특가! 시그마 렌즈
이번주 핫템 시그마 플래시
이번주 놓치면 아까운 HOT 아이템
BEST 시그마 필터 최대 70% 특가! 시그마 렌즈
이번주 놓치면 아까운 HOT 아이템
옵션선택
Type1(품절) 입고알림 033 Elinchrom Power Pack 2400 + 2Lig hting Equipments PKG Type1(품절) 입고알림
<![CDATA[
<div class="select-area">
<select name="" id="">
<option value="">전체</option>
<option value="">전체</option>
<option value="">전체</option>
</select>
</div>
<div class="select-area bar">
<select name="" id="">
<option value="">전체</option>
<option value="">전체</option>
<option value="">전체</option>
</select>
</div>
<div class="select-area">
<select name="" id="" disabled>
<option value="">전체</option>
<option value="">전체</option>
<option value="">전체</option>
</select>
</div>
<br>
<div class="select-area bar w-full">
<select name="" id="">
<option value="">전체</option>
<option value="">전체</option>
<option value="">전체</option>
</select>
</div>
<div class="select-area w-full">
<select name="" id="">
<option value="">전체</option>
<option value="">전체</option>
<option value="">전체</option>
</select>
</div>
<div class="select-area border w-full">
<select name="" id="">
<option value="">전체</option>
<option value="">전체</option>
<option value="">전체</option>
</select>
</div>
<div class="dropbox-wrap">
<strong>전체</strong>
<ul class="options" style="display: none;">
<li>
<button class="op-tit">최대 70% 특가 ! 시그마 렌즈</button>
</li>
<li class="active">
<button class="op-tit">BEST 시그마 필터 최대 70% 특가! 시그마 렌즈</button>
</li>
<li>
<button class="op-tit">이번주 핫템 시그마 플래시</button>
</li>
<li>
<button class="op-tit">이번주 놓치면 아까운 HOT 아이템</button>
</li>
<li>
<button class="op-tit">BEST 시그마 필터 최대 70% 특가! 시그마 렌즈</button>
</li>
<li>
<button class="op-tit">이번주 놓치면 아까운 HOT 아이템</button>
</li>
</ul>
</div>
<div class="dropbox-wrap active">
<strong>옵션선택</strong>
<ul class="options" style="display: block;">
<li class="soldout"><span class="op-tit">Type1(품절)</span><button class="cont-btn-s btn-notification active">입고알림</button></li>
<li><button class="op-tit">033 Elinchrom Power Pack 2400 + 2Lig hting Equipments PKG</button></li>
<li class="soldout"><span class="op-tit">Type1(품절)</span><button class="cont-btn-s btn-notification">입고알림</button></li>
</ul>
</div>
]]>
checkbox
<![CDATA[
<div class="checkbox-area">
<div class="checkbox-wrap">
<input type="checkbox" id="chk1" name="chk-one"><label for="chk1"><span>아이디 저장</span></label>
</div>
<div class="checkbox-wrap">
<input type="checkbox" id="chk2" name="chk-one"><label for="chk2"><span>자동 로그인</span></label>
</div>
</div>
]]>
radio
라디오
<![CDATA[
<div class="radio-wrap">
<input type="radio" id="rdo1" name="testrdo">
<label for="rdo1">라디오</label>
</div>
<div class="radio-wrap">
<input type="radio" id="rdo2" name="testrdo" disabled>
<label for="rdo2">라디오</label>
</div>
<div>
<div class="radio-wrap">
<input type="radio" id="rdo3" name="testrdo">
<label for="rdo3">라디오</label>
</div>
<div class="radio-wrap">
<input type="radio" id="rdo4" name="testrdo">
<label for="rdo4">라디오</label>
</div>
</div>
<div class="radio-area border">
<div class="radio-wrap">
<input type="radio" id="rdo11" name="testrdo1">
<label for="rdo11" value="라디오">라디오</label>
</div>
<div class="radio-wrap">
<input type="radio" id="rdo12" name="testrdo1">
<label for="rdo12" value="라디오">라디오</label>
</div>
<div class="radio-wrap">
<input type="radio" id="rdo13" name="testrdo1">
<label for="rdo13" value="라디오">라디오</label>
</div>
</div>
]]>
달력
스와이퍼 버튼
2020년
2020년
2020년
2020년
1월
2월
3월
4월
5월
6월
7월
8월
9월
10월
11월
12월
2020년
2020년
2020년
2020년
1월
2월
3월
4월
5월
6월
7월
8월
9월
10월
11월
12월
1일
2일
3일
4일
5일
6일
7일
8일
9일
10일
11일
12일
tab
tab-radio
<![CDATA[
<ul class="radio-tab">
<li class="radio-wrap2">
<input type="radio" id="rdo1" name="rdotab">
<label for="rdo1"><span title="전체">전체</span></label>
</li>
<li class="radio-wrap2">
<input type="radio" id="rdo2" name="rdotab">
<label for="rdo2"><span title="SIGMA">SIGMA</span></label>
</li>
<li class="radio-wrap2">
<input type="radio" id="rdo3" name="rdotab">
<label for="rdo3"><span title="RICOH">RICOH</span></label>
</li>
<li class="radio-wrap2">
<input type="radio" id="rdo4" name="rdotab">
<label for="rdo4"><span title="ZEISS">ZEISS</span></label>
</li>
<li class="radio-wrap2">
<input type="radio" id="rdo5" name="rdotab">
<label for="rdo5"><span title="GITZO">GITZO</span></label>
</li>
<li class="radio-wrap2">
<input type="radio" id="rdo6" name="rdotab">
<label for="rdo6"><span title="Manfrotto">Manfrotto</span></label>
</li>
</ul>
]]>
btn
흰버튼
흰버튼
파란버튼
파란버튼
회색버튼
회색버튼
회색버튼(disabled)
회색버튼
회색버튼
회색버튼
라인버튼
라인버튼
라인버튼
배송지 변경
배송지 변경
배송지 변경
배송지 변경
찜등록
구매하기
찜등록
구매하기
찜등록
바로구매
찜등록
품절
찜등록
오픈알림
신청취소
후기쓰기
신청취소
후기쓰기
이달의 카드 혜택
?
상세보기
정품등록하기
정품등록하기
아니요, 괜찮습니다.
내 댓글보기
답글
이전글
다음글
사진등록
쿠폰받기
693 X 1500
<![CDATA[
<button class="cont-btn-full active">흰버튼</button>
<button class="cont-btn-full">흰버튼</button>
<button class="cont-btn-full ok-type active">파란버튼</button>
<button class="cont-btn-full ok-type">파란버튼</button>
<button class="cont-btn active">회색버튼</button>
<button class="cont-btn">회색버튼</button>
<button class="cont-btn h70 active">회색버튼</button>
<button class="cont-btn line-type active">라인버튼</button>
<button class="cont-btn line-type">라인버튼</button>
<button class="cont-btn line-type h70 active">라인버튼</button>
<div class="cont-btn-wrap">
<button class="cont-btn-half active">배송지 변경</button>
<button class="cont-btn-half ok-type active">배송지 변경</button>
</div>
<div class="cont-btn-wrap">
<button class="cont-btn-half">배송지 변경</button>
<button class="cont-btn-half ok-type">배송지 변경</button>
</div>
<div class="cont-btn-wrap">
<button class="btn-like outline-square">찜등록</button>
<button class="cont-btn-full ok-type active">구매하기</button>
</div>
<div class="cont-btn-wrap">
<button class="btn-like outline-square">찜등록</button>
<button class="cont-btn-full ok-type">구매하기</button>
</div>
<div class="btn-wrap">
<button class="cont-btn-half h70 active">신청취소</button>
<button class="cont-btn-half h70 line-type active">후기쓰기</button>
</div>
<button class="cont-btn-full h70 active">신청취소</button>
<button class="cont-btn-full h70 line-type active">후기쓰기</button>
<div class="cart-area">
<div class="thumbnail-box">
<div class="item-buy-btn">
<button class="btn-select">옵션변경</button>
<button class="btn-buy active">바로구매</button>
</div>
</div>
</div>
<button class="cont-btn-s active">이달의 카드 혜택</button>
<a href="#" class="detail-btn">상세보기</a>
<a href="#" class="btn-line btn-arr white">정품등록하기</a>
<a href="#" class="btn-line btn-arr">정품등록하기</a>
]]>
list
30MB 이하의 jpg, jpeg, png, heif, heic 파일만 첨부 가능합니다. 한줄이 넘어갈 경우
sajdlaskdj;adlksajsalkdj(50,000원 이상 구매 시 사용가능, 가입일로부터 1년이내 사용가능)
마이크로 렌즈마이크로 렌즈마이크로 렌즈마이크로 렌즈마이크로 렌즈마이크로 렌즈마이크로 렌즈마이크로 렌즈
접사 튜브
권장하는 이미지 크기는 200 x 200 입니다.
안내사항
장바구니 상품은 최대 30일 동안만 보관 됩니다.
장바구니에 담은 지 오래된 상품은 가격이나 혜택이 변동될 수 있으며 결제금액은 실제로 주문 시 쿠폰적용에 따라 가격이 변동될 수 있습니다.
포인트상품, 예약상품은 다른 상품과 주문할 수 없습니다.
link-box
toggle box
내용토글버튼
toggle box2
내용토글버튼
리스트 필터
전체
1200
최신순
조회순
좋아요순
낮은가격순
높은가격순
상세검색
리스트타입으로 보기
전체
1200
최신순
조회순
좋아요순
낮은가격순
높은가격순
상세검색
이미지타입으로 보기
스위치
스위치
스위치
<![CDATA[
<div class="switch-area">
<input type="checkbox" id="switch00" checked="checked">
<label for="switch00">스위치</label>
</div>
]]>
아코디언
이 약관은 세기P&C㈜가 운영하는 인터넷 쇼핑몰(이하 "쇼핑몰"이라 한다)에서 제공하는 인터넷 관련 서비스
(이하 "서비스"라 한다)를 이용함에 있어 쇼핑몰과 이용자의 권리·의무 및 책임사항을 규정함을 목적으로 합니다.
제2조(정의)
1. "쇼핑몰" 이란 세기P&C㈜가 재화 또는 용역을 이용자에게 제공하기 위하여 컴퓨터
이 약관은 세기P&C㈜가 운영하는 인터넷 쇼핑몰(이하 "쇼핑몰"이라 한다)에서 제공하는 인터넷 관련 서비스
(이하 "서비스"라 한다)를 이용함에 있어 쇼핑몰과 이용자의 권리·의무 및 책임사항을 규정함을 목적으로 합니다.
제2조(정의)
1. "쇼핑몰" 이란 세기P&C㈜가 재화 또는 용역을 이용자에게 제공하기 위하여 컴퓨터
이 약관은 세기P&C㈜가 운영하는 인터넷 쇼핑몰(이하 "쇼핑몰"이라 한다)에서 제공하는 인터넷 관련 서비스
(이하 "서비스"라 한다)를 이용함에 있어 쇼핑몰과 이용자의 권리·의무 및 책임사항을 규정함을 목적으로 합니다.
제2조(정의)
1. "쇼핑몰" 이란 세기P&C㈜가 재화 또는 용역을 이용자에게 제공하기 위하여 컴퓨터
이 약관은 세기P&C㈜가 운영하는 인터넷 쇼핑몰(이하 "쇼핑몰"이라 한다)에서 제공하는 인터넷 관련 서비스
(이하 "서비스"라 한다)를 이용함에 있어 쇼핑몰과 이용자의 권리·의무 및 책임사항을 규정함을 목적으로 합니다.
제2조(정의)
1. "쇼핑몰" 이란 세기P&C㈜가 재화 또는 용역을 이용자에게 제공하기 위하여 컴퓨터
이 약관은 세기P&C㈜가 운영하는 인터넷 쇼핑몰(이하 "쇼핑몰"이라 한다)에서 제공하는 인터넷 관련 서비스
(이하 "서비스"라 한다)를 이용함에 있어 쇼핑몰과 이용자의 권리·의무 및 책임사항을 규정함을 목적으로 합니다.
제2조(정의)
1. "쇼핑몰" 이란 세기P&C㈜가 재화 또는 용역을 이용자에게 제공하기 위하여 컴퓨터
<![CDATA[
<ul class="terms c-acco">
<li class="current">
<div class="acco-tit">
<div class="checkbox-wrap">
<input type="checkbox" id="chk1" name="chk-one"><label for="chk1"><span>세기 P&C 이용약관</span></label>
</div>
</div>
<p class="cont" style="display: block;">
이 약관은 세기P&C㈜가 운영하는 인터넷 쇼핑몰(이하 "쇼핑몰"이라 한다)에서 제공하는 인터넷 관련 서비스
(이하 "서비스"라 한다)를 이용함에 있어 쇼핑몰과 이용자의 권리·의무 및 책임사항을 규정함을 목적으로 합니다.
제2조(정의)
1. "쇼핑몰" 이란 세기P&C㈜가 재화 또는 용역을 이용자에게 제공하기 위하여 컴퓨터
이 약관은 세기P&C㈜가 운영하는 인터넷 쇼핑몰(이하 "쇼핑몰"이라 한다)에서 제공하는 인터넷 관련 서비스
(이하 "서비스"라 한다)를 이용함에 있어 쇼핑몰과 이용자의 권리·의무 및 책임사항을 규정함을 목적으로 합니다.
제2조(정의)
1. "쇼핑몰" 이란 세기P&C㈜가 재화 또는 용역을 이용자에게 제공하기 위하여 컴퓨터
</p>
</li>
<li>
<div class="acco-tit">
<div class="checkbox-wrap">
<input type="checkbox" id="chk2" name="chk-one"><label for="chk2"><span>개인정보 수집 이용에 관한 동의</span></label>
</div>
</div>
<p class="cont" style="display: none;">
이 약관은 세기P&C㈜가 운영하는 인터넷 쇼핑몰(이하 "쇼핑몰"이라 한다)에서 제공하는 인터넷 관련 서비스
(이하 "서비스"라 한다)를 이용함에 있어 쇼핑몰과 이용자의 권리·의무 및 책임사항을 규정함을 목적으로 합니다.
제2조(정의)
1. "쇼핑몰" 이란 세기P&C㈜가 재화 또는 용역을 이용자에게 제공하기 위하여 컴퓨터
</p>
</li>
<li>
<div class="acco-tit">
<div class="checkbox-wrap">
<input type="checkbox" id="chk3" name="chk-one"><label for="chk3"><span>개인정보 제3자 제공에 관한 동의</span></label>
</div>
</div>
<p class="cont" style="display: none;">
이 약관은 세기P&C㈜가 운영하는 인터넷 쇼핑몰(이하 "쇼핑몰"이라 한다)에서 제공하는 인터넷 관련 서비스
(이하 "서비스"라 한다)를 이용함에 있어 쇼핑몰과 이용자의 권리·의무 및 책임사항을 규정함을 목적으로 합니다.
제2조(정의)
1. "쇼핑몰" 이란 세기P&C㈜가 재화 또는 용역을 이용자에게 제공하기 위하여 컴퓨터
</p>
</li>
<li>
<div class="acco-tit">
<div class="checkbox-wrap">
<input type="checkbox" id="chk4" name="chk-one"><label for="chk4"><span>마케팅 수신 항목 동의(선택)</span></label>
</div>
</div>
<p class="cont" style="display: none;">
이 약관은 세기P&C㈜가 운영하는 인터넷 쇼핑몰(이하 "쇼핑몰"이라 한다)에서 제공하는 인터넷 관련 서비스
(이하 "서비스"라 한다)를 이용함에 있어 쇼핑몰과 이용자의 권리·의무 및 책임사항을 규정함을 목적으로 합니다.
제2조(정의)
1. "쇼핑몰" 이란 세기P&C㈜가 재화 또는 용역을 이용자에게 제공하기 위하여 컴퓨터
</p>
</li>
</ul>
]]>