이레

화면 작업을 하다 보면 select를 커스텀해야 하는 경우가 많습니다. css로는 한계가 있을때 nice-select 플러그인을 사용했습니다. 1. 소스파일 다운로드 jQuery Nice Select Usage 1. Include jQuery and the plugin. 2. Include the plugin styles, either the compiled CSS... ...or, ideally, import the SASS source (if you use SASS) in your main stylesheet for easier customization. @import 'nice-select'; // Or 'nice-select-prefixed'. jqueryniceselect.hernansartor..

setInterval() 을 이용해 카운트다운 타이머를 만들어 봅니다. 조건) ⭐️ 시간, 분, 초 를 입력할 수 있어야 합니다. ⭐️ start, stop, reset 버튼이 있어야 합니다. ⭐️ 각 버튼이 맞게 동작해야합니다. ⭐️ 카운트다운이 시작되면 시간 수정이 불가능합니다. ( 정지하거나 리셋하면 수정 가능) 목표는 기능이 잘 돌아가게끔 하는 거라 형태와 스타일은 간단히 작성합니다. : : START STOP RESET .wrap {padding-top:100px;} .timer {display:flex;align-items:center;justify-content:center;} input {width:150px;height:150px;background-color:#4c6ef5;border-..

jquery-ui 플러그인에는 다양한 기능들이 있습니다. 자주 사용하는 기능 중에 드래그 앤 드롭이 있는데, 정렬기능인 sortable()을 사용하지만, 모바일에서는 인식이 잘 안 되는 문제가 있습니다. 이걸 해결하기 위한 플러그인이 jQuery UI Touch Punch 입니다. jquery-ui 밑에 작성해 주면 바로 적용됩니다.

자바스크립트 배열 데이터를 추가, 삭제하는 방법입니다. ⭐️ 배열 추가 1) push() - 배열 마지막에 요소 추가 var arr = ['가', '나', '다']; arr.push('라'); console.log(arr); //결과 ['가', '나', '다', '라'] 2) unshift() - 배열 첫 번째에 요소 추가 var arr = ['가', '나', '다']; arr.unshift('라'); console.log(arr); //결과 [ '라','가', '나', '다'] 3) splice() - 기존 배열을 삭제 또는 교체, 새 요소 추가 splice(n, n2, 요소) n은 추가, 제거할 배열의 요소 위치를 정합니다. n2는 제거할 배열의 요소 개수를 정합니다. 밑에 예시를 보면 1번째 요소에..

strict 모드란 ES5에 추가된 키워드입니다. 자바스크립트를 엄격하게 문법검사 하겠다는 의미입니다. ⭐️ strict 모드 선언하기 "use strict"; 스크립트 최상단 또는 함수 본문 앞에 작성해 줍니다. 함수 앞에 사용할 경우 해당 함수만 엄격모드로 실행됩니다. ⭐️ strict 모드 - 코드의 문제를 더 빨리 알리고 디버깅이 쉬워집니다. - strict 모드의 코드는 비 strict 모드 코드보다 빠르게 수행될 수 있습니다. - 발생 가능한 에러를 예방합니다.

Javascript의 배열 속에 특정 문자열을 포함하는지 체크하는 함수입니다. ✨ 문법 string.includes(찾고싶은 문자, length) 찾고싶은 문자 : 검색할 문자열, 필수 값, 대소문자를 꼭 구분해야 합니다. length : 검색을 시작할 위치를 지정해 줍니다. 필수 값이 아니므로 값이 없으면 전체 문자열이 대상이 됩니다. ✨ 예제 'abcde'.includes('c') //abcde에 c를 포함하는지 검사합니다. c를 포함하면 true 반환 'abcdef'.includes('c', 2) //2째 위치 (0부터 시작)인 cdef에 c를 포함하는지 검사합니다. c를 포함하면 true 반환 'ABcdef'.includes('b') //대소문자를 구분해야 하므로, b가 포함되어있지 않습니다. f..

자바스크립트의 삼항 연산자에 대해 알아보겠습니다. if 문을 간략하게 표현할 때 사용합니다. 참, 거짓 중 하나를 선택할 수 있는 조건문으로 '조건 연산자'라고도 합니다. ✨ 삼항 연산자 표현법 (조건) ? value1 : value2 조건이 참인 경우 첫번째 value1이 실행되고 거짓인경우 마지막 value2가 실행됩니다. ✨ 삼항 연산자 예시 //if문 사용 if(a > b){ c = "hi"; }else{ c = "bye"; } //삼항연산자 사용 (a > b) ? c = "hi" : c = "bye";

Swiper Slider 와 같이 자주 사용되는 Slick slider 사용법입니다. 반응형 웹을 지원하는 슬라이더 라이브러리 입니다 :) 제일 먼저 할 일은 슬릭 슬라이드 홈페이지에서 css, js 파일을 다운로드 하는것입니다. 1. 사이트 접속 후 필요한 파일 다운로드하기 http://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 2. 코드 작업란에 ..

자바스크립트에서 연산자는 계산을 돕는 기호를 의미합니다. ✨ 산술 연산자 (Arithmetic Operators) 수식을 계산하도록 도와주는 연산자입니다. 사칙연산과 나머지, 증가, 감소 연산이 있습니다. 연산자 이름 사용법 + 덧셈 a + b - 뺄셈 a - b * 곱셈 a * b / 나누기 (몫) a / b % 나누기 (나머지) a % b ++ 증가 ( +1) a++ -- 감소 ( -1) a-- ✨ 대입 연산자 연산자 이름 사용법 a = b 할당 a = b a += b 더하고 할당 a= a + b a -= b 빼고 할당 a = a - b a *= b 곱하고 할당 a = a * b a /= b 나누고 할당 a = a / b a %= b 나눈 나머지 할당 a= a % b ✨ 비교 연산자 (Comparis..

$('[id$=Form]'); //Form 으로 끝나는 id 찾기 $('[id^=Form]'); //Form 으로 시작하는 id 찾기