UI Framework

Grove UI Framework Guidelines

Color

코리아보드게임즈의 전용 색상은 코리아보드게임즈의 기능을 대표하는 중요한 요소입니다.
일관적인 색상의 사용은 코리아보드게임즈에 있어서 사용하기 쉽게끔 하는 중요한 역할을 하므로 반드시 색상 활용 기준을 준수해야 합니다.

Primary Color

코리아보드게임즈의 브랜드 색상입니다. 해당 색상은 주요색으로 지정되어 매체에 적절하게 사용합니다.
브랜드 간에는 색상을 혼용하거나 다른 컬러를 사용하지 않습니다.

Color Picker

Primary

#FB0119
Primary Vari

#FF6170

100

#fec9ce
200

#fd99a3
300 Primary Vari

#ff6170
400 Primary

#fb0119
500

#b60112
600

#80010d
900

#61000a
1100

#4d0008

// Default design palette
$bi-pri : #FB0119;
$bi-pri-var : #FF6170;

Secondary Color

Color Picker

Secondary

#1f69fa

100

#c2d6fe
200

#91b5fd
300

#5c92fb
400 Secondary

#1f69fa
500

#1851c2
600

#113886
900

#0c2963
1100

#09204c

Grayscale Color

그레이스케일 컬러는 계층 구조를 구별하는데 도움이 되도록 구성 요소 내에서 주로 사용됩니다.
회색 음영을 배경, 테두리 및 그림자로 사용하여 영역을 강조하거나 구분합니다.
일반 텍스트는 명암비가 4:5:1 이상이어야 합니다.

Color Picker

Gray_900

#111
Gray_800

#333
Gray_700

#444
Gray_600

#555
Gray_500

#666
Gray_400

#868686

Gray_300

#999
Gray_200

#ccc
Gray_100

#eee
Gray_50

#f5f5f5
Gray_10

#f9f9f9
White

#fff

Icon

Icons

디자인 요소의 역할이 아닌 사용자의 행동을 명확하게 함으로써 내용에 도움이 되는 아이콘을 사용합니다.
의도적인 목적과 의미가 없는 장식용 아이콘은 지양합니다.

Layout

실제 아이콘이 들어가는 라이브 영역과 아이콘 주위의 여유 공간을 두기 위한 패딩으로 구성합니다.

Size

사용하는 곳에 따라서 기본으로 16px, 24px, 32px, 48px 의 아이콘을 사용합니다.

· 16px : 최소 크기로 텍스트와 함께 사용하는 것을 권장합니다.

· 24px : 기본 크기로 버튼, 도움말 등에 사용합니다.

· 32px : 명확하게 정보 인지가 필요한 경우 사용합니다.

· 48px : 디테일한 묘사가 필요한 경우 사용합니다.

Linear

아이콘 이름을 복사한 후 class 이름으로 지정하세요. 새로운 아이콘을 추가하거나 기존 아이콘을 변경할 수도 있습니다.

- ico_search
- ico_like
- ico_cart
- ico_arr_right
- ico_add
- ico_minus
- ico_undo
- ico_down
- ico_close
- ico_acco
- ico_acco02
- ico_refresh

Forms

Text Fields

입력 필드는 프로그램에서 사용자가 직접 글자를 입력하는 공간을 뜻하며 검색, 정보 입력 등의 목적으로 사용됩니다.

Types

Default

<div class="inp_box"> <input type="text" id="" class="input_text" value="" placeholder="내용을 입력해 주세요."> </div>
소스 코드가 복사되었습니다.
Icon

 <div class="inp_box input_icon_left"> <i class="ico_zoom gray ico_24"></i> <input type="text" id="" class="input_text" value="" placeholder="내용을 입력해 주세요."> </div>  <div class="inp_box input_icon_right"> <input type="text" id="" class="input_text" value="" placeholder="내용을 입력해 주세요."> <i class="ico_zoom gray ico_24"></i> </div>
소스 코드가 복사되었습니다.
Button addon

<div class="inp_box with_btn"> <input type="text" id="" class="input_text" value="" placeholder="아이디를 입력해 주세요."> <button class="btn tf white">중복확인</button> </div>
소스 코드가 복사되었습니다.
Text Area

내용을 입력해주세요

0
/
200

<div class="input_writing_group"> <textarea name="" id="" placeholder="내용을 입력해주세요."></textarea> <div class="txt_count"> <p class="current zero">0</p> <span>/</span> <p class="total">1000</p> </div> </div>
소스 코드가 복사되었습니다.

States

Focused

<div class="inp_box"> <input type="text" id="" class="input_text" value="대한민국" placeholder="내용을 입력해 주세요."> </div>
소스 코드가 복사되었습니다.
Typing

<div class="inp_box"> <input type="text" id="" class="input_text" value="대한민국" placeholder="내용을 입력해 주세요."> </div>
소스 코드가 복사되었습니다.
Completed

<div class="inp_box"> <input type="text" id="" class="input_text" value="대한민국" placeholder="내용을 입력해 주세요."> </div>
소스 코드가 복사되었습니다.
Disabled

<div class="inp_box"> <input type="text" id="" class="input_text" value="대한민국" placeholder="내용을 입력해 주세요." disabled> </div>
소스 코드가 복사되었습니다.
Success

사용이 가능한 닉네임입니다.

<div class="inp_box vertical"> <input type="text" id="" class="input_text input_success" value="대한민국" placeholder="내용을 입력해 주세요."> <p class="txt_alert success">사용이 가능한 닉네임입니다.</p> </div>
소스 코드가 복사되었습니다.
Error

이미 사용 중인 닉네임입니다.

<div class="inp_box vertical"> <input type="text" id="" class="input_text input_error" value="대한민국" placeholder="내용을 입력해 주세요."> <p class="txt_alert error">이미 사용 중인 닉네임입니다.</p> </div>
소스 코드가 복사되었습니다.
Datepicker

<input type="text" id="datepicker" class="inp_cal">
소스 코드가 복사되었습니다.

Tables

Data list

배송정보

이름	홍길동
휴대폰 번호	010-1234-5678
성별	남성
생년월일	2001년 08월 16일

소스 코드가 복사되었습니다.

Board list

Total 300

이벤트

번호	제목	작성일	조회수
10	SNS 팔로우 연동에 따른 합격자 발표	2023.12.19	933
9	팔로우 연동에 따른 이벤트 팔로우 연동에 따른 이벤트 당첨자 발표 팔로우 연동에 따른 이벤트 팔로우 연동에 따른 이벤트 당첨자 발표팔로우 연동에 따른 이벤트 팔로우 연동에 따른 이벤트 당첨자 발표팔로우 연동에 따른 이벤트 팔로우 연동에 따른 이벤트 당첨자 발표	2023.12.19	933
8	SNS 팔로우 연동에 따른 합격자 발표	2023.12.19	933
7	팔로우 연동에 따른 이벤트 팔로우 연동에 따른 이벤트 당첨자 발표	2023.12.19	933

1 2 3 4 5

<div class="table_top">
  <div class="total">
    Total
    <span>300</span>
  </div>
  <a href="#n" class="btn white auto">이벤트</a>
</div>
<div class="table board_list">
  <table>
    <colgroup>
      <col width="120">
      <col>
      <col width="150">
      <col width="150">
    </colgroup>
    <thead>
      <tr>
        <th>번호</th>
        <th>제목</th>
        <th>작성일</th>
        <th>조회수</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>10</td>
        <td class="left title">
          <a href="#n" class="txt_view">
            SNS 팔로우 연동에 따른 합격자 발표<i class="ico_text_new"></i>
          </a>
        </td>
        <td class="date c_gray9">
          2023.12.19
        </td>
        <td class="count c_gray9">
          933
        </td>
      </tr>
      <tr>
        <td>9</td>
        <td class="left title">
          <a href="#n" class="txt_view">
            팔로우 연동에 따른 이벤트 팔로우 연동에 따른 이벤트 당첨자 발표 팔로우 연동에 따른 이벤트 팔로우 연동에 따른 이벤트 당첨자 발표팔로우 연동에 따른 이벤트 팔로우 연동에 따른 이벤트 당첨자 발표팔로우 연동에 따른 이벤트 팔로우 연동에 따른 이벤트 당첨자 발표<i class="ico_text_new"></i>
          </a>
        </td>
        <td class="date c_gray9">
          2023.12.19
        </td>
        <td class="count c_gray9">
          933
        </td>
      </tr>
      <tr>
        <td>8</td>
        <td class="left title">
          <a href="#n" class="txt_view">
            SNS 팔로우 연동에 따른 합격자 발표<i class="ico_text_new"></i>
          </a>
        </td>
        <td class="date c_gray9">
          2023.12.19
        </td>
        <td class="count c_gray9">
          933
        </td>
      </tr>
      <tr>
        <td>7</td>
        <td class="left title">
          <a href="#n" class="txt_view">
            팔로우 연동에 따른 이벤트 팔로우 연동에 따른 이벤트 당첨자 발표<i class="ico_text_new"></i>
          </a>
        </td>
        <td class="date c_gray9">
          2023.12.19
        </td>
        <td class="count c_gray9">
          933
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="pagination" aria-label="Page Navigation">
  <a href="javascript:void(0);" class="arr ico_page_first"></a>
  <a href="javascript:void(0);" class="arr ico_page_prev"></a>
  <a href="javascript:void(0);" class="page_link active"><span>1</span></a>
  <a href="javascript:void(0);" class="page_link"><span>2</span></a>
  <a href="javascript:void(0);" class="page_link"><span>3</span></a>
  <a href="javascript:void(0);" class="page_link"><span>4</span></a>
  <a href="javascript:void(0);" class="page_link"><span>5</span></a>
  <a href="javascript:void(0);" class="arr ico_page_next"></a>
  <a href="javascript:void(0);" class="arr ico_page_last"></a>
</div>

소스 코드가 복사되었습니다.

Form Table ( ul > li )
주 결제 수단 선택
지금 선택하신 결제수단을 다음에도 사용

받으시는 분

휴대폰 번호

배송지 주소
<div class="form_head"> <strong class="tit">주 결제 수단 선택</strong> <div class="check_box color3"> <input type="checkbox" id="check-1121d" name="check-122d2"> <label for="check-1121d">지금 선택하신 결제수단을 다음에도 사용</label> </div> </div> <form action="" class="form_wrap"> <ul class="form_list"> <li class="a_center"> <label for="f2">받으시는 분</label> <div class="cont f_row"> <div class="inp_box w339"> <input class="input_text" type="text" name="" id="f2" placeholder="이름을 입력해주세요"> </div> </div> </li> <li class="a_center"> <label for="f3">휴대폰 번호</label> <div class="cont"> <div class="inp_box w339"> <input class="input_text" type="text" name="" id="f3" placeholder="전화번호를 입력해주세요"> </div> </div> </li> <li> <label for="f4">배송지 주소</label> <div class="cont"> <div class="inp_address"> <div class="inp_box"> <input class="input_text" type="text" name="" id="f4" placeholder="우편번호찾기"> <button type="button" class="btn tf white">우편번호 찾기</button> </div> <div class="inp_box"> <input class="input_text" type="text" name="" id="f5"> </div> <div class="inp_box"> <input class="input_text" type="text" name="" id="f6" placeholder="상세주소를 입력해주세요"> </div> </div> </div> </li> </ul> </form>
소스 코드가 복사되었습니다.

Badge

Default

쿠폰 10% 무료배송 프로모션 판매중지 품절

<div class="badge_wrap"> <span class="badge bg_pink">쿠폰 10%</span> <span class="badge">무료배송</span> <span class="badge bg_gray">Sold out</span> </div>
소스 코드가 복사되었습니다.
콘텐츠 카테고리 뱃지

뉴스 이야기 갤러리 웹툰 영상 게임 소개 보드게임 이야기 추천게임 집중탐구 인터뷰 코리아보드게임즈 그래비트랙스 데굴데굴 STUDIO 크리에이터

<div class="badge_wrap"> <span class="badge badge_cate_news">뉴스</span> <span class="badge badge_cate_story">이야기</span> <span class="badge badge_cate_gallery">갤러리</span> <span class="badge badge_cate_webtoon">웹툰</span> <span class="badge badge_cate_video">영상</span> <span class="badge badge_cate_intro">게임 소개</span> <span class="badge badge_cate_board">보드게임 이야기</span> <span class="badge badge_cate_recom">추천게임</span> <span class="badge badge_cate_research">집중탐구</span> <span class="badge badge_cate_interview">인터뷰</span> <span class="badge badge_cate_kobo">코리아보드게임즈</span> <span class="badge badge_cate_gravitrax">그래비트랙스</span> <span class="badge badge_cate_studio">데굴데굴 STUDIO</span> <span class="badge badge_cate_creator">크리에이터</span> </div>
소스 코드가 복사되었습니다.

File Upload

사진 업로드

50MB이하의 이미지 파일 또는 동영상 파일만 첨부 가능하며,최대 5개까지 등록 가능

<div class="uploader_wrap"> <p class="info">50MB이하의 이미지 파일 또는 동영상 파일만 첨부 가능하며,최대 5개까지 등록 가능</p> <div class="inner"> <input type="text" class="img_upload" value=""> <input type="text" class="img_upload" value=""> <input type="text" class="img_upload" value=""> <input type="text" class="img_upload" value=""> <input type="text" class="img_upload" value=""> </div> </div>
소스 코드가 복사되었습니다.

Accordion

Default : 각각 제어

<div class="acco_wrap"> <div class="acco active"> <div class="acco_head"> <strong class="tit">아코디언 타이틀</strong> <button type="button" class="btn_acco"><i class="ico_acco m"></i></button> </div> <div class="acco_cont"> 아코디언 컨텐츠 </div> </div> <div class="acco"> <div class="acco_head"> <strong class="tit">아코디언 타이틀</strong> <button type="button" class="btn_acco"><i class="ico_acco m"></i></button> </div> <div class="acco_cont"> 아코디언 컨텐츠 </div> </div> </div>
소스 코드가 복사되었습니다.
Type 2 :전체 제어

<div class="acco_wrap type2"> <div class="acco active"> <div class="acco_head"> <strong class="tit">아코디언 타이틀</strong> <button type="button" class="btn_acco"><i class="ico_acco m"></i></button> </div> <div class="acco_cont"> 아코디언 컨텐츠 </div> </div> <div class="acco"> <div class="acco_head"> <strong class="tit">아코디언 타이틀</strong> <button type="button" class="btn_acco"><i class="ico_acco m"></i></button> </div> <div class="acco_cont"> 아코디언 컨텐츠 </div> </div> </div>
소스 코드가 복사되었습니다.

Layout

Content Card List (매거진 리뉴얼 추가)
- 입문자를 위한 추천 게임 입문자를 위한 추천 게임 입문자를 위한 추천 게임
  입문자를 위한 추천 게임 - 오랜 시간을 견딘 명작 전략 게임 입문자를 위한 추천 게임입문자를 위한 추천 게임입문자를 위한 추천 게임
  
  뉴스
  
  #커피 러시
  
  #2024 타불라 어워즈
  
  #게임 페스티벌
- 입문자를 위한 추천 게임 입문자를 위한 추천 게임 입문자를 위한 추천 게임
  입문자를 위한 추천 게임 - 오랜 시간을 견딘 명작 전략 게임 입문자를 위한 추천 게임입문자를 위한 추천 게임입문자를 위한 추천 게임
  
  뉴스
  
  #커피 러시
  
  #2024 타불라 어워즈
  
  #게임 페스티벌
<ul class="content_card_list"> <li class="content_card"> <a href="#"> <div class="card_img_wrap"> <div class="card_img"> <img src="../img/@img_kbgame_01.png" alt=""> </div> </div> <div class="card_txt_wrap"> <strong class="card_tit">입문자를 위한 추천 게임 입문자를 위한 추천 게임 입문자를 위한 추천 게임</strong> <p class="card_desc">입문자를 위한 추천 게임 - 오랜 시간을 견딘 명작 전략 게임 입문자를 위한 추천 게임입문자를 위한 추천 게임입문자를 위한 추천 게임</p> <div class="card_btn_wrap"> <div class="badge_wrap"> <span class="badge badge_cate_news">뉴스</span> </div> <button type="button" class="card_btn btn_bookmark"></button> <button type="button" class="card_btn btn_share" onclick="openPopup('#magazineSharePop')"></button> </div> <div class="card_hashtag_wrap"> <p class="card_hashtag">#커피 러시</p> <p class="card_hashtag">#2024 타불라 어워즈</p> <p class="card_hashtag">#게임 페스티벌</p> </div> </div> </a> </li> </ul>
Category Navigation (메인 카테고리 내비게이션)
보드게임

그래비트랙스
<section class="cate_nav"> <ul> <li> <a href="#" onclick=""> <div class="img_wrap pc"> <img src="https://cdnfile.koreaboardgames.com/upload/2025-03-28/omlzRA8Gb84j5ezY6ZBO.gif" alt=""> <img src="https://cdnfile.koreaboardgames.com/upload/2025-03-28/sGToLw69dpJUykCdIeSy.gif" class="over" alt=""> <img src="https://cdnfile.koreaboardgames.com/upload/2025-03-28/sGToLw69dpJUykCdIeSy.gif" class="on" alt=""> </div> <div class="img_wrap mo"> <img src="https://cdnfile.koreaboardgames.com/upload/2025-03-28/fhJj6mxiLxBeVkAFfI5x.gif" alt=""> <img src="https://cdnfile.koreaboardgames.com/upload/2025-03-28/41vE9q5yFiOGooo47G6G.gif" class="over" alt=""> <img src="https://cdnfile.koreaboardgames.com/upload/2025-03-28/41vE9q5yFiOGooo47G6G.gif" class="on" alt=""> </div> <p style="color:#333333">보드게임</p> </a> </li> </ul> </section>
소스 코드가 복사되었습니다.
New Category Navigation (매거진 리뉴얼 추가 - 메인 카테고리 내비게이션)
최대6자까지

패밀리플러스
<section class="sec_cate_nav"> <ul class="new_cate_nav"> <li class="cate_nav_item"> <a href="#" onclick=""> <div class="cate_nav_img"> <img src="https://cdnfile.koreaboardgames.com/upload/2025-03-28/guSX2oD7eqRPJOcXiiDY.jpg" alt=""> </div> <p class="cate_nav_txt">그래비트랙스</p> </a> </li> <li class="cate_nav_item"> <a href="#" onclick=""> <div class="cate_nav_img"> <img src="https://cdnfile.koreaboardgames.com/upload/2025-03-28/guSX2oD7eqRPJOcXiiDY.jpg" alt=""> </div> <p class="cate_nav_txt">그래비트랙스</p> </a> </li> </ul> </section>
소스 코드가 복사되었습니다.
최근 본 상품

최근 본 상품을 확인해보세요

딕싯 디즈니 100주년 기념판
(프로모션 증정)

40%
48,300원

69,000

4.8
56개

햄버거 타이쿤

30%
27,300원

39,000

4.8
247개

햄버거 타이쿤111

30%
27,300원

39,000

4.8
247개

햄버거 타이쿤

30%
27,300원

39,000

4.8
247개

쿠폰 10% 무료배송

아컴호러 카드 지구의 끝자락: 캠페인 확장 아컴호러 카드 지구의 끝자락: 캠페인 확장

30%
27,300원

39,000

4.8
247개

쿠폰 10% 무료배송

<section class="prdlist_wrap pos_btm"> <div class="cate_tit">최근 본 상품을 확인해보세요 </div> <div class="swiper prdlist_conts"> <div class="swiper-wrapper"> <div class="swiper-slide prd_list_item"> <a href="#n"> <div class="prd_img_wrap"> <div class="util_side"> <button type="button" class="btn_like" onclick="like(this);"></button> </div> <div class="item_img"><img src="../../img/@prod_sample01.png" alt=""></div> </div> <div class="prd_item_wrap"> <div class="item_title">딕싯 디즈니 100주년 기념판<br> (프로모션 증정)</div> <div class="prd_price"> <span class="discount">40%</span> <p class="item_price"> <span>48,300</span><em>원</em> </p> <p class="origin_price">69,000</p> </div> <div class="prd_review"> <img src="../../img/icon/ico_star_def.svg" class="item_rate" alt=""> <p class="item_rate_txt">4.8</p> <span class="item_rate_num">56개</span> </div> </div> </a> </div> <div class="swiper-slide prd_list_item"> <a href="#n"> <div class="prd_img_wrap"> <div class="util_side"> <button type="button" class="btn_like" onclick="like(this);"></button> </div> <div class="item_img"><img src="../../img/@prod_sample02.png" alt=""></div> </div> <div class="prd_item_wrap"> <div class="item_title">햄버거 타이쿤</div> <div class="prd_price"> <span class="discount">30%</span> <p class="item_price"> <span>27,300</span><em>원</em> </p> <p class="origin_price">39,000</p> </div> <div class="prd_review"> <img src="../../img/icon/ico_star_def.svg" class="item_rate" alt=""> <p class="item_rate_txt">4.8</p> <span class="item_rate_num">247개</span> </div> </div> </a> </div> <div class="swiper-slide prd_list_item"> <a href="#n"> <div class="prd_img_wrap"> <div class="util_side"> <button type="button" class="btn_like" onclick="like(this);"></button> </div> <div class="item_img"><img src="../../img/@prod_sample03.png" alt=""></div> </div> <div class="prd_item_wrap"> <div class="item_title">햄버거 타이쿤111</div> <div class="prd_price"> <span class="discount">30%</span> <p class="item_price"> <span>27,300</span><em>원</em> </p> <p class="origin_price">39,000</p> </div> <div class="prd_review"> <img src="../../img/icon/ico_star_def.svg" class="item_rate" alt=""> <p class="item_rate_txt">4.8</p> <span class="item_rate_num">247개</span> </div> </div> </a> </div> <div class="swiper-slide prd_list_item"> <a href="#n"> <div class="prd_img_wrap"> <div class="util_side"> <button type="button" class="btn_like" onclick="like(this);"></button> </div> <div class="item_img"><img src="../../img/@prod_sample04.png" alt=""></div> </div> <div class="prd_item_wrap"> <div class="item_title">햄버거 타이쿤</div> <div class="prd_price"> <span class="discount">30%</span> <p class="item_price"> <span>27,300</span><em>원</em> </p> <p class="origin_price">39,000</p> </div> <div class="prd_review"> <img src="../../img/icon/ico_star_def.svg" class="item_rate" alt=""> <p class="item_rate_txt">4.8</p> <span class="item_rate_num">247개</span> </div> <div class="badge_wrap"> <span class="badge bg_pink">쿠폰 10%</span> <span class="badge">무료배송</span> </div> </div> </a> </div> <div class="swiper-slide prd_list_item"> <a href="#n"> <div class="prd_img_wrap"> <div class="util_side"> <button type="button" class="btn_like" onclick="like(this);"></button> </div> <div class="item_img"><img src="../../img/@prod_sample05.png" alt=""></div> </div> <div class="prd_item_wrap"> <div class="item_title">아컴호러 카드 지구의 끝자락: 캠페인 확장 아컴호러 카드 지구의 끝자락: 캠페인 확장</div> <div class="prd_price"> <span class="discount">30%</span> <p class="item_price"> <span>27,300</span><em>원</em> </p> <p class="origin_price">39,000</p> </div> <div class="prd_review"> <img src="../../img/icon/ico_star_def.svg" class="item_rate" alt=""> <p class="item_rate_txt">4.8</p> <span class="item_rate_num">247개</span> </div> <div class="badge_wrap"> <span class="badge bg_pink">쿠폰 10%</span> <span class="badge">무료배송</span> </div> </div> </a> </div> </div> <div class="swiper_prev"></div> <div class="swiper_next"></div> </div> </section>
소스 코드가 복사되었습니다.
Game List
- 24일 남음
  입문자를 위한 추천 게임 입문자를 위한 추천 게임 입문자를 위한 추천 게임
  입문자를 위한 추천 게임 - 오랜 시간을 견딘 명작 전략 게임 입문자를 위한 추천 게임입문자를 위한 추천 게임입문자를 위한 추천 게임
  
  #그림그리기
  
  #친목
  
  #1~6명
<ul class="game_list"> <li> <a href="#"> <div class="img_wrap"> <div class="img"> <img src="../img/@img_kbgame_01.png" alt=""> </div> <span class="state">24일 남음</span> </div> <strong class="tit">입문자를 위한 추천 게임 입문자를 위한 추천 게임 입문자를 위한 추천 게임</strong> <p class="txt">입문자를 위한 추천 게임 - 오랜 시간을 견딘 명작 전략 게임 입문자를 위한 추천 게임입문자를 위한 추천 게임입문자를 위한 추천 게임</p> <div class="hashtag_list"> <p>#그림그리기</p> <p>#친목</p> <p>#1~6명</p> </div> </a> </li> </ul>
Game List - Type_spc
24일 남음
<div class="game_list_wrap type_spc"> <ul class="game_list"> <li> <a href="#"> <div class="img_wrap"> <div class="img"> <picture> <source srcset="../img/@img_kbgame_01.jpg" media="all and (min-width: 834px)"> <source srcset="../img/@img_kbgame_01_m.jpg" media="all and (max-width: 834px)"> <img src="../img/@img_kbgame_01.jpg" alt=""> </picture> </div> <span class="state">24일 남음</span> </div> </a> </li> </ul> </div>

Button

목록보기 버튼(매거진 리뉴얼 추가)

<div class="btn_wrap full"> <button type="button" class="btn_golist" onclick=""><i class="ico_board_list sm"></i>목록보기</button> </div>
소스 코드가 복사되었습니다.
Load More Button(콘텐츠 더보기 버튼 - 매거진 리뉴얼 추가)

<div class="btn_wrap full"> <button type="button" class="btn_load_more" onclick=""><span class="hide">더보기</span></button> </div>
소스 코드가 복사되었습니다.
Underline Text

a태그 a태그

<button type="button" class="btn_line_txt">button</button> <button type="button" class="btn_line_txt" disabled>button</button>  <a href="#n" class="btn_line_txt">a태그</a> <a href="#n" class="btn_line_txt disabled">a태그</a> 
소스 코드가 복사되었습니다.
Underline Text + Icon

a태그 a태그

<button type="button" class="btn_line_txt">button<i class="ico_arr_right sm"></i></button> <button type="button" class="btn_line_txt" disabled>button<i class="ico_arr_right sm"></i></button>  <a href="#n" class="btn_line_txt">a태그<i class="ico_undo sm"></i></a> <a href="#n" class="btn_line_txt disabled">a태그<i class="ico_undo sm"></i></a> 
소스 코드가 복사되었습니다.
Img Button

<button type="button" class="btn_delete"></button>
소스 코드가 복사되었습니다.
30 Button

<button type="button" class="btn white xsm">버튼명</button> <button type="button" class="btn white xsm" disabled>버튼명</button> <button type="button" class="btn gray_6 xsm">버튼명</button> <button type="button" class="btn gray_6 xsm" disabled>버튼명</button> <button type="button" class="btn gray_c xsm">버튼명</button> <button type="button" class="btn gray_c xsm" disabled>버튼명</button> <button type="button" class="btn pri_var xsm">버튼명</button> <button type="button" class="btn pri_var xsm" disabled>버튼명</button> <button type="button" class="btn pri xsm">버튼명</button> <button type="button" class="btn pri xsm" disabled>버튼명</button>
소스 코드가 복사되었습니다.
30 Button : Focus

<button type="button" class="btn gray_c xsm focus">버튼명</button> 
소스 코드가 복사되었습니다.
30 Button + Icon

<button type="button" class="btn gray_6 xsm"><i class="ico_down sm"></i>쿠폰받기</button> <button type="button" class="btn gray_6 xsm" disabled><i class="ico_down sm"></i>쿠폰받기</button> <button type="button" class="btn gray_c xsm"><i class="ico_down sm gray_6"></i>쿠폰받기</button> <button type="button" class="btn gray_c xsm" disabled><i class="ico_down sm gray_6"></i>쿠폰받기</button> <button type="button" class="btn pri_var xsm"><i class="ico_down sm white"></i>쿠폰받기</button> <button type="button" class="btn pri_var xsm" disabled><i class="ico_down sm white"></i>쿠폰받기</button>
소스 코드가 복사되었습니다.
40 Button

버튼명 버튼명

<a href="#n" class="btn sm gray_c">버튼명</a> <a href="#n" class="btn sm gray_c disabled">버튼명</a> 
소스 코드가 복사되었습니다.
48 Button [Default]

<button type="button" class="btn white">버튼명</button> <button type="button" class="btn white" disabled>버튼명</button> <button type="button" class="btn pri">버튼명</button> <button type="button" class="btn pri" disabled>버튼명</button>
소스 코드가 복사되었습니다.
48 Button Width Auto ( padding: 0 16px )

<button type="button" class="btn tf white">중복확인</button> 
소스 코드가 복사되었습니다.
48 Button Width Auto ( padding: 0 40px )

버튼명 버튼명 버튼명

<a href="#n" class="btn pri auto">버튼명</a> 
소스 코드가 복사되었습니다.
52 Button

<button class="btn gray_fill_6 md">전체쿠폰 다운로드</button> <button class="btn gray_6 txt_gray_6 md">쿠폰 등록</button>
소스 코드가 복사되었습니다.
56 Button

상품명 상품명

<a href="#n" class="btn pri lg">상품명</a> <a href="#n" class="btn white lg">상품명</a>
소스 코드가 복사되었습니다.
Button Wrap

상품명 상품명

<div class="btn_wrap"> <a href="#n" class="btn pri lg">상품명</a> <a href="#n" class="btn white lg">상품명</a> </div>
소스 코드가 복사되었습니다.
Full Button

상품명 상품명

<div class="btn_wrap full">  <a href="#n" class="btn pri lg">상품명</a> <a href="#n" class="btn white lg">상품명</a> </div>
소스 코드가 복사되었습니다.
Mobile Full Button

마이페이지 쇼핑하기

<div class="btn_wrap mo_full">  <a href="#n" class="btn pri lg">마이페이지</a> <a href="#n" class="btn white lg">쇼핑하기</a> </div>
소스 코드가 복사되었습니다.
Mobile Bottom Fixed

<div class="btn_wrap full pos_btm"> <button type="button" class="btn pri lg">버튼명</button> </div>
소스 코드가 복사되었습니다.

Tab

Tab Menu List (탭메뉴 리스트 - 매거진 리뉴얼 추가)
- 전체 콘텐츠
- 많이 본 콘텐츠
- 나의 콘텐츠
<section class="prdlist_wrap"> <ul class="item_tag_list"> <li> <input type="radio" id="item_tag-11" name="prod-item-2" checked> <label for="item_tag-11">방탈출 세계로의 초대</label> </li> <li> <input type="radio" id="item_tag-12" name="prod-item-2"> <label for="item_tag-12">패밀리 보드게임</label> </li> <li> <input type="radio" id="item_tag-13" name="prod-item-2"> <label for="item_tag-13">아컴호러 시리즈</label> </li> <li> <input type="radio" id="item_tag-14" name="prod-item-2"> <label for="item_tag-14">스타워즈 시리즈</label> </li> </ul> </section>
소스 코드가 복사되었습니다.
사용가능 쿠폰

발급완료 쿠폰

내용 1

내용 2
<div class="tab_wrap detail"> <ul class="tab_menu"> <li class="tab_list current" data-tab="tab110">사용가능 쿠폰</li> <li class="tab_list" data-tab="tab120">발급완료 쿠폰</li> </ul> <div class="tab_cont"> <div id="tab110" class="tab_cont_item current"> 내용 1 </div> <div id="tab120" class="tab_cont_item"> 내용 2 </div> </div> </div>
소스 코드가 복사되었습니다.

Select

<select class="ui_select"> <option value="통신사">통신사</option> <option value="SKT">SKT</option> <option value="KT">KT</option> <option value="LG U+">LG U+</option> <option value="알뜰폰">알뜰폰</option> </select>
소스 코드가 복사되었습니다.

Coupon

500,000원

장바구니 쿠폰

1만원 이상 구매 시 최대 5천원

500,000원

장바구니 쿠폰

1만원 이상 구매 시 최대 5천원

발급
완료

500,000원

장바구니 쿠폰

1만원 이상 구매 시 최대 5천원

500,000원

장바구니 쿠폰

1만원 이상 구매 시 최대 5천원

발급
완료

500,000원

장바구니 쿠폰

1만원 이상 구매 시 최대 5천원

500,000원

장바구니 쿠폰

1만원 이상 구매 시 최대 5천원

발급
완료

500,000원

장바구니 쿠폰

1만원 이상 구매 시 최대 5천원

500,000원

장바구니 쿠폰

1만원 이상 구매 시 최대 5천원

발급
완료

500,000원

장바구니 쿠폰

1만원 이상 구매 시 최대 5천원

500,000원

장바구니 쿠폰

1만원 이상 구매 시 최대 5천원

발급
완료

500,000원

장바구니 쿠폰

1만원 이상 구매 시 최대 5천원

500,000원

장바구니 쿠폰

1만원 이상 구매 시 최대 5천원

발급
완료

 <div class="comm_coupon_cont type_a01"> <div class="cp_price"> <strong>500,000</strong><em>원</em> </div> <dl class="cp_desc"> <dt>장바구니 쿠폰</dt> <dd>1만원 이상 구매 시 최대 5천원</dd> </dl>  </div> <div class="comm_coupon_cont type_a01"> <div class="cp_price"> <strong>500,000</strong><em>원</em> </div> <dl class="cp_desc"> <dt>장바구니 쿠폰</dt> <dd>1만원 이상 구매 시 최대 5천원</dd> </dl> <p class="status">발급<br>완료</p> </div> <div class="comm_coupon_cont type_a02"> <div class="cp_price"> <strong>500,000</strong><em>원</em> </div> <dl class="cp_desc"> <dt>장바구니 쿠폰</dt> <dd>1만원 이상 구매 시 최대 5천원</dd> </dl>  </div> <div class="comm_coupon_cont type_a02"> <div class="cp_price"> <strong>500,000</strong><em>원</em> </div> <dl class="cp_desc"> <dt>장바구니 쿠폰</dt> <dd>1만원 이상 구매 시 최대 5천원</dd> </dl> <p class="status">발급<br>완료</p> </div>  <div class="comm_coupon_cont type_b01"> <div class="cp_price"> <strong>500,000</strong><em>원</em> </div> <dl class="cp_desc"> <dt>장바구니 쿠폰</dt> <dd>1만원 이상 구매 시 최대 5천원</dd> </dl>  </div> <div class="comm_coupon_cont type_b01"> <div class="cp_price"> <strong>500,000</strong><em>원</em> </div> <dl class="cp_desc"> <dt>장바구니 쿠폰</dt> <dd>1만원 이상 구매 시 최대 5천원</dd> </dl> <p class="status">발급<br>완료</p> </div> <div class="comm_coupon_cont type_b02"> <div class="cp_price"> <strong>500,000</strong><em>원</em> </div> <dl class="cp_desc"> <dt>장바구니 쿠폰</dt> <dd>1만원 이상 구매 시 최대 5천원</dd> </dl>  </div> <div class="comm_coupon_cont type_b02"> <div class="cp_price"> <strong>500,000</strong><em>원</em> </div> <dl class="cp_desc"> <dt>장바구니 쿠폰</dt> <dd>1만원 이상 구매 시 최대 5천원</dd> </dl> <p class="status">발급<br>완료</p> </div>  <div class="comm_coupon_cont type_c01"> <div class="cp_price"> <strong>500,000</strong><em>원</em> </div> <dl class="cp_desc"> <dt>장바구니 쿠폰</dt> <dd>1만원 이상 구매 시 최대 5천원</dd> </dl>  </div> <div class="comm_coupon_cont type_c01"> <div class="cp_price"> <strong>500,000</strong><em>원</em> </div> <dl class="cp_desc"> <dt>장바구니 쿠폰</dt> <dd>1만원 이상 구매 시 최대 5천원</dd> </dl> <p class="status">발급<br>완료</p> </div> <div class="comm_coupon_cont type_c02"> <div class="cp_price"> <strong>500,000</strong><em>원</em> </div> <dl class="cp_desc"> <dt>장바구니 쿠폰</dt> <dd>1만원 이상 구매 시 최대 5천원</dd> </dl>  </div> <div class="comm_coupon_cont type_c02"> <div class="cp_price"> <strong>500,000</strong><em>원</em> </div> <dl class="cp_desc"> <dt>장바구니 쿠폰</dt> <dd>1만원 이상 구매 시 최대 5천원</dd> </dl> <p class="status">발급<br>완료</p> </div>
소스 코드가 복사되었습니다.

Color

Primary Color

Color Picker

Secondary Color

Color Picker

Grayscale Color

Color Picker

Icon

Icons

Layout

Size

Linear

Forms

Text Fields

Types

Default

Icon

Button addon

Text Area

States

Focused

Typing

Completed

Disabled

Success

Error

Datepicker

Checkbox/Radio

Checkbox

Radio

Group

label 컬러 #333

Tables

Data list

Board list

Form Table ( ul > li )

Badge

Default

콘텐츠 카테고리 뱃지

File Upload

사진 업로드

Accordion

Default : 각각 제어

Type 2 :전체 제어

Layout

Content Card List (매거진 리뉴얼 추가)

Category Navigation (메인 카테고리 내비게이션)

New Category Navigation (매거진 리뉴얼 추가 - 메인 카테고리 내비게이션)

최근 본 상품

Game List

Game List - Type_spc

Button

목록보기 버튼(매거진 리뉴얼 추가)

Load More Button(콘텐츠 더보기 버튼 - 매거진 리뉴얼 추가)

Underline Text

Underline Text + Icon

Img Button

30 Button

30 Button : Focus

30 Button + Icon

40 Button

48 Button [Default]

48 Button Width Auto ( padding: 0 16px )

48 Button Width Auto ( padding: 0 40px )

52 Button

56 Button

Button Wrap

Full Button

Mobile Full Button

Mobile Bottom Fixed

Tab

Tab Menu List (탭메뉴 리스트 - 매거진 리뉴얼 추가)

Select

Coupon