본문 바로가기

분류 전체보기586

Select 1: 인풋 다루기 select 란? : 옵션 메뉴를 제공하는 드롭다운 리스트를 정의할 때 사용하는 태그이다. : 사용자로부터 입력을 받기위한 form에 사용할 수 있다. 형태 아메리카노 카페라테 카페오레 에스프레소 select를 활용해서 기존에 많이 사용되는 기능 구현해보기 아래의 영상처럼 셔츠를 선택하면 사이즈 select가 나오는 기능을 구현해보자. 상품선택 모자 셔츠 우선 없던 UI 생기려면 먼저 만들고 숨겨 놓다가 필요한 순간에 보여주면 된다. 따라서 아래와 같이 이미 새로운 select를 만들어 놓고 숨김처리 해놓으면 된다. 1. 미리 UI 만들고 숨김처리 index.html 상품선택 모자 셔츠 95 100 105 110 main.css .form-hide{ display: none; } 2. 정해진 타이밍에 맞.. 2023. 7. 31.
Array 와 Object 이전에 우리는 데이터를 담는 변수에 대해서 배웠다. 만약 여러 개의 데이터를 저장해야 한다고 가정한다면 변수는 데이터 개수에 따라서 선언되어야하는 번거로움이 생긴다. 이런 상황을 해결하기 위한 자료형에는 Array와 Object가 있다. Array 기본 형태 var 변수명 = [값1, 값2, 값3, 값4 ...]; // 예시 var carName = ['소나타', '아반떼', '산타페', '셀토스']; 접급 변수명[인덱스] carName[1] // '아반떼' 추가 변수명[인덱스] = 값5; carName[4] = '쏘렌토' //['소나타', '아반떼', '산타페', '셀토스', '쏘렌토'] 수정 변수명[인덱스] = 값3-2; carName[3] = '그랜저' //['소나타', '아반떼', '산타페', '.. 2023. 7. 31.
dataset HTML에는 사용자 몰래 정보를 저장하고 출력하는 기능이 있다. 그게 바로 dataset이다. 사용법 컨테이너 입니다. 저장 컨테이너 입니다. 출력 // dataset 출력 document.querySelector('.container').dataset.id // 출력: 0 2023. 7. 30.
이벤트 버블링과 이벤트관련 함수들 이벤트 버블링이란? 어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상을 말한다. 로그인하세요 만약 위의 코드로 구성 되어 있는 웹 사이트에서 loginPage를 클릭하면 white-bg와 black-bg에 걸려있는 이벤트까지 작동 된다는 의미이다. 따라서 이 이벤트 버블링을 막기 위해서는 이벤트 리스너 내부에서 쓰이는 함수 들에 대해서 알아야한다. 이벤트 리스너 내부에서 쓰이는 이벤트 함수들 document.querySelector('.black-bg').addEventListener('click', function(e){ e.target; e.currentTarget; e.preventDefault(); e.stopPropagation(); }) 이벤트 리스너 내부에.. 2023. 7. 28.
탭기능 만들며 배우는 for 반복문 탭기능 만들기 탭 기능또한 다른 UI 와 같이 미리 원하는 수의 버튼과 해당 버튼에 따른 콘텐츠를 미리 만들어 놓고 해당 버튼이 클릭 되었을 때 해당 버튼에 맞는 콘텐츠를 보여주면 된다. 탭 기능 - HTML Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping 탭 기능 - css ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc; } ul.list::after { content: ''; display: block; clear: both; } .tab-button { display: block; padd.. 2023. 7. 27.
JS 파일을 따로 선언했는데 실행이 되지 않는 경우 문제 jqeury를 사용하면서 js 파일을 따로두어 프로젝트를 진행할 때 js 파일에 있는 내용들이 실행 되지 않는 상황이 발생했다. 해결 위의 코드를 jquery 설치 코드보다 늦게 작성해야한다. 일찍 작성할 경우 js 파일 내부에 있는 jquery 문법을 인지하지 못하기 때문에 실행이 되지 않는다. 2023. 7. 27.
브라우저에서 끝까지 스크롤 했다는 것을 확인하기 div 내부에서 끝을 체크한 것과 로직은 비슷하지만 로직을 실행할 대상이 다르다. div 내부에서는 div를 대상으로 scrollTop, scrollHeight, clientHeight를 구해서 연산을 했지만 브라우저에서는 html 태그를 대상으로 scrollTop, scrollHeight, clientHeight를 구해서 연산을 해야한다. // div(.lorem) 대상 var scrollAmount = document.querySelector('.lorem').scrollTop; var scrollRealHeight = document.querySelector('.lorem').scrollHeight; var divHeight = document.querySelector('.lorem').client.. 2023. 7. 26.
스크롤 이벤트로 만드는 재밌는 기능들 스크롤 바를 내리면 로고를 작게 만들기 1. 스크롤을 해도 nav가 없어지지 않도록 navbar를 고정해주자. .navbar { position: fixed; width: 100%; z-index: 5; } 2. 스크롤이 되도록 임의적으로 높이가 큰 div를 만들어주자. 3. 기본적인 로고의 폰트사이즈를 키워보자. .navbar-brand { font-size: 30px; } 4. scroll 이벤트리스너를 통해서 유저의 스크롤 정도를 파악해보자 5. 200px까지 내릴 수록 로고의 폰트가 작아지고 다시 0px로 올릴 수록 로고의 폰트가 커지도록해보자 window.addEventListener('scroll', function(){ if (scrollY < 200){ let changeFontSize =.. 2023. 7. 25.
코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 2 이전 글에 이어서 이번에는 다음 사진 버튼을 만들어 보려고 한다. 위의 기능을 하려면 아래의 로직을 따라야 한다. STEP 01 현재 이미지가 몇 번인지 저장하기 STEP 02 현재 이미지의 번호에 따라서 다음으로 넘어갈 이미지 정하기 + 넘기기 STEP 01 var currentImg = 1; 위의 코드로 현재 이미지의 번호를 저장한다. STEP 02 $('.next').on('click', function(){ if (currentImg == 1){ $('.slide-container').css('transform', 'translate(-100vw)'); currentImg += 1; } else if (currentImg == 2){ $('.slide-container').css('transfor.. 2023. 7. 25.
코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 캐러셀이란? : 아래의 GIF처럼 이미지 슬라이드를 뜻한다. one-way UI 만들기 STEP 01 시작화면 만들기 STEP 02 최종화면 만들기 STEP 03 원할 때 최종화면으로 변하도록 JS로 만들기 STEP 04 transition: all 1s; 추가 STEP 01 시작화면 만들기 1 2 3 .slide-container { width: 300vw; /* 브라우저 폭의 3배 */ transition: all 1s; } .slide-box { width: 100vw; /* 브라우저 폭의 1배 */ float: left; /* 왼쪽으로 배치 */ } .slide-box img { width: 100vw; } STEP 02, STEP 03, STEP 04 해당 버튼들이 눌렸을 때 오른쪽으로 이미지 .. 2023. 7. 24.
정규식 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC 📚 JavaScript 정규 표현식 문법 총정리 + 응용 예제 정규 표현식(Regular Expression) 정규식(Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용된다. 대표적으로 입력칸에 전화번호나 이메일을 입력하라고 했을때 옳지 않은 inpa.tistory.com 2023. 7. 23.
setTimeout 타이머 해당 시간 뒤에 해당 동작이 실행되는 기능을 만들어 보자 5초 이내 구매시 사은품 증정 // 기본 사용법 setTimeout(function(){ //밀리초(ms) 뒤에 작동하는 동작 }, 시간) // 응용 사용법 setTimeout(함수, 시간) function 함수() { //기능 } 위의 setTimeout 함수를 활용해서 alert를 5초 후에 없애보자. setTimeout(function(){ $('.alert').hide(); }, 5000) 타이머 관련 setTimeout : 해당 시간 후 실행 setInterval : 해당 시간 마다 반복 실행 2023. 7. 23.
변수문법과 Dark mode 버튼만들기 이전에 만들었던 navbar사이트를 기반으로 간단한 다크모드를 적용해보자. 다크모드는 토글형태로 누르면 다크모드 다시 누르면 라이트모드로 변경된다. 하지만 이번에는 토글이 아닌 클릭 횟수로 다크모드를 지정해보자. 1. 클릭 횟수로 모드 변경하는 방법 [규칙] 1회 클릭 시 다크 모드 🌑 2회 클릭 시 라이트 모드 ☀️ 3회 클릭 시 다크 모드 🌑 4회 클릭 시 라이트 모드 ☀️ 5회 클릭 시 다크 모드 🌑 위 규칙의 공통된 패턴은 홀수 번 클릭 시 다크모드 짝수 번 클릭 시 라이트 모드라는 것이다. 따라서 해당 방법 대로 적용하려면 아래와 같이 코드를 구성해야할 것 같다. var clickCount = 0; if (clickCount%2==1){ // 클릭 횟수가 홀수면 //특정 엘리먼트 검은색으로 변경.. 2023. 7. 20.
코딩애플) if/else, function 실력향상 과제 Q1. 철수는 369게임을 더럽게 못합니다. 숫자를 입력하세요 확인하기 나가기 3!6!9! 게임 시작하기 Q2. 하지만 369게임 업그레이드 버전이 등장했습니다. function threesixnineGameUp(num) { if (num%3==0 && num%9!=0){ return '박수를 치세요!' } else if(num%3==0 && num%9==0){ return '박수박수를 치세요!' } else { return '통과를 하세요!' } } Q3. 공인중개사 시험점수를 입력하면 합격인지 알려주는 함수를 만들어봅시다. 시험 점수를 입력하세요 확인하기 나가기 공인중개사 시험 합격했냐? 확인하기 2023. 7. 17.
폼 만들기(if else) form(https://www.nextree.co.kr/p8428/) : 폼은 사용자의 의견이나 정보를 알기 위해 입력한 큰 틀을 만드는데 사용한다. : 폼은 입력된 데이터를 한번에 서버로 전송하는데 전송된 데이터는 웹 서버가 처리를 하고 결과에 따른 또 다른 웹 페이지를 보여준다. [form 태그의 속성] action: 폼을 전송할 서버 쪽 스크립트 파일을 지정한다. name: 폼을 식별하기 위한 이름을 지정한다. accept-charset: 폼 전송에 사용할 문자 인코딩을 지정한다. target: action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다. method: 폼을 서버에 전송할 http 메소드를 정한다. (GET 또는 POST) [form을 구성하는 다양한 엘리먼.. 2023. 7. 15.
모달창만들기와 간단한 애니메이션 모달창 만들기 모달창 만들기는 동적 UI 만들기와 같이 UI를 미리 만들어놓고 특성 상황에서 UI가 노출되면 된다. 로그인하세요 닫기 Navbar An item A second item A third item A fourth item And a fifth one 로그인 .list-group { display: none; } .show { display: block; } .black-bg { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.5); z-index: 5; padding: 30px; display: none; } .show-modal{ display: block; } .white-bg { background: whi.. 2023. 7. 15.
jQuery JavaScript를 작성하다 보니 너무 길고 더럽다는 생각을 많이 해서 HTML을 조작하는 문법을 쉽게 바꿔주는 라이브러리들이 생겼다. 그게 바로 jQuery, React, Vue가 있다. 이중에서 jQuery를 배워보려고 한다. 1. jQuery 설치 https://releases.jquery.com/ jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is reco.. 2023. 7. 13.
이벤트 리스너 addEventListener document.getElementById('해당 아이디').addEventListener('이벤트(예를 들면 클릭, 키입력, 스크롤 등등)', function(){ // 실행할 내용 }); 이벤트 종류들 마우스 관련 click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다. mouseover – 마우스를 HTML요소 위에 올리면 발생한다. mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다. mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다. mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다. mousemove –.. 2023. 7. 13.
서브메뉴 만들어보기와 classList 다루기 서브메뉴를 만들기 위해서는 css를 이용해서 만들 수 있지만 이번에는 bootstrap이라는 프레임워크를 이용해서 만들어보려고 한다. 1. bootstrap이란 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것 2. bootstrap 설치하기 https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter .. 2023. 7. 12.
function의 파라미터 문법 함수의 매개변수 알림창 입니다.알림창 숨기기 알림창 보여주기 알림창 입니다.알림창 숨기기 알림창 보여주기 위의 코드와 같이 매개변수를 활용하면 2개의 함수를 한개로 줄일 수 있다. 두개 뿐만 아니라 같은 기능을 하는 여러 함수들을 가변적인 부분에 매개변수를 추가함으로써 함수의 개수를 대폭 감소시킬 수 있다. 2023. 7. 12.
자바스크립트 function 문법 사용법 HTML 내부에 JavaScript 함수 작성 함수적용 사례 살펴보기 알림창 입니다. 알림창 보여주기 알림창 입니다. 알림창 보여주기 2023. 7. 12.
동적 UI만들기 (alert) [ UI를 만드는 단계 ] 1. HTML/CSS로 미리 UI를 디자인한다. 2. 만든 디자인을 숨김처리한다. display: none; 3. 필요할 때 숨김처리를 해제하는 코드를 작성한다. (JavaScript) display: block; Alert 박스 만들기 index.html 알림창 입니다. 알림창 보여주기 알림창 숨기기 main.css /* STEP 02 */ .alert-box{ background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; } 응용해보기 드롭다운 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 .dropdown-box{ background-color: lightgray; border-rad.. 2023. 7. 11.
HTML에서 JS를 포함하는 방법 1. head 내부 : head에 js파일 포함시키기 [head 내부 방법] 1. html 위에서 아래로 읽는다. (html parsing) 2. script 태그를 발견 시 읽던 html을 멈추고 JavaScript 파일을 다운 받아 실행한다. 3. 다시 html 위에서 아래로 읽는다. (html parsing) ⚠️ 이 방법은 좋은 방법은 아니다.⚠️ JavaScript 파일이 크면 다운 받는데 속도가 오래 걸리고 그렇게 오래 걸리게 되면 웹사이트가 사용자에게 노출되는 시간이 오래 걸리기 때문이다. 2. body 끝 : body 맨 끝에 script 파일을 포함시키는 것 [body 맨 끝 방법] 1. html 위에서 아래로 모두 읽는다. (html parsing) 2. html을 모두 읽어 페이지 준.. 2023. 7. 9.
[DOM] 제어 대상 찾기 0. NodeList란? : 대상 찾기 메소드의 값으로 반환되는 객체이다. : html문서와 같은 문서 내의 모든 노드를 리스트 형태로 저장하고 있다. 1. getElementsByTagName : 문서 내에서 특정 태그에 해당되는 객체를 반환한다. : getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. HTML CSS JavaScript 만약 조회의 대상을 좁히려면 아래와 같이 특정 객체를 지정하면 된다 HTML CSS JavaScript HTML CSS JavaScript 2. getElementsByClassName : 문서 내에서 특정 클래스 이름에 해당되는 객체를 반환한다. HTML CSS Java.. 2023. 7. 5.
Document Object Model(DOM) : 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. : window 객체의 document 프로퍼티를 통해서 사용할 수 있다. : window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다. 2023. 7. 5.
[BOM] 창 제어 1. Window open : window.open 메소드는 새 창을생성한다. 첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다. 두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다. _blank는 새 창을 의미한다. 창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다. 세번재 인자는 새 창의 모양과 관련된 속성이 온다. 2. 새창에 접근 2023. 7. 4.
[BOM] Navigator 객체 1. Navigator 객체란? : 브라우저의 제품명, 버전 등을 제공하는 객체이다. 주로 호환성 문제를 위해서 사용한다. 브라우저에 따라서 짜놓은 코드가 다르게 행동할 수 있다. 따라서 이때 JavaScript는 해당 브라우저에 따라서 작동하도록 해줄 필요가 있다. 그때 사용하기 위한 객체가 Navigator객체이다. 2. Navigator객체의 기능들 console.dir(navigator); // 전체 프로퍼티에 접근 console.dir(navigator.appName); // 특정 프로퍼티에 접근 위의 코드로 Navigator 객체의 모든 프로퍼티를 열람할 수 있다. App Name 웹브라우저의 이름이다. IE는 Microsoft Internet Explorer, 파이어폭스, 크롬등은 Nesca.. 2023. 7. 4.
[BOM] Location 객체 1. Location 객체란? : 현재 브라우저 창에 열려있는 문서의 url을 알려주는 객체이다. 2. 문서의 주소정보 알아내기 console.log(location.href); // 현재 윈도우의 문서가 위치하는 URL을 알아내는 방법 console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash) //url을 필요에 따른 조각으로 나눠서 알아내는 방법 http://127.0.0.1:5500/Location/location.html?id=10#bookmark location.protocol: 통신규약, 사용자가 서버에 접속할 때 어떤 방식으로 통신할 지 정의 locat.. 2023. 7. 3.
[BOM] 전역객체 Window 전역객체 Window : 모든 객체가 속한 객체이며, 전역객체이다. : 창이나 프레임을 의미한다. 전역객체라는 의미는 만약 전역변수를 선언한다면 Window의 프로퍼티이고 함수를 선언한다면 Window의 메소드가 된다는 의미이다. 아래의 코드를 보면 전역변수를 호출한 것과 window객체의 프로퍼티를 호출한 것과 같은 결과와 같은 것들을 보여준다. 2023. 7. 3.
Browser Object Model(BOM) Browser Object Model 이란? : 웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨 것이다. : 예를 들어 현재 열려있는 웹사이트의 URL을 알아내는 것, 현재 동작하고 있는 웹 브라우저의 제품명등을 담아내도록 도와주는 것이 바로 BOM이다. 2023. 6. 30.

티스토리툴바