gwooden_코린이

1. 자바스크립트 open API - JS function connet(position) { alert('위치연결성공'); } function errorConn() { alert('위치연결실패'); } // navigator.geolocation.getCurrentPosition(함수, 함수); navigator.geolocation.getCurrentPosition(connet, errorConn); - JS function connet(position) { const lat = console.log(position.coords.latitude); //위도 const lon = console.log(position.coords.longitude); //경도 // alert('위치연결성공'); } fun..

1. 정규식 (Regular Expression) const HTML 삽입 미리보기할 수 없는 소스

1. 스크롤(scroll) 이벤트 회원가입 약관동의 관련 이벤트 - HTML 회원약관 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam vel ullam sit iste repellendus quis dolorum tempore commodi itaque nisi! Consectetur, aliquam atque! Veritatis atque qui aut nesciunt rerum dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam vel ullam sit iste repellendus quis dolorum tempore commodi itaque nisi! Co..

1. 브라우저 기본동작 - a태그 같은거 클릭하면 -> 해당 페이지로 이동 폼 전송을 클릭하거나 엔터를 누르면 서버로 전송 네이버 구글 - 기본동작을 막음 네이버 구글 HTML 삽입 미리보기할 수 없는 소스 return false 보다는 event.preventDefault()를 주로 사용해서 원치않는 동작을 막아줄 수 있다. 폼 전송을 할때 주로 사용한다. 2. 할일목록 만들어보기 - HTML - JS const todos = document.querySelector('#todos'); const todoList = document.querySelector('#todo-list'); const todoInput = todos.querySelector('input'); todos.addEventListe..

- HTML 5초 뒤 사라지는 알림창 - CSS .showblock { width: 100%; height: 50px; background-color: skyblue; font-size: 30px; } - JS(제이쿼리) let cnt = 5; setInterval(function() { cnt--; $('.count').html(cnt); }, 1000); setTimeout(function() { $('.showblock').fadeOut('fast'); }, 5000); HTML 삽입 미리보기할 수 없는 소스

1. 자바스크립트 캐러셀(carousel) - HTML 이전 1 2 3 다음 - CSS * { margin: 0; padding: 0; } .carousel { width: 300vw; transition: all 1s; } .box { width: 100vw; float: left; } .box img { width: 100%; } .wrapper { overflow : hidden; } - JS(제이쿼리) // let number = 1; // html과 연관된건 없음 단순 숫자 // // next 버튼 // $('.next').on('click', function() { // if(no === 1) { // $('.carousel').css('transform', 'translateX(-100vw)..

dataset HTML 내부에 속성을 추가 (개발자만 사용하는 사용자 정의 속성) - HTML 1번탭 2번탭 3번탭 1번 탭 내용 2번 탭 내용 3번 탭 내용 - Script let tabBtn = $('.tab-btn'); let tabContent = $('.tab-content'); $('.list').on('click', function(e) { console.log(e.target); console.log(e.target.dataset.index); showTab(e.target.dataset.index); // if(e.target === document.querySelectorAll('.tab-btn')[0]) { // showTab(0); // } else if (e.target === d..

- HTML 내용 있음 다크모드 기능을 사용하기 위해 HTML에서 태그를 통해 버튼 타입을 설정해주어 만들어준다. value에는 "다크모드"라고 적어주고 해당 버튼으 마우스 클릭 이벤트가 발생할때 변경 될 수 있도록 조치해둔다. 태그는 단순이 내용이 담겨져 있는 상황을 가정하여 넣어둔 것 - JavaScript 1. JS로 코드 구성 /* JS */ let cnt = 0; //클릭횟수를 저장하는 변수 let mode = document.querySelector('#mode'); //공통되는 부분은 변수안에 집어 넣고 사용 mode.addEventListener('click', function(){ cnt++; //버튼 글씨 라이트 모드와 다크 모드 on/off if(cnt % 2 == 1) { // mo..