[TIP] @가이드만들기

Notice

Recent Posts

Recent Comments

Link

황미애

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

개인공간

[TIP] @가이드만들기 본문

IT정보/TIP

[TIP] @가이드만들기

천재소년s 2016. 12. 6. 10:56

@가이드.zip

ie9이상 맞춰진 가이드 형태(ie8은 버튼만 맞추면 될듯)

가이드 head

	
	가이드

가이드 body

	

	
		
			버튼
			폼
			테이블
			페이징/탭
			검색영역
			컨텐츠
		
	
	
		
			버튼
			
				A 태그

				기본스타일
				버튼A
				버튼B
				버튼C
				버튼D
				버튼E

				disabled처리(클래스사용)
				버튼A
				버튼B
				버튼C
				버튼D
				버튼E

				BUTTON 태그

				기본스타일
				
				
				
				
				

				disabled처리(속성사용)
				
				
				
				
				

				버튼 사이즈
				사이즈S
				사이즈M
				사이즈L

				아래 기능버튼인경우(.btn_area > .btn)
				
					사이즈L
					사이즈L
				

				아이콘 버튼형 (텍스트있는경우 .blind 삭제)
				더보기
				더보기
				알림
				문서
				메일	
				글쓰기
				추가보기
				옵션보기	
				더보기		
				이전		
				다음		
				더보기		
				다음보기		
				다음보기		
				달력선택		
				검색		
				이전
				다음		
				닫기		
				새창열림	
				다음보기		
				다음보기	
				처음페이지
				이전
				다음
				마지막페이지


				버튼 안 아이콘형태
				그룹웨어

			
		


		
			폼
			
				체크박스
				기본스타일
				체크
				체크
				체크
				체크
				체크
				체크
				
				텍스트형태 (.chk_area)
				묶음형태
				묶음형태
				묶음형태
				묶음형태
				묶음형태
				묶음형태
				
				고정간격 (.fld > .chk_area)
				
					체크박스
					체크박스
					라디오버튼
					라디오버튼
				


				폼박스 스타일
				
				
				
				
				
				


				

				인풋 오른쪽 버튼형
				
					
					달력선택
				
				
					
					매장검색
				
			
		


		
			테이블
			
				col 스타일
				Table style A
				
				
					
						테이블 리스트
						
							
							
							
							
							
							
							
							
							
							
							
							
						
						
							
								전체선택
								No.
								매장정보
								총 매출
								공급가액
								부가세
								현금
								카드
							
							
								매장코드
								매장명
								금액
								건수
								금액
								건수
								금액
								건수
							
						
						
							
								선택
								51
								TS0012
								Reebok
								88,500
								27
								81,120
								81,120
								81,120
								10
								81,000
								10
							
							
								선택
								51
								TS0012
								Reebok
								88,500
								27
								81,120
								81,120
								81,120
								10
								81,000
								10
							
							
								선택
								51
								TS0012
								Reebok
								88,500
								27
								81,120
								81,120
								81,120
								10
								81,000
								10
							
							
								선택
								51
								TS0012
								Reebok
								88,500
								27
								81,120
								81,120
								81,120
								10
								81,000
								10
							
							
								선택
								51
								TS0012
								Reebok
								88,500
								27
								81,120
								81,120
								81,120
								10
								81,000
								10
							
						
					
				
				

				Board 스타일
			
		


		
			페이징/탭
			
				페이징
				paging style A
				
				
					
						이전
						1
						2
						3
						4
						5
						6
						다음
					
				
				

				paging style B
				
				
					처음페이지
					이전
					
					page / 100
					다음
					마지막페이지
				



				탭 스타일
				참고사이트 : sub_list.html
				
					
						매장매출관리닫기
						수익정산조회닫기
						프로모션 관리닫기
						자산/시설관리닫기
						매장매출관리닫기
					
				
				
			
		


		
			검색영역
			
				상단검색
				버튼이 있는경우
				
					
						
						
							
								
									
										
										
										
										
										
										
										
										
									
									
										
											기간별
											
												
													
														
														달력선택
													
													~
													
														
														달력선택
													
												
											
											업종별
											
												
											
											매장그룹별
											
												
											
											매장별
											
												
													
													매장검색
												
											
										
										
											기간별
											
												
													
														
														달력선택
													
													~
													
														
														달력선택
													
												
											
											업종별
											
												
											
											매장그룹별
											
												
											
											매장별
											
												
													
													매장검색
												
											
										
									
								
							

							
								
							

						
						
					
				

				버튼이 없는경우
				
					
						
						
							
								
									
										
										
										
										
										
										
										
										
									
									
										
											기간별
											
												
													
														
														달력선택
													
													~
													
														
														달력선택
													
												
											
											업종별
											
												
											
											매장그룹별
											
												
											
											매장별
											
												
													
													매장검색
												
											
										
										
											기간별
											
												
													
														
														달력선택
													
													~
													
														
														달력선택
													
												
											
											업종별
											
												
											
											매장그룹별
											
												
											
											매장별
											
												
													
													매장검색
												
											
										
									
								
							

						
						
					
				
			
		


		
			컨텐츠
			
				컨텐츠 영역 분리형
				시트 상단인 경우
				
					
						총 505 건
					
					
						등록
						편집
						입력요청
						엑셀
						새로고침
					
				

					
				컨텐츠 타이틀인경우
				
					타이틀 영역타이틀 영역
					* 필수입력사항입니다.
				


				시트 하단인 경우
				
					
						처음페이지
						이전
						
						page / 100
						다음
						마지막페이지
					
					
						총 505 건
					
				

				
				카테고리별
				스타일
				진행중
				마감

				카테고리 그룹형
				
					진행중
					마감
					진행중
					마감

테이블 리스트
전체선택	No.	매장정보	총 매출	공급가액	부가세	현금	카드
선택	51	TS0012	Reebok	88,500	27	81,120	81,120	81,120	10	81,000	10
선택	51	TS0012	Reebok	88,500	27	81,120	81,120	81,120	10	81,000	10
선택	51	TS0012	Reebok	88,500	27	81,120	81,120	81,120	10	81,000	10
선택	51	TS0012	Reebok	88,500	27	81,120	81,120	81,120	10	81,000	10
선택	51	TS0012	Reebok	88,500	27	81,120	81,120	81,120	10	81,000	10

기간별	달력선택 ~ 달력선택	업종별		매장그룹별		매장별	매장검색
기간별	달력선택 ~ 달력선택	업종별		매장그룹별		매장별	매장검색

기간별	달력선택 ~ 달력선택	업종별		매장그룹별		매장별	매장검색
기간별	달력선택 ~ 달력선택	업종별		매장그룹별		매장별	매장검색

@charset "utf-8";

/**************************************************
	Reset CSS
**************************************************/
html{}
html,body{width:100%;height:100%;margin:0;padding:0}
body{margin:0;padding:0;font:13px/1.4 '맑은 고딕', 'Malgun Gothic', arial, '돋움', dotum, arial, sans-serif, helvetica;background-color:#fff;color:#666;letter-spacing:-0.5px;background-color:#e9edf5}
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,pre,form,fieldset,input,textarea,p,blockquote,tbody,tfoot,thead,th,td{margin:0;padding:0;vertical-align:middle}
h1,h2,h3,h4,h5{font-weight:normal;font-family:notokr-DemiLight;font-weight:bold}
body,div,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button,input,select,a,em,textarea,input,strong{margin:0;padding:0}
input,textarea,select,button,th,td{font:12px/1 '맑은 고딕', Malgun Gothic,'돋움', dotum, arial, sans-serif, helvetica;color:#575e63;vertical-align:middle}
table{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed}
table th{ font-weight:bold}
th, td{box-sizing:border-box}
ol,ul,li{list-style:none}
caption{position:relative}
img{vertical-align:middle}
img,fieldset{border:0 none}
label,button,input[type="file"]{cursor:pointer}
em,address{font-style:normal}
a{color:#202020;text-decoration:none}
/*a:link,a:visited{color:#202020;text-decoration:none}*/
/*a:hover,a:active,a:focus{text-decoration:none}*/
button{overflow:visible;margin:0;padding:0;border:0;background:none;white-space:nowrap;cursor:pointer}
button::-moz-focus-inner{padding:0;border:0}
legend, .hidden, .hidden{width:0;height:0;padding:0;margin:0;visibility:hidden;font-size:0}
:focus{outline:none}
input[type=radio]{vertical-align:top}
textarea{resize:none}
hr{display:none}

/* HTML5 */
header, footer, nav, section, article, aside, figure, figcaption, hgroup {display:block}

/* skip */
#skip_nav, .blind, caption{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;font-family:'Malgun Gothic'}
caption{text-indent:-999px;left:-999px;}

/* common */
.fl{float:left !important}
.fr{float:right !important}
.tl{text-align:left !important}
.tr{text-align:right !important}
.tc{text-align:center !important}
.vt{vertical-align:top !important}
.vm{vertical-align:middle !important}
.np{padding:0 !important}
.fnone{float:none !important}
.line_none{border:0 !important}

/* fonts */
@font-face {
    font-family:'notokr-DemiLight';
    src:url('../../fonts/NotoSansCJKkr-DemiLight.eot');
    src:url('../../fonts/NotoSansCJKkr-DemiLight.otf') format('otf'),
         url('../../fonts/NotoSansCJKkr-DemiLight.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
  font-family: 'icomoon';
  src:  url('../../fonts/icomoon.eot?8syd2w');
  src:  url('../../fonts/icomoon.eot?8syd2w#iefix') format('embedded-opentype'),
    url('../../fonts/icomoon.ttf?8syd2w') format('truetype'),
    url('../../fonts/icomoon.woff?8syd2w') format('woff'),
    url('../../fonts/icomoon.svg?8syd2w#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

/**************************************************
	COMMON
**************************************************/
/* jquery scroller */
.mCSB_scrollTools{position:absolute;width:12px;height:auto;left:auto;top:0;right:0;bottom:0}
.mCSB_scrollTools .mCSB_draggerContainer{position:absolute;top:0;left:0;bottom:0;right:0;height:auto}
.mCSB_scrollTools .mCSB_draggerRail{width:2px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}
.mCSB_scrollTools.mCSB_scrollTools_horizontal{width:auto;height:16px;top:auto;right:0;bottom:0;left:0}
.mCSB_scrollTools, 
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight{
-webkit-transition:opacity .2s ease-in-out, background-color .2s ease-in-out;
-moz-transition:opacity .2s ease-in-out, background-color .2s ease-in-out;
-o-transition:opacity .2s ease-in-out, background-color .2s ease-in-out;
transition:opacity .2s ease-in-out, background-color .2s ease-in-out}
.mCSB_scrollTools .mCSB_dragger{cursor:pointer;width:100%;height:30px;z-index:1}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{border-radius:3px;background-color:#d6d7da}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{width:30px;height:100%;left:0}
.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {position:absolute;top:0;bottom:0;left:0;right:0;width:5px;height:auto;margin:3px 4px}
.mCS-inset.mCSB_scrollTools .mCSB_draggerRail, 
.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, 
.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, 
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, 
.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, 
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{width:12px}
.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{height:6px;margin:5px 3px;position:absolute;width:auto;top:0;bottom:0;left:0;right:0}
.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:12px;margin:2px 0}
.mCustomScrollBox { position:relative;overflow:hidden;height:100%;max-width:100%;outline:none;direction:ltr}
.mCSB_inside > .mCSB_container {margin-right:0}
.mCSB_container {overflow:hidden;width:auto;height:auto}

/* 영역공통 */
.split{display:table;width:100%;box-sizing:border-box}
.split > .cell{display:table-cell;vertical-align:middle}
.split > .cellR{display:table-cell;text-align:right;vertical-align:middle}

/* 버튼/아이콘 공통 처리 */
.ico_cm, .btn_cm{position:relative;vertical-align:middle;transition:all 0.4s}
.ico_cm:before, .ico_cm:after{display:inline-block;background:url(../../images/index/bg_ico_cm.png) no-repeat;vertical-align:top;box-sizing:border-box}
.btn_cm:before, .btn_cm:after, 
.chk + label:before, .rd + label:before{display:inline-block;vertical-align:middle;background:url(../../images/index/bg_btn_cm.png) no-repeat}

/* 공통 아이콘 정리*/
.ico_imp:before{content:'!';width:12px;height:12px;background:#f54470;color:#24262d;font-size:9px;border-radius:30px;line-height:12px;text-align:center;font-weight:bold}

/* 공통 버튼아이콘 정리*/
.btn_arr_r:after{content:'';width:8px;height:5px;background-position:-110px -30px}
.btn_arr_r2:after{content:'';width:16px;height:16px;background-position:-204px 0}
.btn_notice:before{content:'';width:27px;height:30px;background-position:0px -30px}
.btn_folder:before{content:'';width:32px;height:25px;background-position:-34px -30px}
.btn_mail:before{content:'';width:32px;height:22px;background-position:-72px -30px}
.btn_write:before{content:'';width:15px;height:14px;background-position:-128px 0}
.btn_add:before{content:'';width:10px;height:10px;background-position:-148px 0}
.btn_more:before{content:'';width:2px;height:10px;background-position:-164px 0}
.btn_more2:before{content:'';width:16px;height:16px;background-position:-320px 0}
.btn_prev:before{content:'';width:10px;height:17px;background-position:-174px 0}
.btn_next:before{content:'';width:10px;height:17px;background-position:-188px 0}
.btn_next2{display:inline-block;width:40px;height:40px;background:#222a3c;border-radius:100%;box-shadow:0 2px 5px #a5a6aa;text-align:center}
.btn_next2:before{content:'';width:22px;height:16px;margin-top:11px;background-position:-226px 0}
.btn_next2:hover{background-color:#5988b2}
.btn_view2{display:inline-block;width:32px;height:32px;border:1px solid #bbc1ce;text-align:center;}
.btn_view2:before{content:'';width:21px;height:12px;margin-top:10px;background-position:-24px -68px}
.btn_view2.open:before{background-position:0 -68px}
.btn_view3{display:inline-block;width:30px;height:30px;border:1px solid #dce0e8;background-color:#fff;text-align:center;}
.btn_view3:before{content:'';width:13px;height:8px;margin-top:10px;background-position:-116px -79px}
.btn_view3.open:before{background-position:-116px -68px}
.btn_cal:before{content:'';width:16px;height:14px;background-position:-254px 0px;}
.btn_search:before{content:'';width:16px;height:16px;background-position:-276px 0;}
.btn_pg_next:before{content:'';width:6px;height:10px;background-position:-310px 0;}
.btn_pg_prev:before{content:'';width:6px;height:10px;background-position:-298px 0;}
.btn_allmenu{display:inline-block;width:60px;height:30px;padding-top:10px;background-color:#f3f3f3;text-align:center;}
.btn_allmenu:before{content:'';width:18px;height:19px;background-position:-340px 0;}
.btn_close:before{content:'';width:6px;height:6px;background-position:-366px 0;}
.btn_newwin_r:after{content:'';width:11px;height:11px;background-position:-378px 0;}
.btn_pg_first2, .btn_pg_end2, .btn_pg_prev2, .btn_pg_next2{display:inline-block;width:24px;height:23px;padding-top:1px;border-radius:2px;background-color:#bbc1ce;text-align:center;}
.btn_pg_first2:hover, .btn_pg_end2:hover, .btn_pg_prev2:hover, .btn_pg_next2:hover{background-color:#8e95a8;}
.btn_pg_first2:before{content:'';width:11px;height:11px;background-position:-136px -76px;}
.btn_pg_end2:before{content:'';width:11px;height:11px;background-position:-150px -76px;}
.btn_pg_prev2:before{content:'';width:7px;height:11px;background-position:-140px -76px;}
.btn_pg_next2:before{content:'';width:7px;height:11px;background-position:-150px -76px;}


/* 버튼 스타일 공통 */
.btnS, .btnM, .btnL{display:inline-block;color:#fff;border-radius:2px;box-shadow:0 3px 1px #dedede;text-shadow:none !important;box-sizing:border-box;vertical-align:middle;text-align:center;transition:background 0.4s;font-family:'notokr-DemiLight'} 
.btnS{font-size:14px;height:30px;line-height:31px;line-height:36px\9;padding:0 15px}
.btnM{font-size:16px;height:34px;line-height:34px;line-height:40px\9;padding:0 20px}
.btnL{font-size:16px;height:40px;line-height:41px;line-height:46px\9;padding:0 20px}

/* style */
.styA{background-color:#222a3c}
.styB{background-color:#5988b2}
.styC{background-color:#8e95a8}
.styD{background-color:#948885}
.styE{background-color:#e66b6b}
.styA:hover{background-color:#666}
.styB:hover{background-color:#113f9c}
.styC:hover{background-color:#3a446b}
.styD:hover{background-color:#b17667}
.styE:hover{background-color:#e72929}
/* disabled */
.disabled, .btnS[disabled], .btnM[disabled], .btnL[disabled]{cursor:default;text-shadow:none;color:#fff}
.styA[disabled], .styA.disabled{background-color:#bbb}
.styB[disabled], .styB.disabled{background-color:#bbb}
.styC[disabled], .styC.disabled{background-color:#bbb}
.styD[disabled], .styD.disabled{background-color:#bbb}
.styE[disabled], .styE.disabled{background-color:#bbb}

/* 다중 버튼영역  */
.btn_area{margin-top:20px;text-align:center}
.btn_area .btnS, .btn_area .btnM, .btn_area .btnL{margin-left:2px;}
.btn_area .btnS:first-child, .btn_area .btnM:first-child, .btn_area .btnL:first-child{margin-left:0;}

/* 버튼 안의 아이콘  */
.btnS .btn_cm{vertical-align:text-bottom;}
.btnS .btn_cm:before{margin:-3px 6px 0 0;}
.btnS .btn_cm:after{margin:-3px 0 0 6px;}

/* 폼요소 공통 처리 */
.fld .chk_area{margin-left:20px}
.fld .chk_area:first-child{margin-left:0}
.chk_area{position:relative;display:inline-block}
.chk_area .chk, .chk_area .rd{/*position:static;width:15px;height:15px;margin:0*/}
.chk_area .chk + label, .chk_area .rd + label{padding-left:26px;text-indent:0;padding-top:3px;\9;line-height:1.1;\9;}
.chk, .rd{position:absolute;left:-999px;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.chk + label, .rd + label{position:relative;display:inline-block;min-width:15px;text-indent:-999px;font-size:13px;letter-spacing:-1px;vertical-align:middle;line-height:18px;font-family:'notokr-DemiLight';cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
.chk + label:before, .rd + label:before {position:absolute;top:0;left:0;content:'';width:18px;height:17px}
.chk + label:before{background-position:0 0}
.chk[type="checkbox"]:checked + label:before{background-position:-20px 0}
.chk[disabled] + label:before{background-position:-40px 0}
.rd + label:before{background-position:-62px 0}
.rd[type="radio"]:checked + label:before{background-position:-82px 0} 
.rd[disabled] + label:before{background-position:-104px 0} 

.inp_area{position:relative;display:inline-block;vertical-align:middle;box-sizing:border-box;}
.inp{height:32px;padding-left:10px;border:1px solid #c6cad0;line-height:31px;color:#444;font-size:13px;box-sizing:border-box;}
.inp[disabled], .inp[readonly]{background-color:#e6e6e6;}
.inp::-ms-clear{display:none;}
.inp_area .inp{width:100%;padding-right:28px;}
.inp_area .btn_cm{position:absolute;top:1px;right:1px;line-height:28px;background:#fff;text-align:center;}
.inp_area .btn_cal{width:30px;}
.inp_area .btn_search{width:30px;}

.select{height:32px;padding-left:6px;border:1px solid #c6cad0;color:#444;font-size:13px;box-sizing:border-box;}
.select[disabled], .select[readonly]{background-color:#e6e6e6;}

.textarea{width:100%;padding:10px;border:1px solid #c6cad0;line-height:1.5;color:#444;font-size:13px;box-sizing:border-box;}
.textarea[disabled]{background-color:#e6e6e6;}

/* pointColor */
.pointCol1{color:#e66b6b;}
.pointCol2{/* color:#e66b6b; */}
.pointCol3{/* color:#e66b6b; */}

/* Pagination */
.pagination .paging{display:inline-block}
.pg_styA{margin-top:10px;text-align:center}
.pg_styA li{display:table-cell;vertical-align:middle;}
.pg_styA li:first-child a{border:1px solid #d2d9e2;} 
.pg_styA li a{display:block;width:34px;height:34px;border:1px solid #d2d9e2;margin-left:-1px;background-color:#e9edf5;box-shadow:0 1px 0 #d9dce4;color:#646d81;text-align:center;line-height:32px;font-family:'Tahoma';box-sizing:border-box;transition:all 0.3s}
.pg_styA .btn_cm{position:relative;width:32px;background-color:#fff}
.pg_styA .btn_pg_prev{border-radius:2px 0 0 2px}
.pg_styA .btn_pg_next{border-radius:0 2px 2px 0}
.pg_styA .active, .pg_styA a:hover, .pg_styA li:first-child a:hover{position:relative;border-color:#6488ac;background-color:#6f94ba;z-index:1;color:#fff;}
.pg_styA .btn_cm:hover, .pg_styA li:first-child .btn_cm:hover{border-color:#d8d8d8;background-color:#e5e5e5;}
.pg_styB{margin:0;}
.pg_styB .btn_cm{margin-left:-2px;}
.pg_styB .btn_cm:first-child{margin-left:0;}
.pg_styB .inp{height:26px;border-radius:2px;width:40px;padding-right:6px;margin-left:6px;border-color:#d8dbe3;text-align:right;}
.pg_styB .txt_page_total{padding:0 10px 0 4px;font-family:'Tahoma';font-size:13px;color:#646d81;vertical-align:middle;}


/* search_box */
.search_box{table-layout:fixed;padding:13px 20px;margin-bottom:18px;background-color:#fff;border-bottom:1px solid #c6cad0;box-shadow:1px 1px 0 #dde1e9;
	background: -moz-linear-gradient(top, #fff 80%, #fafafa 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #fff 80%,#fafafa 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #fff 80%,#fafafa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.search_box .cell{display:table-cell;}
.search_box .cellR{width:162px;}
.search_box .select, .search_box .inp_area{width:100%;}
.search_box .tbl{table-layout:auto;}
.search_box .tbl th, .search_box .tbl td{padding:5px 0;}
.search_box .tbl th{padding-right:10px;padding-left:30px;padding-top:10px\9;text-align:left;color:#456987;font-size:14px;white-space:nowrap;font-family:'notokr-DemiLight';}
.search_box .tbl th:first-child{padding-left:0;}

/* date_area */
.date_area .inp_area{width:50%;}
.date_area .inp_area .inp{min-width:115px;}
.date_area .cell.txt_c{width:1%;padding:0 6px;text-align:center;white-space:nowrap;}

/* tbl_top / tbl_bot */
.tbl_top{margin-bottom:10px;}
.tbl_top .cell, .tbl_top .cellR{vertical-align:bottom;}
.txt_total{font-size:14px;font-family:'notokr-DemiLight'}
.txt_total .pointCol1{font-weight:normal;letter-spacing:0;}
.tbl_bot{border:1px solid #9fb8ce;padding:7px 20px 7px 10px;}
.tbl_bot .txt_total{font-size:13px;}

/* table */
.tbl_wrap{border-top:1px solid #9fb8ce;}
.tb th, .tb td{font-family:'notokr-DemiLight';font-size:13px;font-weight:normal;text-align:center;}
.tb thead tr{border-top:1px solid #9fb8ce;}
.tb thead tr:first-child{border-top:none;}
.tb thead th{height:30px;padding:5px;padding-top:10px\9;border-left:1px solid #beccd8;background-color:#cfdde9;color:#4a5d6f;}
.tb thead tr:first-child th:first-child{border-left:none;}
.tb tbody{border-top:1px solid #9fb8ce;}
.tb tbody tr{border-bottom:1px solid #ced3dc;}
.tb tbody tr:nth-child(odd) td{background-color:#e3e6ee;}
.tb tbody td{height:36px;padding:10px;padding:12px 10px 7px\9;background-color:#e9edf5;border-left:1px solid #ced3dc;}
.tb tbody td:first-child{border-left:none;}
.tb .bg_red td{background-color:#e7dbe4}
.tb .bg_yellow td{background-color:#e9ede8}

/* tab */
.tab_list{overflow:hidden;}
.tab_list > li{float:left;}
.tab_list > li > a{display:block;font-family:'notokr-DemiLight'}
/* tab_window*/
.tab_win .tab_wrap{overflow:hidden;margin-right:74px;}
.tab_win .tab_wrap > .tab_list{width:5000px;}
.tab_win{position:relative;padding-top:5px;}
.tab_win li{margin:4px 4px 0 0;border:1px solid #cdd0d5;background-color:#dadee9;border-radius:1px;}
.tab_win li a{height:24px;display:table-cell;vertical-align:middle;color:#939aac;box-sizing:border-box;}
.tab_win li.on{background-color:#eef1f6;}
.tab_win li.on a{color:#636e8a;}
.tab_win .txt{padding-left:8px;padding-top:5px\9;font-size:14px;}
.tab_win .btn_cm{width:20px;text-align:center;}
.tab_win .btn_ctrl{position:absolute;top:0;right:0;}
.tab_win .btn_ctrl .btn_cm{display:table-cell;height:40px;width:32px;border-right:1px solid #dce0e9;vertical-align:middle;background-color:#e4e8f1;}
.tab_win .btn_ctrl .btn_cm:first-child{border-left:1px solid #dce0e9;}


/**************************************************
	Layout
**************************************************/
.wrap{padding-top:80px;box-sizing:border-box}
.container, .footer{position:relative;min-width:1100px;padding-left:130px;padding-right:105px;} 
.container:after, .footer:after{display:block;clear:both;content:'';}
.wrap.main .container, .wrap.main .footer{min-width:710px;padding-left:440px}

/* 오른쪽 메뉴 나오는경우 처리 */
.header, .container, .aside, .footer, .all_menu, .allmenu_box{transition:all 0.3s}
.wrap.open .header{padding-right:200px;}
.wrap.open .container, .wrap.open .footer{padding-right:310px;}
.wrap.open .all_menu, .wrap.open .aside{right:200px;}
.wrap.open .allmenu_box{right:0;}
.wrap.open .header{min-width:900px;}

.header{position:fixed;min-width:700px;background:#fff;left:0;top:0;width:100%;height:80px;padding:13px 0 15px 23px;box-shadow:0 5px 10px rgba(0,0,0,0.1);z-index:5;box-sizing:border-box}
.header:after{display:block;clear:both;content:''}
.header .logo{float:left}
.header .all_menu{position:fixed;top:80px;right:0;width:105px;text-align:center;}
.header .all_menu .btn_allmenu{box-shadow:0 3px 6px #dadada}
.header .my_info{position:relative;float:right;padding:6px 32px 0 0}
.header .box_my{display:none;position:absolute;right:0;top:40px;width:120px;padding:10px;border:1px solid #ddd;background:#fff;vertical-align:middle;box-sizing:border-box}
.header .my_info > a{display:inline-block;margin-left:22px}
.header .my_info > .btn_notice{margin-left:40px}
.header .my_info > .btn_mail{margin-top:2px}
.header .btn_notice .cont{position:absolute;right:-6px;top:-4px;display:inline-block;width:18px;height:18px;border-radius:10px;background:#ff0054;color:#fff;font-size:11px;text-align:center;line-height:17px;font-family:'Malgun Gothic'}
.header .btn_select{display:inline-block;vertical-align:middle;font-family:'notokr-DemiLight'}
.header .btn_select > img{border-radius:100%;margin-right:18px}
.header .btn_arr_r:after{margin-left:45px}

.nav_wrap{position:fixed;width:100px;height:100%;background-color:#232a3c;z-index:3}
.nav_wrap .nav:after{visibility:hidden;opacity:0;position:fixed;left:100px;top:0;width:190px;height:100%;content:'';background-color:rgba(93,145,186,0.97);box-shadow:3px 0 8px rgba(0,0,0,0.2);transition:all 0.3s;}
.nav_wrap .img_banner{visibility:hidden;opacity:0;position:absolute;bottom:85px;left:100%;width:150px;height:200px;margin-left:20px;z-index:2;transition:all 0.4s;box-shadow:0 0 3px #777}
.nav_wrap .img_banner > figcaption{position:absolute;left:0;bottom:0;width:100%;padding:8px 4px;background-color:rgba(0,0,0,0.4);text-align:center;color:#fff;font-size:16px;font-family:'notokr-DemiLight';box-sizing:border-box;}
.nav{min-height:600px;}
.nav > li a{transition:all 0.3s;font-family:'notokr-DemiLight'}
.nav > li{border-bottom:1px solid #2f3747}
.nav > li > .btn_cm{position:relative;display:block;height:88px;padding-top:16px;border-bottom:1px solid #131721;box-sizing:border-box;text-align:center;font-size:12px;color:#c4c9d6;text-shadow:1px 1px 3px #000;z-index:2}
.nav > li > .btn_cm:before{display:block;width:42px;margin:0 auto 8px;background:none;font-size:32px;color:#fff;}
.nav .box_deps2{visibility:hidden;opacity:0;position:absolute;top:0;left:100px;width:170px;height:100%;padding-left:20px;box-shadow:3px 0 8px rgba(0,0,0,0.2);z-index:2;transition:all 0.4s}
.nav .box_deps2 dt{position:relative;z-index:1;height:120px;padding:48px 20px 0 0;font-size:28px;color:#000;text-align:right;font-family:'notokr-DemiLight';box-sizing:border-box;letter-spacing:-3px}
.nav .box_deps2 dt:before{position:absolute;top:0;right:22px;width:10px;height:42px;content:'';background:url(../../images/index/bg_ico_cm.png) 0 0 no-repeat}
.nav .box_deps2 dd{position:relative;z-index:1}
.nav .deps2 > li{position:relative;}
.nav .deps2 > li > a{display:block;padding:10px 8px;border-bottom:1px solid #79a4c6;font-size:16px;color:#fff}
.nav .deps2 > li:first-child > a{border-top:1px solid #79a4c6}
.nav .deps3{visibility:hidden;opacity:0;position:absolute;top:0;left:88%;width:150px;padding:5px 0;z-index:1;background:#2b4e8c;box-shadow:0 0 3px rgba(0,0,0,0.4);transition:all 0.3s}
.nav .deps3 > li > a{position:relative;display:block;padding:5px 12px;color:#c0cadd}
.nav .deps3 > li.on > a{color:#fff;}
.nav .deps3 > li.on > a:before{display:inline-block;content:'';border-radius:10px;width:4px;height:4px;margin-right:4px;background:#fff;vertical-align:middle;}
.nav .deps2 > li.on > a{background:#5988b2}
.nav > li.on > .btn_cm{border-color:#5988b2;background:#5988b2}
.nav > li.on > .box_deps2, 
.nav > li.on .deps2 > li.on > .deps3, 
.nav_wrap.on .nav:after, 
.nav_wrap.on .img_banner{visibility:visible;opacity:1}
@media all and (max-height:770px){
	.nav_wrap .img_banner{bottom:100%;}
}

.aside{position:fixed;top:80px;right:0;height:100%;z-index:1;background:#e9edf5;font-family:'notokr-DemiLight';box-sizing:border-box;}
.side_menu{padding:90px 12px 0 13px;}
.side_menu > li{text-align:center;margin-bottom:20px}
.side_menu .btn_cm{display:block;color:#9ca4b7;font-size:12px;transition:color 0.4s}
.side_menu .btn_cm:before{overflow:hidden;display:block;content:'';width:60px;height:60px;margin:0 auto 6px;border-radius:100%;background:#bbc1ce;transition:background 0.3s}
.side_menu .btn_cm:after{overflow:hidden;position:absolute;content:'';z-index:1;}
.side_menu .btn_cm:hover{color:#000;}
.side_menu .btn_side1:after{top:20px;left:24px;width:41px;height:41px;background-position:-130px -28px}
.side_menu .btn_side2:after{top:21px;left:17px;width:40px;height:19px;background-position:-176px -28px}
.side_menu .btn_side3:after{top:15px;left:22px;width:29px;height:30px;background-position:-222px -28px}
.side_menu .btn_side4:after{top:15px;left:22px;width:30px;height:29px;background-position:-256px -28px}
.side_menu .color1 .btn_cm:before{background-color:#877671;}
.side_menu .color2 .btn_cm:before{background-color:#393f4d;}

.allmenu_box{position:fixed;top:0;bottom:0;right:-100%;width:200px;background:#ee9881;box-shadow:inset 2px 0 2px #be7a67;z-index:10;}
.allmenu_box .allmenu_list{padding:20px 0 20px 20px;height:100%;box-sizing:border-box;}
.allmenu_box .allmenu_list .mCSB_dragger_bar{background-color:rgba(0,0,0,0.2);}
.allmenu_box .allmenu_list .mCustomScrollBox{padding-right:20px;}
.allmenu_list li{margin-top:10px;}
.allmenu_list li:first-child{margin-top:0 !important;}
.allmenu_list li a{display:block;color:#fff;line-height:1.5;font-family:'notokr-DemiLight';font-size:12px;transition:all 0.3s;}
.allmenu_list li.on a, .allmenu_list li a:hover{color:#b24f34;}
.allmenu_list .deps2, .allmenu_list .deps3{padding:6px 0;}
.allmenu_list .deps2 li{margin-top:2px;padding-left:10px;}

.article{width:100%;box-sizing:border-box;}
.article:before{content:'';position:fixed;top:120px;left:0;width:100%;height:1px;background:#dde1ea;z-index:2;}

.footer{padding-top:8px;}
.footer .txt_copy{display:inline-block;float:left;margin-top:8px;font-family:'Tahoma';font-size:10px;color:#c4c9d6;letter-spacing:0}
.footer .select{float:right;min-width:160px;border:1px solid #dbdfe9;height:30px;background:#e9edf5;padding:0 0 0 5px}

.lnb{height:30px;padding-top:10px;background:#e6eaf2;text-align:right;}
.lnb > li{overflow:hidden;position:relative;display:inline-block;padding-left:10px;margin-left:5px;font-family:'notokr-DemiLight';}
.lnb > li:after{position:absolute;top:5px;left:0;content:'';display:inline-block;width:0;height:0;border-top:3px solid transparent;border-left:3px solid #a5aab9;border-bottom:3px solid transparent;vertical-align:middle;}
.lnb > .home:before{content:'';width:8px;height:8px;margin-right:5px;background-position:-30px 0;vertical-align:middle;}
.lnb > .home:after{display:none;}

.sub_tit{height:60px;}
.sub_tit .tit_deps1{font-size:28px;color:#35466a;font-family:'notokr-DemiLight'}

/* 임시스타일  */
.tbl_sheet{min-height:300px;border:1px solid #d2d2d2;box-sizing:border-box;}


/*** main ****/
.btn_ctrl_unit{padding-right:4px}
.btn_ctrl_unit .btn_cm{display:inline-block;width:22px;height:22px;border:1px solid #e3e8f0;border-radius:2px;vertical-align:middle;text-align:center;box-sizing:border-box;transition:all 0.4s}
.btn_ctrl_unit .btn_cm:hover{background:#dde2eb;border:1px solid #cbd5e0}
.cal_top_ctrl{position:relative;height:50px;text-align:center}
.cal_top_ctrl .btn_cm{display:block;position:absolute;top:12px;width:12px;height:17px}
.cal_top_ctrl .btn_prev{left:0}
.cal_top_ctrl .btn_next{right:0}
.cal_top_ctrl .txt_year{position:absolute;top:32px;left:0;width:100%;font-size:12px;color:#788197}
.cal_top_ctrl .txt_month{display:block;font-size:32px;color:#222a3c;font-family:'Century Gothic';line-height:1}
.calender_wrap{position:fixed;top:80px;left:100px;width:319px;height:100%;border-right:1px solid #d1d5dc;z-index:2;background-color:#e9edf5;}
.calender_wrap .split{height:59px;background-color:#e3e8f0;border-bottom:1px solid #dde2ea}
.calender_wrap .tit_cal{padding:8px 0 0 20px;font-size:16px;color:#646d81}
.calender_tbl{padding:18px 22px}
.tbl_calender th, .tbl_calender td{height:45px;text-align:center;font-size:12px;font-weight:bold;font-family:'notokr-DemiLight'}
.tbl_calender thead th{height:34px;color:#e66b6b}
.tbl_calender tbody td{color:#cacaca}
.tbl_calender tbody td a{display:inline-block;position:relative;width:34px;height:23px;padding-top:11px;border-radius:50px;color:#555;text-align:center;vertical-align:middle;transition:background 0.2s}
.tbl_calender .selected, .tbl_calender tbody td a:hover{background:#fff}
.tbl_calender .today{background:#877671;color:#fff}
.tbl_calender .cal_add:after{position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;content:'';border-radius:10px;background:#ff0054}
.tbl_calender .txt_red{color:#e66b6b}
.calender_list{background:#e4e9f1;border-top:1px solid #dde1e8}
.calender_list li{padding:18px 10px;border-bottom:1px solid #dde1e8;transition:background 0.4s}
.calender_list li:hover{background:#dbe0ea}
.calender_list .txt_date{position:relative;display:table-cell;width:54px;border-right:1px solid #bdc3cc;font-family:'Century Gothic'; color:#444;font-weight:bold;text-align:center;vertical-align:middle}
.calender_list .txt_date > abbr{display:block;padding-top:18px;font-size:9px;text-align:}
.calender_list .txt_date > .day{position:absolute;left:0;top:0;width:100%;font-size:20px;line-height:0.7}
.calender_list .txt_cont{display:table-cell;padding-left:18px;vertical-align:middle}
.calender_list .txt_cont .tit{display:block;margin-top:3px;font-size:14px;font-weight:normal;font-family:'notokr-DemiLight'}
.calender_list .list_scroll{height:465px}

.category_wrap{overflow:hidden;}
.category_wrap .category{float:left;}
.category{display:inline-block;padding:2px 5px 0;padding-top:4px\9;height:16px;border-radius:2px;text-align:center;color:#fff;font-size:10px;line-height:1.2;font-family:'notokr-DemiLight';box-sizing:border-box;}
.category.ing{background-color:#5d84a2}
.category.end{background-color:#8f939b}

.top_temprt{height:59px;margin-bottom:20px;border-bottom:1px solid #dce1eb;box-shadow:0 1px 0 #eef1f7;color:#646d81;font-family:'notokr-DemiLight'}
.top_temprt .tit{width:1%;padding:8px 30px 0 0;font-size:16px;font-weight:bold;white-space:nowrap}
.top_temprt .tit .txt{padding-right:16px;}
.top_temprt .txt_temprt{font-size:38px;font-family:'Century Gothic'}
.top_temprt .txt_temprt .txt_s{font-size:26px;font}
.status_wrap .list_status{display:table;width:100%;table-layout:fixed}
.status_wrap .list_status:after{content:'';display:block;clear:both}
.status_wrap li{position:relative;display:table-cell;width:12.8%;text-align:center;vertical-align:middle;font-family:'notokr-DemiLight'}
.status_wrap li a{position:relative;display:block;height:140px;padding:24px 5px;margin-right:10px;border:1px solid #dde1e9;border-radius:6px;background:#fff;box-shadow:1px 1px 1px #e9e9e9;box-sizing:border-box;z-index:1;transition:all 0.4s}
.status_wrap .btn_box{width:11%}
.status_wrap .btn_box a{padding:48px 15px 0;margin-right:0;background-color:#f2f4f9 !important;border:none;box-shadow:none}
.status_wrap .tit{display:block;height:54px;color:#434957;font-size:16px;line-height:16px}
.status_wrap .txt_num{display:block;color:#e93e3e;font-size:36px;font-family:'Century Gothic';line-height:1}
.status_wrap .btn_more2{display:none}
.status_wrap a:hover{background-color:#5988b2;color:#fff}
.status_wrap a:hover .tit{height:auto;padding-top:42px;color:#fff}
.status_wrap a:hover .txt_num{position:absolute;top:22px;left:0;right:0;text-align:center; color:#fff}
.status_wrap a:hover .btn_more2{display:block;margin-top:6px}





/**************************************************
	CONTENT
**************************************************/
/* login */
.login{height:100%;min-width:320px;background:#000 url(../../images/index/bg_join_login.jpg) 50% 50% no-repeat;background-size:cover;text-align:center}
.login:before, .login:after{position:fixed;left:50%;content:'';margin-left:-39px;width:80px;background:url(../../images/index/bg_line_y.png) 0 0 repeat-y} 
.login:before{bottom:50%;margin-bottom:265px;height:100%}
.login:after{bottom:0;height:45%;margin-bottom:-275px}
.login > form, .login form > .fld{height:100%}
.login .fld > legend{position:absolute;left:-9999px}
.login .fld:before{display:inline-block;width:0;height:100%;content:'';vertical-align:middle}
.login .login_wrap{display:inline-block;width:300px;vertical-align:middle;text-align:center}
.login_wrap .logo{padding-bottom:30px}
.login_wrap .inp{width:100%;height:48px;margin-top:10px;border:none;border-bottom:1px solid #2d3939;background:transparent;font-size:16px;color:#fff;box-sizing:border-box;line-height:48px;border-box}
.login_wrap .btn_w{position:relative;margin-top:30px}
.login_wrap .btn_login{display:block;width:100%;border:1px solid #877671;color:#877671;height:48px;box-sizing:border-box}
.login_wrap .chk_area{position:absolute;left:0;bottom:-1px}
.login_wrap .chk + label{color:#877671}
.login_wrap .chk + label:before{width:19px;height:19px;background-position:-50px -68px}
.login_wrap .chk[type='checkbox']:checked + label:before{background-position:-70px -68px}
.login_wrap .btn_search_idpw{display:block;padding-top:20px;text-align:right;color:#877671;font-family:'Malgun Gothic';text-decoration:underline;font-size:12px}
.login_wrap .ico_imp{font-family:'Malgun Gothic';margin-top:62px;padding-left:16px;color:#f54470;font-size:11px;letter-spacing:-1px;text-align:left}
.login_wrap .ico_imp:before{position:absolute;left:0;top:1px}

저작자표시

'IT정보 > TIP' 카테고리의 다른 글

[TIP] @가이드만들기(menulist) (0)	2016.12.07
[TIP] IIS localhost 잡는방법 (0)	2016.12.06
[TIP] 코드정리기 (0)	2015.11.13
[TIP] esing 확인 (0)	2015.11.12
[TIP] 사이트 (0)	2015.10.21

'IT정보/TIP' Related Articles

전체선택	No.	매장정보		총 매출		공급가액	부가세	현금		카드
전체선택	No.	매장코드	매장명	금액	건수	공급가액	부가세	금액	건수	금액	건수
선택	51	TS0012	Reebok	88,500	27	81,120	81,120	81,120	10	81,000	10
선택	51	TS0012	Reebok	88,500	27	81,120	81,120	81,120	10	81,000	10
선택	51	TS0012	Reebok	88,500	27	81,120	81,120	81,120	10	81,000	10
선택	51	TS0012	Reebok	88,500	27	81,120	81,120	81,120	10	81,000	10
선택	51	TS0012	Reebok	88,500	27	81,120	81,120	81,120	10	81,000	10

개인공간

[TIP] @가이드만들기 본문

[TIP] @가이드만들기

ie9이상 맞춰진 가이드 형태(ie8은 버튼만 맞추면 될듯)

가이드 head

가이드 body

버튼

A 태그

기본스타일

disabled처리(클래스사용)

BUTTON 태그

기본스타일

disabled처리(속성사용)

버튼 사이즈

아래 기능버튼인경우(.btn_area > .btn)

아이콘 버튼형 (텍스트있는경우 .blind 삭제)

버튼 안 아이콘형태

폼

체크박스

기본스타일

텍스트형태 (.chk_area)

고정간격 (.fld > .chk_area)

폼박스 스타일

인풋 오른쪽 버튼형

테이블

col 스타일

Table style A

Board 스타일

페이징/탭

페이징

paging style A

paging style B

탭 스타일

참고사이트 : sub_list.html

검색영역

상단검색

버튼이 있는경우

버튼이 없는경우

컨텐츠

컨텐츠 영역 분리형

시트 상단인 경우

컨텐츠 타이틀인경우

시트 하단인 경우

카테고리별

스타일

카테고리 그룹형

'IT정보 > TIP' 카테고리의 다른 글

티스토리툴바