본문 바로가기

분류 전체보기

prototype 더보기
prototype 더보기
prototype 더보기
prototype 더보기
메서드2 DOM객체 조작하는 메서드 ------------------- 요소의 속성 변경 1. 선택자 속성의 값을 가져온다 2. 선택자의 속성값을 변경 3. 선택자의 속성값을 제거 $(selector).removeAttr() ------------------- 요소의 스타일 변경 1. 선택자 스타일의 해당값을 가져온다. 2. 선택자 스타일의 값을 변경한다. 3. 선택자에 여러 스타일을 한번에 설정한다. ------------------- 클래스 사용하기 1. 선택자에 class 추가 2. 선택자에 특정 class가 있는지 찾기 3. 선택자에 class제거 4. 선택자에 class추가 제거 반복 ------------------- 제거,비우기 1. 선택자 노드 제거 - $(selector).remove() 2. 선.. 더보기
선택자 및 메서드 1 jq의 cdn 작성 위치와, cdn다운받는 곳 - code.jqeury.com jq의 기본 구문 작성법 $(selector).method(); ------------------- 기본선택자 5가지 이상 - 요소(태그명), 아이디(#), 클래스(.), 종속( ), 자식(>), 이웃(+), 형제(~), 그룹(,), 모든(*)선택자 탐색선택자 5가지 이상(구조, 순서) li를 예로 들면, - li:first-child - li:last-child - li:nth-child(n) - li:nth-child(2n+1) - li:nth-last-child(n) ... 제이쿼리 선택자(짝홀수, 2번째, 첫번째, 마지막li, 3번째 뒤에 있는 모든 li, 3번째 앞에 있는 모든 li) - li:even - li:odd.. 더보기
[평가1] 디지털디자인 - 디자인구성요소설계 보호되어 있는 글입니다. 더보기
figma 3 - icon 제작 material.io/design/iconography/system-icons.html#design-principles Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams.. 더보기
figma 2 - component 1. master component : 반복적으로 재활용 될 UI 에셋 2. instance : master component를 복사한 인스턴스 * 무료로 Figma 시작하기 : https://www.figma.com/​ 피그마가 스케치, 포토샵 보다 나은 이유 - 포토샵, 스케치 대비 반응형 UI 디자인에 최적화된 UI 편집 툴 - 쉽고 빠르다. 업무 효율성 Good - 무료로 사용 가능 (팀 라이브러리 기능 제외) - 윈도우, Mac 상관 없이 인터넷이 된다면 UI 편집 가능. - 실시간 파일 동기화 및 커뮤니케이션 - 웹 & App 개발 협업툴 - 실시간 멀티플레잉 편집 기능 - Private Project 기능 - figma & 포토샵 & 스케치의 차이점 - 내부 GUI Code View ( = .. 더보기
figma 1 - referance material.io/design/layout/responsive-layout-grid.html Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io material.io/design/layout/responsive-layout-grid.html#breakpoints Material Design Build beautiful, usable products faster. Material Design is an adaptab.. 더보기
참고할만한 오픈API 종류 api www.data.go.kr/ 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com developers.giphy.com/ GIPHY Developers The GIPHY Developer Portal is how you integrate the world's best GI.. 더보기
jQ 5 - each() each() : 배열객체를 순서대로 순환하는 메서드이다. $(셀렉터).each(function(){....}) 와 같이 작성하는데, function의 ()안에는 2개의 인자값이 들어가고, 첫번째는 index순서, 두번째는 배열의 값이 들어간다. each(function(index, item){...})와 같다. $(셀렉터).each()에서 셀렉터는 배열객체가 된다. 1. 배열객체를 초기화 해두고, 여기에서 객체의 value값을 순서대로 가져오는 방법을 본다. $(function(){ let arr = [ {name : '네이버', link : 'https://www.naver.com'}, {name : '다음', link : 'https://www.daum.net'}, {name : '구글', link .. 더보기
jQ 4 - append 활용 : 배열객체, 이미지를 추가하기 1. append vs appendTo 차이점 $(A)append(B) : A의 end tag 바로 앞에 B를 추가한다. $(B).appendTo(A) : A의 end tag 바로 앞에 B를 추가 한다. 2. 배열객체를 만들어서 div태그에 값을 추가해 본다. $(function(){ let content = [ {name : '손지영', position : '영상부장'}, {name : '조성민', position : '아이디어부장'}, {name : '김서희', position : '디퍼부장'} ]; $('div').append(function(index){ let item = content[index]; let output =''; output += '' + item.name + ' : '; out.. 더보기
jQ 3 - method() 의 종류 1 1. 요소에 클래스를 추가 제가하는 메서드 addClass() : 추가할 클래스의 이름을 ()안에 작성한다. removeClass() : 제거할 클래스의 이름을 () 안에 작성한다. toggleClass() : 추가|제거를 반복적으로 사용할 수 있는 메소드로, ()안에 클래스의 이름을 작성한다. 2. 이벤트 연결하기 on(), bind() 메소드로 이벤트를 연결하는데, $(selector).on('click', function(){...}); 식으로 작성한다. 3. 요소를 태그로, 텍스트로 추가하는 메소드 : html(), text() 4. 객체의 내부를 비우거나 제거하는 메소드 : empty(), remove() 5. 새 요소를 추가하는 메소드 : append(), appendTo(), prepend(.. 더보기
jQ 2 - 선택자의 종류 DOM객체에 접근할 수 있는 방법은 CSS에 작성하는 선택자 작성방법과 동일하다. 다양한 선택자의 종류가 있으므로, 아래와 같이 한번씩 작성해 본다. 구조선택자와 메서트체이닝 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 인접 관계 선택자 탐색 선택자 내용 1 내용 2 내용 3 내용 4 내용 5 내용 6 네이버 구글 다 음 유투브 메일보내기 내용 7 내용 8 내용 9 이름 사용자동의 네이버 다음 $(function(){ //jqeury에서 위와 동일한 뜻 // $(selector).method(); // $('tr:odd').css('background', '#f00');//index 홀수 // $('tr:even').css('background', '#0f0');//inde.. 더보기
jQ 1 - 문서에 cdn 연결하기 1. code.jquery.com 사이트에 접속하여, cdn을 선택하여 링크저장해 둔다. 2. js폴더에 저장해 두고, 이 문서를 문서의 상단에 안에 주소를 연결한다. 3. script 태그 안에 jQuery문법을 사용할 것이라고 선언한다. $(document).ready(function(){ }); 위와 같이 작성하고 준비 해 둔다. 더보기
카카오 지도API 연결하기 지도API서비스를 이용할 수 있는 곳은 구글, 네이버, 카카오가 있다. 각 회사마다 사용정책이 다르니, 확인이 필수이다. 카카오 지도 API를 연결하여 사용하기 위해서는 1. apikey를 발급받아야 한다. 이를 위해 '카카오개발자' 홈페이지에 접속하여, 카카오 로그인을 한다. developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 로그인 한 다음 [내 애플리케이션] 메뉴에 들어가 [애플리케이션 추가하기] 버튼을 누르고, 정보를 입력하면, 각 플랫폼 별로 다른 app key를 확인 할 수 있다. 3. 웹용문서.. 더보기
자바스크립트 22 - for 정리 자바스크립트에서는 여러가지 형태의 for문이 있다. 1. 일반적 for문 : 일반적으로 가장 많이 사용한는 for문의 형태 for(let i=0; i 더보기
자바스크립트 21 - class 관련 정리 className : 특정 엘리먼트의 클래스 속성값을 가져오거나 설정하기 위한 속성 clasList : className 을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 방법 clasList.add(class) : 엘리먼트에 클래스 속성값을 추가하기 위한 메서드 clasList.remove(class) : 엘리먼트에 클래스 속성값을 제거하기 위한 메서드 clasList.toggle(class, true|false) : 엘리먼트에 클래스 속성값을 추가/제거하기 위한 메서드 let elem = document.querySelector('#item'); if(elem.className ==='on'){ elem.className = 'off'; }else{ elem.className ='on'; }.. 더보기
자바스크립트 20 - 데이터유효성검사 3 함수를 만들어 dom요소에 이벤트를 인라인 방식으로 연결 각 하수에서는 이름, 연락처, 메일을 확인하고 정규표현식에 테그트하여 결과값을 보=여준다. function submitCheck(mform){ let reg1 = /^[가-힣]{2,5}$/; let reg2 = /^(010|070|02|031|011)\d{3,4}\d{4}$/; let reg3 = /^\w{5,12}@[a-z]{2,10}[\.][a-z]{2,3}[\.]?[a-z]{0,2}$/; let name = mform.name; let tel = mform.tel; let mail = mform.mail; if(!(reg1.test(name.value))){ alert('이름을 확인하세요'); name.value = ''; name.focus.. 더보기
자바스크립트 19 - 데이터유효성검사 2 정규표현식 만들고, 적용하기 let reg1 = /^[가-힣]{2,5}$/; let name = prompt('이름을 입력하세요', ''); while(true){ if(reg1.test(name)) break; alert('이름을 다시 확인하세요'); name = prompt('이름을 입력하세요', ''); } let reg2 = /^(010|070|02|031|011)\d{3,4}\d{4}$/; let phone = prompt('연락처를 입력하세요',''); while(true){ if(reg2.test(phone)) break; alert('연락처를 다시 입력하세요'); phone = prompt('연락처를 입력하세요',''); } // admin@naver.com // admin@daum.net.. 더보기
자바스크립트 18 - 데이터유효성검사 1 1. 이름 입력값없으면 : '이름을 입력하세요' 2. 비번 입력값없으면 : '비번을 입력하세요' 3. 비번과 비번확인 값이 다르면 : '비번을 확인하세요' 4. 비번과 비번확인 값이 같으면 : '이름님 환영합니다' window.onload = function(){ let mform = document.querySelector('#mform'); mform.onsubmit = function(){ let name =document.querySelector('#name').value; let pass =document.querySelector('#pass').value; let passCheck =document.querySelector('#pass-check').value; if(name == ""){ a.. 더보기
자바스크립트 17 - 객체 추가 아래 메서드는 요소를 만드는 메서드이다. createElement() => 새로운 요소를 만든다. appendChild() => 요소를 end tag 바로 앞에 추가한다 . append() let param = document.querySelector('p'); let span = document.createElement('span');//요소를 만든다. span.innerText = "실행"; let timer = setInterval(function(){ // param.innerHTML='실행'; param.appendChild(span);//요소를 추가한다. console.log('실행'); },1000); let btn1 = document.querySelector('#btn1'); let bt.. 더보기
자바스크립트 16 - 객체와 이벤트 연결하는 방법 4가지 이벤트 연결방식에는 크게 아래와 같이 4가지로 분류 해서 정리 할 수 있다. 1. 인라인이벤트모델 : 태그요소에 바로 연결하는 방법 2. 기본이벤트모델 : 객체.onclick = function{} 3. IE이벤트모델 : 객체.atttchEvent('onclick', function(){}); 4. 표준이벤트모델 : 객체.addEventListener('click', function(){}); 현재, 기본이나 표준 방식으로 두로 사용하고 있다. 아래는 이미지 태그의 이벤트의 종류(mousenter, mouseout)에 따라 src속성을 변경하는 코드이다. let img = document.querySelector('#imgChange'); img.onmouseenter = function(){ //이미지.. 더보기
자바스크립트 15 - 주기함수로 시간 호출 setInterval(실행함수, 시간) 을 활용해 주기적으로 실행문을 실행하게 만들 수 있다. 내장객체 Date()를 사용하여, 1초에 한번씩, 시간정보를 갱신할 수 있다. window.onload = function(){ setInterval(function(){ let tdate = new Date(); document.querySelector('#clock').innerHTML = tdate; }, 1000); } 더보기
자바스크립트 14 - 객체 조작하기 BOM()객체 연습 1. window.open() : 새창 열기 첫번째 인자 : 주소값, 두번째 인자 : 새창 이름 세번째 인자 : 크기, 위치 등 기타 정보 window.open('https://www.naver.com/','pop1','width=450, height=550'); 2. 새창을 열고, screen 객체의 width, height 정보를 담아, 새창의 size를 재지정하고, 위치를 이동시킬 수 있다 screen.width : 화면의 가로크기값을 반환 screen.height : 화면의 세로크기값을 반환 moveTop(0,0) : 새창의 위치를 지정 resizeBy(w,h) : width, height를 재지정할 수 있다. let child = window.open('','','width=.. 더보기
자바스크립트 13 - 게임 : 조건문으로 묵찌빠 맞추기 vs 대결하기 조건문의 종류에는 switch와 if문이 있다. 미션 1. 컴이 무엇을 냈는지 맞추기 미션 2. 컴과 묵찌빠 대결하기 [미션1] 1. 나 => 컴이 무엇을 냈는지 알아맞추세요. 가위바위보 중에서 입력 prompt() 2. 컴 => 난수로 가위바위보 중에서 ???출력 3. 컴==나 => 같다 || 같지않다 4. 컴이 낸 것을 이미지로 출력 5. switch문, if문 document.write('묵찌빠 맞추기'); let choice = prompt('컴은 묵찌빠 중에서 무엇을 냈을까요?', ''); let num; switch(choice){ case "묵": num =1; break; case "찌": num =2; break; case "빠": num =3; break; default : alert(.. 더보기
자바스크립트 12 - 내장객체 Date(), Math() 1. 내장객체 Date()는 년월일시분초 의 정보를 가지고 있는 개체이다. 이 날자와 시간정보를 가지고 있는 Date()객체는 문서에서 사용하려면, new 키워드로 생성 한 후, 사용할 수 있다. 아래 코드는 Date()객체를 생성하여 today 변수에 담아두고, 이 today변수에 담긴 날자와 시간정보를 불러오는 방법이다. [Tip] 1. getMonth() : 월 정보는 0~11까지이므로 반환되는 값에 1을 더해줘야, 현재 월 정보를 가져올 수 있다. 2. getDay() : 요일정보는 0~6까지 일요일부터 토요일이 나오게 된다. 3. getTime() : 1970.1.1 부터 경과한 시간을 밀리초 단위로 반환해 준다 . 4. 참고 : Math.round() 는 반올림하는 math객체이다. let t.. 더보기
자바스크립트 11 - 내장객체 : Date, Math, Array 내장객체 종류 확인~! //Date 객체 document.write('날자와 시간정보'); var today = new Date(); var nowMonth = today.getMonth()+1; //현재 월(0~11 +1) var nowDate = today.getDate(); //현재 일 var nowDay = today.getDay(); //현재 요일(0:일요일 ~ 6:토요일) var nowHours = today.getHours(); //현재 시간 var nowMinutes = today.getMinutes(); //현재 분 var nowSeconds = today.getSeconds(); //현재 초 var nowTime = today.getTime(); //1970년 1월 1일부터 밀리초 경과.. 더보기
자바스크립트 10 - 객체 (배열과 객체 생성비교) 1. 배열선언방법 자바스크립트의 기본 자료형 : 숫자, 문자, 불, 함수, object, undefined var array1 = [123, '고구마', function(){}, {}]; var array2 = [{},{},{},{},{}]; 인덱스와 요소로 구성됨 array1[0]=>123, array1[1]=>'고구마' 배열은 객체를 기반으로 한다. 2. 배열 객체 선언방법 크기를 지정하지 않고 선언 var array1 = new Array(); 값을 넣는 법 array1[0] = "지수"; 크기를 지정하고 선언 var array1 = new Array(5); 5개만 값이 들어올 수 있음 var array1 = new Array('지수', 183, 67); 기타 배열 메서드 활용법 (이 외에 다양한 .. 더보기