달력

.IBPickMY

.IBPickMY은 이전 달, 다음 달 그리고 년/월의 문자열 및 년/월, 월/일의 달력 변환 기능이 있는 영역을 관리하는 클래스입니다.

.IBPickMY{
  /* 배경색 변경 */
  background: #000000;
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 달력 상단 영역

확인하기

.IBPickBL

.IBPickBL은 이전 달로 이동하는 버튼의 이미지를 관리하는 클래스입니다.

.IBPickBL {
  /* 이미지 및 크기 변경 */
  background: no-repeat center 5px/20px url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNzA3MSAxNC43MDcxQzEyLjMxNjYgMTUuMDk3NiAxMS42ODM0IDE1LjA5NzYgMTEuMjkyOSAxNC43MDcxTDYuMjkyODkgOS43MDcxMUM1LjkwMjM3IDkuMzE2NTggNS45MDIzNyA4LjY4MzQyIDYuMjkyODkgOC4yOTI4OUM2LjY4MzQyIDcuOTAyMzcgNy4zMTY1OCA3LjkwMjM3IDcuNzA3MTEgOC4yOTI4OUwxMiAxMi41ODU4TDE2LjI5MjkgOC4yOTI4OUMxNi42ODM0IDcuOTAyMzcgMTcuMzE2NiA3LjkwMjM3IDE3LjcwNzEgOC4yOTI4OUMxOC4wOTc2IDguNjgzNDIgMTguMDk3NiA5LjMxNjU4IDE3LjcwNzEgOS43MDcxMUwxMi43MDcxIDE0LjcwNzFaIiBmaWxsPSIjMDAwMDAwIi8+DQo8L3N2Zz4=) #FFFFFF;
  transform: rotate(90deg) translate(5px, -5px);
  width: 25px;
  height: 25px;
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 이전달 버튼

확인하기

.IBPickBR

.IBPickBR은 다음 달로 이동하는 버튼의 이미지를 관리하는 클래스입니다.

.IBPickBR {
  /* 이미지 및 크기 변경 */
  background: no-repeat center 5px/20px url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNzA3MSAxNC43MDcxQzEyLjMxNjYgMTUuMDk3NiAxMS42ODM0IDE1LjA5NzYgMTEuMjkyOSAxNC43MDcxTDYuMjkyODkgOS43MDcxMUM1LjkwMjM3IDkuMzE2NTggNS45MDIzNyA4LjY4MzQyIDYuMjkyODkgOC4yOTI4OUM2LjY4MzQyIDcuOTAyMzcgNy4zMTY1OCA3LjkwMjM3IDcuNzA3MTEgOC4yOTI4OUwxMiAxMi41ODU4TDE2LjI5MjkgOC4yOTI4OUMxNi42ODM0IDcuOTAyMzcgMTcuMzE2NiA3LjkwMjM3IDE3LjcwNzEgOC4yOTI4OUMxOC4wOTc2IDguNjgzNDIgMTguMDk3NiA5LjMxNjU4IDE3LjcwNzEgOS43MDcxMUwxMi43MDcxIDE0LjcwNzFaIiBmaWxsPSIjMDAwMDAwIi8+DQo8L3N2Zz4=) #FFFFFF;
  transform: rotate(-90deg) translate(-5px, -5px);
  width: 25px;
  height: 25px;
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 다음달 버튼

확인하기

.IBPickMYDown

.IBPickMYDown은 년/월 달력으로 변경하는 버튼의 이미지를 관리하는 클래스입니다.

.IBPickMYDown {
  /* 이미지 변경 */ 
  background: no-repeat right/20px url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNzA3MSAxNC43MDcxQzEyLjMxNjYgMTUuMDk3NiAxMS42ODM0IDE1LjA5NzYgMTEuMjkyOSAxNC43MDcxTDYuMjkyODkgOS43MDcxMUM1LjkwMjM3IDkuMzE2NTggNS45MDIzNyA4LjY4MzQyIDYuMjkyODkgOC4yOTI4OUM2LjY4MzQyIDcuOTAyMzcgNy4zMTY1OCA3LjkwMjM3IDcuNzA3MTEgOC4yOTI4OUwxMiAxMi41ODU4TDE2LjI5MjkgOC4yOTI4OUMxNi42ODM0IDcuOTAyMzcgMTcuMzE2NiA3LjkwMjM3IDE3LjcwNzEgOC4yOTI4OUMxOC4wOTc2IDguNjgzNDIgMTguMDk3NiA5LjMxNjU4IDE3LjcwNzEgOS43MDcxMUwxMi43MDcxIDE0LjcwNzFaIiBmaWxsPSIjMDAwMDAwIi8+DQo8L3N2Zz4=);
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 년/월 달력으로 변경 버튼

확인하기

.IBMain span

.IBMain span은 달력에서 년/월의 문자열이 출력 되는 영역을 관리하는 클래스입니다.

.IBMain span {
  /* 글자색 변경 */
  color: #ffffff;
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 년/월의 문자열

확인하기

.IBPickRowW

.IBPickRowW은 요일이 출력 되는 영역을 관리하는 클래스입니다.

.IBPickRowW {
  /* 배경색 변경 */
  background: #affffc;
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 요일 영역

확인하기

.IBPickWDN.IBPickSu

.IBPickWDN.IBPickSu은 월/일 달력에서 요일이 출력 되는 영역에서 일요일을 관리하는 클래스입니다.

.IBPickWDN.IBPickSu {
  /* 글자색 변경 */
  color: #0043ff;
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 요일 영역 중 일요일

확인하기

.IBPickWDN.IBPickSa

.IBPickWDN.IBPickSa은 월/일 달력에서 요잉이 출력 되는 영역에서 토요일을 관리하는 클래스입니다.

.IBPickWDN.IBPickSa {
  /* 글자색 변경 */
  color: #ec264b;
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 요일 영역중 토요일

확인하기

.IBPickSu, .IBPickSu button

IBPickSu, .IBPickSu button은 월/일 달력에서 날짜가 출력 되는 영역에서 일요일을 관리하는 클래스입니다.

.IBPickSu, .IBPickSu button {
  /* 글자색 변경 */
  color: #0043ff;
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 날짜 영역중 일요일

확인하기

.IBPickSa, .IBPickSa button

.IBPickSa, .IBPickSa button은 월/일 달력에서 날짜가 출력 되는 영역에서 토요일을 관리하는 클래스입니다.

.IBPickSa, .IBPickSa button {
  /* 글자색 변경 */
  color: #ec264b;
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 날짜 영역중 토요일

확인하기

.IBPickOM, .IBPickOMNE, .IBPickOM button

.IBPickOM, .IBPickOMNE, .IBPickOM button은 월/일 달력에서 날짜가 출력 되는 영역에서 이번 달이 아닌 날짜를 관리하는 클래스입니다.

.IBPickOM, .IBPickOMNE, .IBPickOM button {
  /* 글자색 변경 */
  color: #44baba
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 이번 달이 아닌 날짜

확인하기

.IBPickOM.IBPickSu, .IBPickOM.IBPickSu button

.IBPickOM.IBPickSu, .IBPickOM.IBPickSu button은 월/일 달력에서 날짜가 출력 되는 영역에서 이번 달이 아닌 날짜 중 일요일를 관리하는 클래스입니다.

.IBPickOM.IBPickSu, .IBPickOM.IBPickSu button {
  /* 글자색 변경 */
color: green;
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 이번 달이 아닌 날짜 중 일요일

확인하기

.IBPickOM.IBPickSa, .IBPickOM.IBPickSa button

.IBPickOM.IBPickSa, .IBPickOM.IBPickSa button은 월/일 달력에서 날짜가 출력 되는 영역에서 이번 달이 아닌 날짜 중 토요일를 관리하는 클래스입니다.

.IBPickOM.IBPickSa, .IBPickOM.IBPickSa button {
  /* 글자색 변경 */
  color: #6decd6;
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 이번 달이 아닌 날짜 중 토요일

확인하기

.IBPickSel, .IBPick2MSel, .IBPick2YSel

.IBPickSel, .IBPick2MSel, .IBPick2YSel은 선택된 날짜에 적용되는 클래스입니다.

.IBPickSel, .IBPick2MSel, .IBPick2YSel {
  /* 배경색 변경 */
  background-color: #3ed736;
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 날짜 선택

확인하기

.IBPickHover, .IBPick2MHover, .IBPick2YHover

.IBPickHover, .IBPick2MHover, .IBPick2YHover은 Hover된 날짜에 적용되는 클래스입니다.

.IBPickHover, .IBPick2MHover, .IBPick2YHover {
  /* 배경색 변경 */
  background-color: #faaaaa;
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 날짜 Hover

확인하기

.IBPickNow

.IBPickNow은 월/일 달력에서 해당 일이 오늘인 경우 적용되는 클래스입니다.

.IBPickNow {
  /* 배경색 변경 */
  background-color: #b1a5fd;
}

기본 테마	커스텀 적용
기본 테마의 달력	커스텀 오늘 날짜

확인하기

.IBPickMYUp

.IBPickMYUp은 월/일 달력으로 변경하는 버튼의 이미지를 관리하는 클래스입니다.

.IBPickMYUp {
  /* 이미지 변경 */
  background: no-repeat right/20px url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNzA3MSAxNC43MDcxQzEyLjMxNjYgMTUuMDk3NiAxMS42ODM0IDE1LjA5NzYgMTEuMjkyOSAxNC43MDcxTDYuMjkyODkgOS43MDcxMUM1LjkwMjM3IDkuMzE2NTggNS45MDIzNyA4LjY4MzQyIDYuMjkyODkgOC4yOTI4OUM2LjY4MzQyIDcuOTAyMzcgNy4zMTY1OCA3LjkwMjM3IDcuNzA3MTEgOC4yOTI4OUwxMiAxMi41ODU4TDE2LjI5MjkgOC4yOTI4OUMxNi42ODM0IDcuOTAyMzcgMTcuMzE2NiA3LjkwMjM3IDE3LjcwNzEgOC4yOTI4OUMxOC4wOTc2IDguNjgzNDIgMTguMDk3NiA5LjMxNjU4IDE3LjcwNzEgOS43MDcxMUwxMi43MDcxIDE0LjcwNzFaIiBmaWxsPSIjMDAwMDAwIi8+DQo8L3N2Zz4=);
}

기본 테마	커스텀 적용
기본 테마의 년월 달력	커스텀 월/일 달력으로 변경 버튼

확인하기

.IBPick2BL

.IBPick2BL은 년/월 달력에서 이전 년도로 이동하는 버튼의 이미지에 적용되는 클래스입니다.

.IBPick2BL {
  /* 이미지 변경 */
  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+PHBhdGggZD0iTTEuMjkzLDEyLjcwN2ExLDEsMCwwLDEsMC0xLjQxNGw1LTVBMSwxLDAsMCwxLDcuNzA3LDcuNzA3TDQuNDE0LDExSDIyYTEsMSwwLDAsMSwwLDJINC40MTRsMy4yOTMsMy4yOTNhMSwxLDAsMSwxLTEuNDE0LDEuNDE0WiI+PC9wYXRoPjwvZz48L3N2Zz4=)
}

기본 테마	커스텀 적용
기본 테마의 년월 달력	커스텀 이전 년도 버튼

확인하기

.IBPick2BR

.IBPick2BR은 년/월 달력에서 다음 년도로 이동하는 버튼의 이미지에 적용되는 클래스입니다.

.IBPick2BR {
  /* 이미지 변경 */
  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+PHBhdGggZD0iTTE2LjcwNywxOC43MDdhMSwxLDAsMCwxLTEuNDE0LTEuNDE0TDE5LjU4NiwxM0gyYTEsMSwwLDAsMSwwLTJIMTkuNTg2TDE1LjI5Myw2LjcwN2ExLDEsMCwwLDEsMS40MTQtMS40MTRsNiw2YTEsMSwwLDAsMSwwLDEuNDE0WiI+PC9wYXRoPjwvZz48L3N2Zz4=)
}

기본 테마	커스텀 적용
기본 테마의 년월 달력	커스텀 다음 년도 버튼

확인하기

.IBPick2Footer

.IBPick2Footer은 달력의 하단 영역을 관리하는 클래스입니다.

.IBPick2Footer {
  /* 배경색 변경 */
  background: #abff17;
  /* 여백 변경 */
  padding: 10px 0px 10px 0px;
}

기본 테마	커스텀 적용
기본 테마의 년월 달력	커스텀 달력 하단 영역>

확인하기

.IBPickButton

.IBPickButton은 달력의 하단 영역에 있는 버튼을 관리하는 클래스입니다.

.IBPickButton{
  /* 배경색 변경 */
  background: orange;
}

기본 테마	커스텀 적용
기본 테마의 년월 달력	커스텀 달력 하단 영역 버튼

확인하기