본문 바로가기

전체 글396

정규식 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.
HTML에서 JavaScript 로드하기 1. inline : 태그에 직접 자바스크립트를 기술하는 방식 장점 태그에 연관된 스크립트가 분명하게 드러난다. 단점 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다. 2. script : 태그를 만들어서 여기에 자바스크립트 코드를 삽입하는 방식 장점 html과 js 코드를 분리할 수 있다. 3. 외부파일의 분리 : js를 별도의 파일로 분리할 수도 있다 장점 보다 엄격하게 정보와 제어를 분리할 수 있다. 하나의 js파일을 여러 웹페이지에서 로드함으로서 js의 재활용성을 높일 수 있다. 캐쉬를 통해서 속도 향상, 전송량의 경량화를 도모할 수 있다. [file.html] [file.js] var hw = document.getElementById('hw'); hw.addEventListener(.. 2023. 6. 29.
반응형 헤더 만들기(드림코딩) 0. 레이아웃 구조 파악하기 1) 화면의 가로 크기가 넓은 경우 body header logo menu sns flex(row)와 justify-content: space-between을 사용할 예정 2) 화면의 가로 크기가 좁은 경우 body header logo menu sns flex(column)와 media query를 사용할 예정 1. 구조 만들기 [순서] 1. 전체적인 구조를 시맨틱 태그를 이용해서 만들어준다. DreamCoding Home Gallery Weddings FAQ Bookings 2. CSS 작성하기(넓이가 큰 경우) ✨ style을 작성할 떄는 최상위 레이아웃부터 꾸며주고 그 후에 레이아웃에 내용 부분을 꾸며주는 것이 중요하다. ✨ 1. nav 스타일링하기 세로 정렬된 것.. 2023. 6. 25.
[CSS] link & import 1. link : 디자인(CSS)이 동일한 html 파일이 여러개 있을 때 css 파일을 따로 두어 한번에 스타일을 변경시키고 싶을 때 사용 [사용법] CSS 파일을 만들어준다. head 부분에 를 작성해준다. 2. import : link와 사용하는 이유는 동일하지만 사용법이 다르다. [사용법] 아래의 이미지와 같이 style 태그 안에 import를 사용해서 css 파일을 연결할 수 있다. 3. link vs import [link] 장점 하나의 파일에 여러 페이지의 스타일을 일괄 수정 및 추가 등 유지보수에 용이하다. 직렬 방식이 아닌 병렬방식으로 다운로드를 하여 로딩속도가 빠르다. [import] 장점 하나의 css파일에 여러개의 페이지 css를 로드시켜 편리하다 단점 import를 많이 사용하면.. 2023. 5. 23.
[CSS] transition 1. transition이란 : CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다. : 속성 변경이 즉시 일어나게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있다. 2. transition의 속성들 transition : transition을 적용할 속성을 작성한다. : transition을 적용할 속성과 지속될 시간을 설정한다. transition: height; transition: all 0.1s; transition-timing-function : 전환 효과의 시간당 속도를 설정한다. linear: 전환 효과가 처음부터 끝까지 일정한 속도로 진행된다. ease: 기본값으로, 전환 효과가 천천히 시작되어, 그 다음에는 빨라지고, 마지막에는 다시 느려진다. .. 2023. 5. 19.
[CSS] transform 1. transform 이란 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있는 속성이다. 2. transform의 속성 도형에 커서를 올리면 transform이 실행됩니다. rotate(45deg) rotateX(45deg) rotateY(45deg) scale(1.5) scaleX(1.5) scaleY(1.5) skew(45deg, 45deg) skewX(45deg) skewY(45deg) translate(45px, 45px) translateX(45px) translateY(45px) 3. transform-origin 2023. 5. 17.
[CSS] blend 1. blend란? : 두개의 이미지 또는 그 이상을 겹쳐놨을 때 다른 색상 차이를 혼합해서 생각지도 못한 효과를 만들어내는 것을 말한다. 2. blend 활용 배경 색상과 배경 이미지를 blend로 혼합해보자. 아래의 코드처럼 배경 색상은 빨간색이고 배경 이미지는 산일 때 background-blend-mode를 사용하면 아래와 같은 결과가 나온다. 배경 색상을 변경하거나 background-blend-mode의 속성을 변경하면 다른 느낌의 이미지를 만들 수 있다. 3. blend의 프로퍼티 요소 설명 normal 기본값, 색상 혼합이 적용되지 않고 상단에 위치한 요소의 색상으로만 표시된다. color 겹쳐진 두 요소의 색상에서 앞쪽 요소의 색조와 채도를 가지되 뒤쪽 요소의 명도를 반영하여 혼합하여 표.. 2023. 5. 17.
[CSS] filter 1. filter : filter속성은 요소에 대한 시각효과를 지정한다. (예시로 blur와 같은 것) none : 기본값으로, 이펙트를 없앤다. grayscale(%) : 이미지를 회색조로 변환시킨다. : 0%가 기본값, 100%는 이미지를 완전 회색처리한다. (음수는 없다.) sepia(%) : 이미지를 세피아톤으로 변환시킨다. : 0%가 기본값, 0~100% saturate(%) : 이미지 채도를 지정한다. : 0%는 이미지의 채도를 완전히 없앤다. 100%가 기본값이다. 100%를 넘기면 채도를 높인다. hue-rotate(deg) : 이미지 색조 회전을 적용시킨다. : 0deg~360deg invert(%) : 이미지 색상을 반전시킨다. : 0%는 기본값, 100%는 완전히 반전시킨다. opac.. 2023. 5. 15.
[CSS] background background-color : 배경 색상을 부여하는 속성 background-color: ; background-image : 배경 이미지를 부여하는 속성 background-image: url(''); background-repeat : 배경(이미지)의 반복여부를 결정할 수 있는 속성 repeat: 기본값, x와 y축 모두 반복 repeat-x: x축으로만 반복 repeat-y: y축으로만 반복 no-repeat: 반복하지 않음 background-repeat: ; background-attachment : 배경(이미지)의 스크롤 여부를 결정할 수 있는 속성 fixed: 배경 이미지는 스크롤 되지 않는다. scroll: 기본값, 배경 이미지도 같이 스크롤 된다 background-attachment.. 2023. 5. 15.
[CSS] float 1. float란? float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어준다. 하지만 현재 float는 웹 페이지의 레이아웃(Layout)을 작성할 때 자주 사용된다. 보통의 신문, 잡지등에서 이미지를 사용할 때는 이미지 옆에 글이 같이 나온다. 하지만 현재 아래의 코드를 사용하면 이미지 아래에 텍스트가 나오게 된다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto reiciendis odio eius soluta dicta ut doloremque recusandae. Impedit accusamus doloremque ipsa, repellendus, hic adipisci non, enim eveni.. 2023. 5. 15.
[CSS] media query 1. media query 기본 : 미디어 쿼리는 CSS 문법 중 하나이며, 반응형 디자인을 사용할 수 있도록 해준다. 반응형 디자인이란 화면에 능동적으로 반응해서 최적화 된 모습을 보여주는 것이다. 미디어 쿼리의 문법 @media (조건) { /*...*/ } /* 사용 예시 - 브라우저의 넓이가 500px 보다 작으면 body의 배경색을 red로 변경한다. */ @media (max-width:500px){ body{ background-color: red; } } 💡 미디어 쿼리를 여러개 사용할 때는 순서를 중요하게 생각해야한다. 케스케이딩 때문에 나중에 나온 것이 우선 순위가 높아진다. "따라서 겹치는 구간이 있을 때는 더 낮은 구간이 우선순위가 높아질 수 있도록 나중에 작성해주어야한다." 미디어.. 2023. 5. 11.

티스토리툴바