UI Style Guide

Default

• 디폴트 버튼(height:45px) -> class="btn_basic"
• 작은 버튼(height:35px) -> class="btn_basic_sm"
• 큰 버튼(height:50px) -> class="btn_basic_large"
• 제일 큰 버튼(height:70px) -> class="btn_basic_big"

버튼 2개일 경우

• .btns_box 로 감싼다.

Hover Icon

• 찜/좋아요 -> class=""ico_spr_favor"
• 장바구니 -> class=""ico_spr_cart"
• 공유하기 -> class=""ico_spr_share"

Default Icon

• 인스타그램 -> class=""ico_spr_insta"
• 수정하기 -> class=""ico_spr_modity"
• 삭제하기 -> class=""ico_spr_delete"
• 닫기 -> class=""ico_spr_good"
• 설정 -> class=""ico_spr_setting"
• 주소 -> class=""ico_spr_address"
• 상품 여러개 보기 / 크게보기 -> class=""ico_spr_prdView"

• 1줄일 경우 -> class="ellipsis"
• 2줄일 경우 -> class="ellipsis_muti"

• 별점 큰 버전 -> class="star_wrap" width값으로 조절
• 별점 작은 버전 -> class=""star_wrap sm_type" width값으로 조절
• 막대 퍼센트 -> class="percent_wrap" height값으로 조절

• 항목 양쪽끝에 중앙 정렬 -> .ly_align_center 로 감싸기
• table 정렬 -> .tbl_box로 감싼 후 각 항목에 class=""tbl_item"
• 항목 자동 정렬 -> .flex_box로 감싼 후 각 항목에 class=""flex_item"
• 항목 나열 (border X) -> 각 항목에 class="cont_in_box"추가
• 항목 나열 (border O) -> 각 항목에 class="cont_line_box"추가
• 패딩 박스안에서 항목 full로 채우기 -> .cont_full 로 감싸기
• 흰색박스 나열 -> .cont_box 로 감싸기

Input

• input(default) -> class="inpt"
• input(인증완료)-> class="inp_ok" 더블클래스 추가
• input(에러) -> class="inp_error" 더블클래스 추가

Select

• class="selectbox" 추가

Calander

• class="date_box" 로 감싸기
• input class="inp_date" 추가

Check·Radio box

• label 에 이미지 적용

Paging

모달팝업

• button에 data-ly-btn 추가
• 펼쳐져야 할 팝업에 data-ly-type="content" 추가
• 펼쳐져야 할 팝업에 data-ly-target=""값 버튼과 동일하게 매핑

레이어 팝업

• button에 data-pop-btn 추가
• 펼쳐져야 할 팝업에 data-pop-target="" 추가
• 펼쳐져야 할 팝업에 data-pop-btn 값 버튼과 동일하게 매핑
• 닫기 버튼 클릭 data-pop-close 추가

• 1. 기본(default) - 박스여백 default 포함 -> cont_wrap로 감싼 후 안에 컨텐츠 각각 .cont_box 추가
• 2. 기본(default) + 항목마다 line으로 구분 될 경우 -> 1 + cont_wrap에 '.line_wrap' 더블클래스 추가
• 3. 기본(default) + 여백박스 내에서 영역 full로 채워져야 될 경우 ->
  1 + cont_box에 '.cont_full' 더블클래스 추가
  안에 컨텐츠 '.full_in_box'로 감싸기
• 4. 기본(default) + 여백박스 내에서 영역 full로 채워져야 될 경우 + 항목마다 line으로 구분 될 경우 ->
  1 + 2 +3