https://jm6616.safetown.co.kr/?quick=nxw-btn-20
"quick="뒤에 항목 코드를 넣으면됨 _테스트 링크_
네이밍 설명
nxw = NeXtbiz Web / 올리사이트(유저)
btn = button / 버튼
ipt = input / 인풋
slt = selectbox / 셀렉트 박스
rdo = radio / 라디오
chk = checkbox / 체크박스
tog = toggle / 토글
tab = tab / 탭 (미사용)
전체 공통 CSS
[ 전체공통 SIZE GUIDE ]
클래스 [ nxw-wf ]
width : 100%
클래스 [ nxw-wa ]
width : auto
공통 플랙스 클래스
클래스 [ nxw-flex2 ]
flex: 1 1 calc(50% - 8px);
max-width: calc(50% - 8px);
box-sizing: border-box;
클래스 [ nxw-flex3 ]
flex: 1 1 calc(33.3% - 8px);
max-width: calc(33.3% - 8px);
box-sizing: border-box;
클래스 [ nxw-flex4 ]
flex: 1 1 calc(25% - 8px);
max-width: calc(25% - 8px);
box-sizing: border-box;
클래스 [ nxw-flex5 ]
flex: 1 1 calc(20% - 8px);
max-width: calc(20% - 8px);
box-sizing: border-box;
[ BUTTON STYLE ]
[ BUTTON SIZE GUIDE ]
클래스 [ default ]
width : 100%
클래스 [ default ]
width : 100%
클래스 [ .nxw-xs ]
max-width : 미정
클래스 [ .nxw-sm ]
max-width : 80px
클래스 [ .nxw-md ]
max-width : 120px
클래스 [ .nxw-lg ]
max-width : 미정
클래스 [ .nxw-mxs ]
min-width : 미정
클래스 [ .nxw-msm ]
min-width : 80px
클래스 [ .nxw-mmd ]
min-width : 120px
클래스 [ .nxw-mlg ]
min-width : 미정
메인 액션 버튼 - 10
| @desc | PRIMARY : 주 버튼으로, 사용자가 가장 먼저 클릭해야 하는 주요 작업을 나타냅니다. 예를 들어, 저장, 제출 등의 작업이 이에 해당합니다. |
| @design | 파란 배경색이 있는 버튼 |
| @figma | btn / Primary |
| @use | - |
<a href="javascript:void(0);" class="nxw-btn-10">PRIMARY</a>
<a href="javascript:void(0);" class="nxw-btn-10 nxw-sm">PRIMARY</a>
<a href="javascript:void(0);" class="nxw-btn-10 nxw-md">PRIMARY</a>
<a href="javascript:void(0);" class="nxw-btn-10 disabled">PRIMARY</a>
| @desc | SECONDARY : 보조 버튼으로, 주 버튼과 함께 사용되지만 덜 중요한 작업을 수행합니다. |
| @design | 배경색이 흰색이고 글자가 파란색인 버튼 |
| @figma | btn / Secondary |
| @use | - |
<a href="javascript:void(0);" class="nxw-btn-11">SECONDARY</a>
<a href="javascript:void(0);" class="nxw-btn-11 nxw-sm">SECONDARY</a>
<a href="javascript:void(0);" class="nxw-btn-11 nxw-md">SECONDARY</a>
| @desc | TERTIARY : 세 번째 수준의 버튼으로, 선택 사항이나 추가적인 정보 제공을 위한 버튼입니다. |
| @design | 배경색이 흰색이고 글자가 파란색인 버튼 |
| @figma | btn / Tertiary |
| @use | - |
<a href="javascript:void(0);" class="nxw-btn-12">TERTIARY</a>
<a href="javascript:void(0);" class="nxw-btn-12 nxw-sm">TERTIARY</a>
<a href="javascript:void(0);" class="nxw-btn-12 nxw-md">TERTIARY</a>
<a href="javascript:void(0);" class="nxw-btn-12 disabled">TERTIARY</a>
삭제 버튼 - 20
| @desc | DESTRUCTIVE PRIMARY : 중요한 삭제 작업을 수행할 때 사용하는 주 버튼으로, 클릭시 일반적으로 사용자에게 경고 메시지를 동반합니다. |
| @design | 배경색이 빨간색인 버튼 |
| @figma | btn / Primary |
| @use | - |
<a href="javascript:void(0);" class="nxw-btn-20">DESTRUCTIVE</a>
<a href="javascript:void(0);" class="nxw-btn-20 nxw-sm">DESTRUCTIVE</a>
<a href="javascript:void(0);" class="nxw-btn-20 nxw-md">DESTRUCTIVE</a>
<a href="javascript:void(0);" class="nxw-btn-20 disabled">DESTRUCTIVE</a>
| @desc | DESTRUCTIVE SECONDARY : 덜 중요한 삭제 작업에 사용되는 보조 버튼입니다. |
| @design | 배경색이 없고 글자색이 빨간 버튼 |
| @figma | btn / Secondary |
| @use | - |
<a href="javascript:void(0);" class="nxw-btn-21 ">DESTRUCTIVE</a>
<a href="javascript:void(0);" class="nxw-btn-21 nxw-sm">DESTRUCTIVE</a>
<a href="javascript:void(0);" class="nxw-btn-21 nxw-md">DESTRUCTIVE</a>
| @desc | - |
| @design | 배경색이 미묘하게 회색빛이 돌고 호버시 조금더 진한 회색으로 물듬 |
| @figma | btn / |
| @use | - |
<a href="javascript:void(0);" class="nxw-btn-30">Subtle Button</a>
<a href="javascript:void(0);" class="nxw-btn-30 nxw-sm">Subtle Button</a>
<a href="javascript:void(0);" class="nxw-btn-30 nxw-md">Subtle Button</a>
고스트 버튼 - 40
| @desc | - |
| @design | 배경색이 없는 파란글자이며 호버시 파란 배경이 생김 |
| @figma | btn / Ghost-accent |
| @use | - |
<a href="javascript:void(0);" class="nxw-btn-40">Accent</a>
<a href="javascript:void(0);" class="nxw-btn-40 nxw-sm">Accent</a>
<a href="javascript:void(0);" class="nxw-btn-40 nxw-md">Accent</a>
| @desc | - |
| @design | 배경색이 없는 회색글자이며 호버시 회색 배경이 생김 |
| @figma | btn / Ghost-dstr |
| @use | - |
<a href="javascript:void(0);" class="nxw-btn-41">DESTRUCTIVE</a>
<a href="javascript:void(0);" class="nxw-btn-41 nxw-sm">DESTRUCTIVE</a>
<a href="javascript:void(0);" class="nxw-btn-41 nxw-md">DESTRUCTIVE</a>
| @desc | - |
| @design | 배경색이 없는 빨간글자이며 호버시 빨간 배경이 생김 |
| @figma | btn / Ghost-dstr |
| @use | - |
<a href="javascript:void(0);" class="nxw-btn-42">DESTRUCTIVE</a>
<a href="javascript:void(0);" class="nxw-btn-42 nxw-sm">DESTRUCTIVE</a>
<a href="javascript:void(0);" class="nxw-btn-42 nxw-md">DESTRUCTIVE</a>
INPUT STYLE
[ INPUT SIZE GUIDE ]
클래스 [ default ]
width : 100%
클래스 [ .nxw-tel ]
max-width : 56px
클래스 [ .nxw-xs ]
max-width : 64px
클래스 [ .nxw-sm ]
max-width : 160px
클래스 [ .nxw-md ]
max-width : 320px
클래스 [ .nxw-lg ]
max-width : 480px
클래스 [ .nxw-mxs ]
min-width : 64px
클래스 [ .nxw-msm ]
min-width : 160px
클래스 [ .nxw-mmd ]
min-width : 320px
클래스 [ .nxw-mlg ]
min-width : 480px
| @desc | - |
| @design | input text 호버시 회색빛이 드러나고 포커싱하면 input 주변에 파란색 쉐도우가 생김 |
| @figma | - |
| @use | - |
<input type="text" class="nxw-ipt-10"/>
<input type="text" class="nxw-ipt-10 nxw-xs"/>
<input type="text" class="nxw-ipt-10 nxw-sm"/>
<input type="text" class="nxw-ipt-10 nxw-md"/>
<input type="text" class="nxw-ipt-10 nxw-lg"/>
<input type="text" class="nxw-ipt-10 nxw-tel"/>
| @desc | - |
| @design | input textarea 호버시 회색빛이 드러나고 포커싱하면 input 주변에 파란색 쉐도우가 생김 |
| @figma | figma [ mp:textarea ] |
| @use | - |
<textarea name="" id="" class="nxw-ipt-20"></textarea>
<textarea name="" id="" class="nxw-ipt-20 nxw-sm"></textarea>
<textarea name="" id="" class="nxw-ipt-20 nxw-md"></textarea>
<textarea name="" id="" class="nxw-ipt-20 nxw-lg"></textarea>
| @desc | - |
| @design | input 검색 text 앞에는 돋보기가 있고 뒤에는 삭제버튼이 있음 |
| @figma | - |
| @use | - |
<div class="nxw-ipt-30">
<span class="nx-input-icon"></span>
<input type="text" class="nx-input-search scWordSync" placeholder="Search" name="SC_WORD" id="SC_WORD" value=""/>
<span class="nx-input-icon right iptTxtReset"></span>
</div>
| @desc | input 디자인만 참고바람 이해돕기위해 js 추가 |
| @design | input 검색 달력 인풋 날짜, 날짜 + 시간, 기간 |
| @figma | - |
| @use | 정품등록, 회원가입 |
<input type="text" id="sync_1" name="" class="nxw-ipt-31 nxw-white nxw-sm" onclick="input_calen('sync_1', '', '', 'single');" autocomplete="off" readonly />
날짜
날짜 + 시간
날짜 기간
-날짜 기간
-추가적인 기능
input_calen(sid, eid, target, type, time, $timeRange, weeks, dates, pdate, ndate)SELECT STYLE
[ SELECT SIZE GUIDE ]
클래스 [ default ]
width : 100%
클래스 [ .nxw-xs ]
max-width : -
클래스 [ .nxw-sm ]
max-width : 100px
클래스 [ .nxw-md ]
max-width : 200px
클래스 [ .nxw-lg ]
max-width : 300px
클래스 [ .nxw-mxs ]
min-width : -
클래스 [ .nxw-msm ]
min-width : 100px
클래스 [ .nxw-mmd ]
min-width : 200px
클래스 [ .nxw-mlg ]
min-width : 300px
기본적인 selectbox 스타일
@desc input text 호버시 회색빛이 드러나고 포커싱하면 input 주변에 파란색 쉐도우가 생김
@figma [ mp:dropdown ]
@use
<select id="" name="" class="nxw-slt-10">
<option value="옵션1">옵션1</option>
<option value="옵션2">옵션2</option>
</select>
<select id="" name="" class="nxw-slt-10 nxw-sm">
<select id="" name="" class="nxw-slt-10 nxw-md">
<select id="" name="" class="nxw-slt-10 nxw-lg">
sort selectbox
@desc input 외곽선이 없으나 호버시 나타남
@figma [ mp:dropdown ]
@use
<select id="" name="" class="nxw-slt-20">
<option value="옵션1">옵션1</option>
<option value="옵션2">옵션2</option>
</select>
<select id="" name="" class="nxw-slt-20 nxw-sm">
<select id="" name="" class="nxw-slt-20 nxw-md">
<select id="" name="" class="nxw-slt-20 nxw-lg">
RADIO STYLE
기본적인 radio 스타일
@desc checkbox
@figma [ mp:select / radio ]
@use
<label class="nxw-rdo-10">
<input class="nxw-input-choice" id="" name="rdo10" value="" type="radio"/>
<span class="nxw-choice-wrap">
<span class="nxw-icon-box">
<span class="nxw-icon-choice1"></span>
</span>
<span class="nxw-icon-txt">전체</span>
</span>
</label>
기본적인 radio 스타일
@desc checkbox
@figma [ mp:select / radio ]
@use
<label class="nxw-rdo-11">
<input class="nxw-input-choice" id="" name="rdo10" value="" type="radio"/>
<span class="nxw-choice-wrap">
<span class="nxw-icon-box">
<span class="nxw-icon-choice1"></span>
</span>
<span class="nxw-icon-txt">전체</span>
</span>
</label>
Single Select 아이콘 비노출형
@desc display none - radio
@figma [ mp:select / Single-Select Chip ]
@use
<label class="nxw-rdo-21">
<input class="nxw-input-choice" id="" name="rdo10" value="" type="radio"/>
<span class="nxw-choice-wrap">
<span class="nxw-icon-txt">단일선택</span>
<span class="nxw-out-line"></span>
</span>
</label>
원형버튼 스타일
@desc
@figma [ mp:select / radio ]
@use 추가에 따라 아이콘 변경 가능
<label class="nxw-chk-41">
<input class="nxw-input-choice" id="" name="" value="" type="radio" checked/>
<span class="nxw-choice-wrap">
<span class="nxw-image-txt">전체</span>
<span class="nxw-out-line"></span>
</span>
</label>
CHECKBOX STYLE
기본적인 checkbox 스타일
@desc checkbox
@figma -
@use
<label class="nxw-chk-10">
<input class="nxw-input-choice" id="" name="" value="" type="checkbox"/>
<span class="nxw-choice-wrap">
<span class="nxw-icon-box">
<span class="nxw-icon-choice1"></span>
</span>
<span class="nxw-icon-txt">전체</span>
</span>
</label>
원형버튼 checkbox 스타일
@desc checkbox
@figma -
@use 추가에 따라 아이콘 변경 가능
<label class="nxw-chk-20">
<input class="nxw-input-choice" id="" name="" value="" type="checkbox"/>
<span class="nxw-choice-wrap">
<span class="nxw-icon-box">
<span class="nxw-icon-choice1"></span>
</span>
<span class="nxw-icon-txt">전체</span>
<div class="nxw-out-line"></div>
</span>
</label>
중복선택 아이콘 비노출형
@desc display none - checkbox
@figma
@use
<label class="nxw-chk-21">
<input class="nxw-input-choice" id="" name="rdo10" value="" type="radio"/>
<span class="nxw-choice-wrap">
<span class="nxw-icon-txt">중복선택</span>>
<span class="nxw-out-line"></span>
</span>
</label>
원형 아이콘 checkbox 스타일
@desc checkbox active
@figma -
@use 아이콘 변경 가능 현재 존재하는 아이콘 list [ heart1, star1 ]
<label class="nxw-chk-22 active">
<span class="nxw-choice-wrap">
<span class="nxw-icon-box">
<span class="nxw-icon-star1"></span>
</span>
<span class="nxw-out-line"></span>
</span>
</label>
원형버튼 checkbox 스타일 -- 작업중
@desc checkbox
@figma -
@use 추가에 따라 아이콘 변경 가능
<label class="nxw-chk-40">
<input class="nxw-input-choice" id="" name="" value="" type="checkbox"/>
<span class="nxw-choice-wrap">
<span class="nxw-icon-box">
<span class="nxw-icon-choice1"></span>
</span>
<span class="nxw-icon-txt">전체</span>
</span>
</label>
좀더 각진 checkbox 스타일
@desc checkbox
@figma -
@use
<label class="nxw-chk-41">
<input class="nxw-input-choice" id="" name="" value="" type="checkbox" checked/>
<span class="nxw-choice-wrap">
<span class="nxw-image-txt">전체</span>
<span class="nxw-out-line"></span>
</span>
</label>
공통 flex5
공통 flex4
공통 flex3
공통 flex2
텍스트 중앙 정렬 가능
TOGGLE STYLE - 수정진행중 사용시 말씀부탁드립니다.
슬라이드 토글
@desc off 회색배경 on 파란배경 슬라이드 토글
@figma [ mp:switch ]
@use
<div>
<input type="checkbox" id="toggle1" name="" value="" class="nxw-tog-10"/>
<label for="toggle1"><span></span></label>
</div>
<div>
<input type="checkbox" id="toggle1" name="" value="" class="nxw-tog-10" checked disabled/>
<label for=""><span></span></label>
</div>
<div>
<input type="checkbox" id="toggle1" name="" value="" class="nxw-tog-10" disabled/>
<label for=""><span></span></label>
</div>
일반토글
비활성화 on 토글
비활성화 off 토글
정사각형 아이콘 버튼형 토글
@desc -
@figma [ mp:switch ]
@use
<div class="nxw-tog-20 active">
<span class="nxw-icon-star1"></span>
</div>
아래는 더미데이터 입니다
아래는 더미데이터 입니다
아래는 더미데이터 입니다
아래는 더미데이터 입니다
아래는 더미데이터 입니다
아래는 더미데이터 입니다
아래는 더미데이터 입니다
TAB STYLE
tab 버튼
@desc tab 형태 div클래스로 갯수조정 활성화는 active
@figma [ mp:tab ]
@use
<div class="nxw-btn-100 div2"> //2개씩 정렬 div2 div3 div4 div5
<a href="javascript:void(0);" class="nxw-tab-100-in active">tab</a>
<a href="javascript:void(0);" class="nxw-tab-100-in">tab</a>
<a href="javascript:void(0);" class="nxw-tab-100-in">tab</a>
<a href="javascript:void(0);" class="nxw-tab-100-in">tab</a>
<a href="javascript:void(0);" class="nxw-tab-100-in">tab</a>
<a href="javascript:void(0);" class="nxw-tab-100-in">tab</a>
</div>
클래스 div2 추가시 2개씩 정렬
클래스 div3 추가시 3개씩 정렬
클래스 div4 추가시 4개씩 정렬
클래스 div5 추가시 5개씩 정렬