티스토리

이레

검색하기

블로그 홈

이레

sevendays.tistory.com/m

개발 공부 ing

구독자: 2

방명록 방문하기

주요 글 목록

[Jquery] selectBox 커스텀 / 셀렉트박스 옵션 변경 / select 플러그인 / 나이스 셀렉트 사용법 화면 작업을 하다 보면 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.. 공감수 0 댓글수 0 2024. 3. 26.
[javascript] 카운트다운 타이머 만들기 / 자바스크립트 setInterval() 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-.. 공감수 0 댓글수 0 2023. 12. 12.
[JS] jquery UI Touch Punch jquery-ui 플러그인에는 다양한 기능들이 있습니다. 자주 사용하는 기능 중에 드래그 앤 드롭이 있는데, 정렬기능인 sortable()을 사용하지만, 모바일에서는 인식이 잘 안 되는 문제가 있습니다. 이걸 해결하기 위한 플러그인이 jQuery UI Touch Punch 입니다. jquery-ui 밑에 작성해 주면 바로 적용됩니다. 공감수 0 댓글수 0 2023. 6. 14.
[javascript] 자바스크립트 배열 추가 자바스크립트 배열 데이터를 추가, 삭제하는 방법입니다. ⭐️ 배열 추가 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번째 요소에.. 공감수 0 댓글수 0 2023. 5. 8.
[Javascript] 엄격모드 use strict 란? strict 모드란 ES5에 추가된 키워드입니다. 자바스크립트를 엄격하게 문법검사 하겠다는 의미입니다. ⭐️ strict 모드 선언하기 "use strict"; 스크립트 최상단 또는 함수 본문 앞에 작성해 줍니다. 함수 앞에 사용할 경우 해당 함수만 엄격모드로 실행됩니다. ⭐️ strict 모드 - 코드의 문제를 더 빨리 알리고 디버깅이 쉬워집니다. - strict 모드의 코드는 비 strict 모드 코드보다 빠르게 수행될 수 있습니다. - 발생 가능한 에러를 예방합니다. 공감수 0 댓글수 0 2023. 3. 24.
[Javascript] 특정 문자열을 포함 하는지 확인 / .include() 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.. 공감수 0 댓글수 0 2022. 12. 8.
[Javascript] 물음표 ? 삼항연산자 / 조건 연산자 / 조건문 자바스크립트의 삼항 연산자에 대해 알아보겠습니다. if 문을 간략하게 표현할 때 사용합니다. 참, 거짓 중 하나를 선택할 수 있는 조건문으로 '조건 연산자'라고도 합니다. ✨ 삼항 연산자 표현법 (조건) ? value1 : value2 조건이 참인 경우 첫번째 value1이 실행되고 거짓인경우 마지막 value2가 실행됩니다. ✨ 삼항 연산자 예시 //if문 사용 if(a > b){ c = "hi"; }else{ c = "bye"; } //삼항연산자 사용 (a > b) ? c = "hi" : c = "bye"; 공감수 0 댓글수 0 2022. 12. 5.
[Slide] Slick slider 사용법 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. 코드 작업란에 .. 공감수 1 댓글수 0 2022. 11. 22.
[JS] 자바스크립트 연산자(Operators) 자바스크립트에서 연산자는 계산을 돕는 기호를 의미합니다. ✨ 산술 연산자 (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.. 공감수 0 댓글수 0 2022. 8. 31.
[jqeury] 비슷한 id 찾기 $('[id$=Form]'); //Form 으로 끝나는 id 찾기 $('[id^=Form]'); //Form 으로 시작하는 id 찾기 공감수 1 댓글수 0 2022. 7. 22.
[jqeury] input 에 value 값 넣기 input 태그에 제이쿼리를 이용해 val 값 넣는 방법입니다. $(".input").attr("value","넣고싶은값"); 공감수 0 댓글수 0 2022. 6. 24.
[Javascript] Enter keycode 처리하기 데이터를 입력 후 엔터키를 이용해 처리하는 방법입니다. 엔터키의 키 코드를 알고 있어야 하는데, 엔터의 키 코드는 13입니다. 버튼에 적용하는게 아닌 input 태그에 onkeyup으로 적용시켜줍니다. function fnEnterkey() { if (window.event.keyCode == 13) { //엔터키로 실행시킬 기능작성 } } 공감수 0 댓글수 0 2022. 5. 19.
[Javascript] for문을 이용해 구구단 출력하기 이중 for문을 통해 2단에서 9단을 출력합니다. 첫 번째 for 문에서는 단을 나타내는 변수 i를 설정하고 두 번째 for문에서는 곱해질 수의 변수 j를 설정합니다. 태그를 통해 줄 바꿈을 해줍니다. See the Pen Untitled by jh-baek-95 (@jh-baek-95) on CodePen. 공감수 0 댓글수 0 2022. 4. 15.
[자바스크립트] 클로저 함수 클로저 함수란? 함수 내부에 만든 지역변수가 사라지지 않고 계속해서 값을 유지하고 있는 상태를 말합니다. 클로저 함수는 일종의 '현상' 이기 때문에 정해진 규칙은 없습니다. ⭐️ 예제 function basic(){ var count = 0; count++; return count; }; document.write(basic()+' '); //출력값 : 1 function closure(){ var count = 0; function countSample(){ count++; return count; } return countSample; } var counter = closure(); document.write('1, count' + counter(),' '); document.write('2, cou.. 공감수 0 댓글수 0 2022. 2. 15.
[자바스크립트] 콜백함수 콜백 함수란? 함수 내부의 처리 결과값을 함수 외부로 내보낼 때 사용합니다. 처음 공부할 때 굉장히 헷갈렸던 부분이어서 차근차근 정리하겠습니다. ⭐️ 동기 , 비동기 동기 : 말 그대로 '동시에' 일어난다는 뜻입니다. 이벤트가 동시에 일어나야 하기 때문에, 요청을 한다면 시간이 얼마나 걸리든 결과가 같이 나와야 합니다. ex) alert() 함수 / alert 함수는 메시지 창의 확인 버튼을 눌러야 다음 이벤트가 진행됩니다. 비동기 : 동시에 일어나지 '않는다' 이벤트가 동시에 일어나지 않기 때문에, 1번 요청을 하고 1번 결과가 나오기 전에 2,3,4.. 요청들을 처리합니다. ex) setInterval() , ajax() 콜백 함수가 주로 비동기 함수의 결과값을 처리하기 위한 도구로 많이 사용됩니다... 공감수 0 댓글수 0 2022. 2. 15.
[자바스크립트] 중첩 함수 중첩 함수란? 함수 내부에 함수가 들어가는 형태를 말합니다. function outer(){ function inner(){ } inner(); } outer(); 1, 내부 전용 함수일 때 사용 function countSec(){ var count = 0; setInterval(function(){ count++ $('.text').html(count + "초 입니다."); }, 1000) } countsec(); 1초에 한번씩 해당 텍스트를 출력해줍니다. countSec() 함수 내부에 serInterval() 함수가 중첩되어있습니다. 2, 중복 코드 또는 코드 그룹화할 때 사용 함수 내부의 기능이나 중복 코드를 내부 함수로 만들어 재사용할 때 중첩 함수를 사용합니다. 공감수 0 댓글수 0 2022. 2. 9.
[자바스크립트] 반복문 for 반복문이란? 특정 구문을 여러 번 반복해서 실행할 때 사용하는 제어문입니다. ⭐️ 반복문 종류 1, for문 2, while 문 ⭐️ for문 반복 횟수가 정해진 경우 주로 사용합니다. //단일 for문 for(초기값; 조건식; 증감){ 실행구문; } //다중 for문 for(초기값; 조건식; 증감){ 실행구문; for(초기값; 조건식; 증감){ 실행구문; } } for문의 제일 중요한 부분은 반복 횟수입니다. 조건식에 들어가는 값이 반복 횟수입니다. 스크립트 예제로 많이 나오는 '별찍기' 도 for문으로 만듭니다! 공감수 0 댓글수 0 2022. 1. 4.
[자바스크립트] switch 문 switch 란? if와 같은 조건문 중의 하나입니다. 여러 개의 조건을 처리해야 하는 다중 if~else문 대신 사용합니다. ⭐️ 예시 val luckNumber = window.prompt("행운의 번호를 고르세요!"); switch(luckNumber){ case "3" : document.write("행운의 번호 3번!"); break; case "4" : document.write("행운의 번호 4번!"); break; case "5" : document.write("행운의 번호 5번!"); break; default : document.write("꽝!"); } case 의 실행 구문이 한번 실행되면 break를 만나기 전까지는 멈추지 않는 것을 조심해야 합니다. ⭐️ if문 switch문의 .. 공감수 0 댓글수 0 2022. 1. 3.
[자바스크립트] if문 조건문이란? 특정 조건에 맞는 경우에만, 특정 구문을 실행하고자 할 때 사용하는 제어문입니다. 조건문의 종류 1, if문 2, switch 문 (추후에 다시 정리할 예정) ⭐️ if문 if(조건){ //조건이 참일 경우 실행할 스크립트 } if(조건){ //조건이 참일 경우 실행 }else{ //조건이 거짓일 경우 실행 } if(조건1){ //조건1이 참일 경우 실행 }else if(조건2){ //조건1이 거짓, 조건2가 참일 경우 실행 }else if(조건3){ //조건1이 거짓, 조건2도 거짓, 조건3이 참일 경우 실행 } ⭐️ 조건문과 함께 많이 사용되는 "논리 연산자와 비교 연산자" 비교 연산자 논리 연산자 - &&(and) / ||(or) //비교연산자 a>b //a가 b보다 큰 경우 참 a=b.. 공감수 0 댓글수 0 2021. 12. 29.
[제이쿼리] 제이쿼리 란? 제이쿼리 란? 빠르고 작고 기능이 풍부한 자바스크립트 라이브러리입니다. 다양한 웹 브라우저에서 동일한 방법으로 사용할 수 있는 라이브러리로 크로스 브라우징 라이브러입니다. ⭐️ 작성법 cdn을 먼저 연결한 후 ready()라는 제이쿼리 기능을 작성합니다. ⭐️ 핵심기능 on() 메서드와, 단축 이벤트 메서드를 사용하면 이벤트를 쉽게 사용할 수 있습니다. 스타일 설정도 가능합니다. 공감수 0 댓글수 0 2021. 12. 27.
[자바스크립트] 형변환 종류 형변환 이란? 말 그대로 형을 변환 한다는 뜻입니다. 코딩을 하다보면 숫자를 문자로, 문자를 숫자로 변환해야 하는 경우가 생깁니다. 정수형과 실수형 변환방법 ⭐️ 정수형 parseInt() var value = "123.456"; parseInt(value); //결과 : 123 Number() var value = "123" Number(value); //결과 : 123 ⭐️ 실수형 parseFloat() var value = "123.456"; parseFloat(value); //결과 123.456 Number() var value = "123.456"; Number(value); //결과 123.456 숫자를 문자로 형변환 ⭐️ 일반문자형 String() var value=20; String(va.. 공감수 0 댓글수 0 2021. 12. 26.
swiper 사용법 메인 배너 등에서 자주 사용되는 좌우 스와이프 플러그인입니다. 제일 먼저 할 일은 스와이퍼 슬라이드 홈페이지에서 css, js파일을 다운로드하는 것입니다. 1. 사이트 접속해서 다운로드하기 https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 다운로드 페이지를 보면 alpha 파일이 있는데 alpha파일이 아닌 걸로 다운로드하면 됩니다. 2. 코드 작업란에 파일, 또는 링크 불러오면 됩니다. 3. html 구.. 공감수 0 댓글수 0 2021. 12. 22.
[자바스크립트] 변수의 종류 변수의 종류는 총 4가지입니다. 전역 변수 지역변수 매개변수(파라미터) 멤버 변수(프로퍼티) ⭐️ 전역 변수와 지역변수 전역 변수는 함수 바깥, 지역변수는 함수 내부에서 선언됩니다. 전역변수는 특정 함수에서 선언된 것이 아니기 때문에 코드 전체에서 공유합니다. 전역 변수를 선언된 위치 이후로는 어디서든 사용할 수 있습니다. 지역변수는 자신이 선언된 함수 내부에서만 사용할 수 있습니다. 그 이외의 장소에서는 변수의 존재가 없기 때문에 사용이 안됩니다. ⭐️ 매개변수 (파라미터) 지역변수와 마찬가지로 함수 내부에서만 사용 가능합니다. 함수 외부에서 내부로 데이터를 전달하기 위해 사용하는 변수입니다. function fun1(num1, num2){ //num1, num2 가 매개변수 var local1 = ".. 공감수 0 댓글수 0 2021. 12. 21.
[자바스크립트] 배열이란 일반 변수는 데이터를 하나만 저장할 수 있지만, 배열 변수는 하나의 변수에 여러개의 데이터를 넣을 수 있습니다. 주로 연관있는 데이터를 하나로 묶어 관리할 때 사용합니다. 배열 데이터는 대괄호 안에 넣어 표현하며, 콤마로 구분합니다. var userName = ["name", "name2", "name3"] 배열은 주로 반복문과 사용합니다. 코드를 간결하게 처리할 수 있습니다. 공감수 0 댓글수 0 2021. 12. 21.
[자바스크립트] 변수값 확인하는 방법 변수에 어떤 값이 저장되어있는지 확인하는 방법은 대표적으로 3가지가 있습니다. alert(); document.write(); console.log(); ⭐️ alert(); 특정 정보를 브라우저의 알림창으로 알려주는 코드입니다. 예를 들면, 로그인시 비밀번호를 잘못 입력한 경우 경고창이 이 alert입니다. 내용이 길어지면 경고창에 내용이 잘리는 경우가 있습니다. ⭐️ document.write(); document에서 제공하는 write 기능으로 html 내부에 값을 출력해줍니다. 비어있는 html이 아닐 경우 어느 위치에 출력되는지 모릅니다. ⭐️ console.log(); 위의 두가지 기능과 달리 전문 디버깅 코드입니다. 웹킷 엔진을 사용하는 브라우저에서만 사용 가능합니다. 총 3가지의 방법이 있.. 공감수 0 댓글수 0 2021. 12. 20.
[자바스크립트] 변수에 저장할 수 있는 데이터의 종류 var 변수 이름 = 데이터; 이 데이터에 들어가는 종류가 8개 정도 됩니다. Number Boolean String Function Class Class Instance undefined null ⭐️ Number 일반적인 숫자 정수와 실수형으로 나뉩니다. ⭐️ String 문자열, 일반적인 글자를 말합니다. 문자열을 사용할 경우에는 "" 안에 넣어줍니다. ⭐️ Bloolean 논리형이라고 합니다. 오직 참,거짓 두 가지 값만 존재합니다. 참, 거짓을 저장해야 하는 경우 사용한다. ⭐️ undefined 변수 선언은 됐지만, 값을 알 수 없는 경우 나옵니다. ⭐️ null 주로 객체를 담은 변수를 초기화할경우 사용합니다. //숫자형 var age = 20; //문자형 var age ="20"; //위의.. 공감수 0 댓글수 0 2021. 12. 15.
[자바스크립트] 변수란? 변수란? 데이터를 저장하는 장소 / 데이터를 읽고 쓰고 할 수 있는 장소 입니다. ⭐️변수만들기 var 변수이름 = 값; 가장 일반적인 방법입니다. 여러개의 변수를 만들때도 같습니다. 여러개의 변수를 만들경우 콤마를 사용해도 됩니다. //나이가 담긴 변수 age를 만드세요 var age = 20; //이름과 나이를 저장한 변수를 만드세요 var name = "이름"; var age = 12; //콤마를 이용해 이름과 나이를 저장한 변수를 만드세요 var name = "이름", age = 12; ⭐️변수이름 만들때 조심해야할것! 숫자로 시작하면 안된다 대소문자를 구문한 것은 완전 다른 변수이다 대문자가 아닌 소문자로 시작하라 상수(변하지 않는값)은 대문자로 만들어라 여러단어가 조합되는 경우에는 카멜기법을 .. 공감수 0 댓글수 0 2021. 12. 14.

LIST

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.