티스토리

공부기록용

검색하기

블로그 홈

공부기록용

miimee.tistory.com/m

내가 보려고 작성하는 정리 블로그

구독자: 1

방명록 방문하기

주요 글 목록

요소의 크기와 위치, Scroll / Wheel event innerHeight: window 가로 스크롤 막대(있는 경우)의 높이를 포함하여 창의 내부 높이를 픽셀 단위로 반환한다. innerWidth: window 세로 스크롤 막대(있는 경우)의 너비를 포함하여 창의 내부 너비를 픽셀 단위로 반환한다. ➕ 요소의 크기 값가져오기 clientWidth, clientHeight: padding을 포한한 요소의 크기 높이/너비 값을 가져온다. 스크롤 막대와 테두리를 뺀 창 너비 혹은 높이를 구해야 하는 경우 루트 요소의 clientWidth, clientHeight 속성을 사용한다. console.log(element.clientWidth);console.log(element.clientHeight);offsetWidth, offsetHeight: p.. 공감수 0 댓글수 0 2024. 6. 25.
script의 올바른 위치? ❓script의 권장되는 위치는 하단이라는 것을 처음에 배워서 인식은 하고 있지만 다른 위치에서 사용했을 때 올바르게 사용하는 방법도 알고 싶었다.1. "DOMContentLoaded" 이벤트는 HTML 문서의 모든 DOM 요소가 완전히 로드되고 파싱되었을 때 발생하는 이벤트로 즉, 스타일시트, 이미지 및 하위 프레임 로드가 완료되기 전에 발생시킨다. ➕defer, async➕ 외부에서 script를 작성하고 head안에서 연결을 해줄 때 사용하는 속성인데, 개인적으로 이 속성들을 사용했을 때 이유는 정확하지 않지만 원하는 순서로 작동하지 않았던 기억들이 많아서 사용하지는 않는 방법이라 좀 더 공부가 되야 할 듯 한 부분이다.2. 제일 하단 요소를 먼저 다 읽은 후 작동되도록 가장 하단에 작.. 공감수 0 댓글수 1 2024. 6. 14.
슬라이드 만들기(slick.js 만들어보기03) 🔴자동슬라이드 구현하기 body { margin: 0; } ul, li { margin: 0; padding: 0; list-style: none; } img { width: 400px; } button { padding: 0; } /* */ body { position: relative; height: 100vh; } .contanier { width: 1240px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slide { width: 100%; height: 250px; overflow: hidden; position: relative; } ul { overflow: hidden; /* width: 208.. 공감수 0 댓글수 0 2024. 4. 8.
슬라이드 만들기(slick.js 만들어보기02) 🔴무한슬라이드 구현하기 무한으로 슬라이드되도록 구현하고자 하는데 처음의 앞과 마지막의 뒤로 슬라이드가 더이상 이어지지 않는다. 이런 형태를 만들어주기위해 요소를 복제해 앞뒤로 넣어주도록 한다. body { margin: 0; } ul, li { margin: 0; padding: 0; list-style: none; } img { width: 400px; } button { padding: 0; } /* */ body { position: relative; height: 100vh; } .contanier { width: 1240px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slide { border: 5.. 공감수 0 댓글수 0 2024. 4. 4.
슬라이드 만들기(slick.js 만들어보기01) body { margin: 0; } ul, li { margin: 0; padding: 0; list-style: none; } img { width: 400px; } button { padding: 0; } /* */ body { position: relative; height: 100vh; } .contanier { width: 1240px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slide { border: 5px solid #000; width: 100%; height: 250px; /* overflow: hidden; */ position: relative; } ul { border: 1px so.. 공감수 0 댓글수 0 2024. 4. 4.
생성자 함수 생성자 함수 "객체를 생성하는 역할을 하는 함수" 함수의 이름의 첫 글자는 대문자로 시작한다. 일반 함수와 구분하기 위함 'new'연산자를 붙여서 실행한다. new 키워드를 사용하지 않으면 일반적인 함수와 동일하게 동작하여 새로운 객체를 반환하지 않는다. 생성자 함수엔 보통 return 문이 없다. 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없다. 만약 return 문이 있다면 아래와 같은 간단한 규칙이 적용된다. 객체를 return 한다면 this 대신 객체가 반환 원시형을 return 한다면 return문이 무시 return 뒤에 객체가 오면 생성자 함수는 해당 객체를 반환해주고, 이 외의 경우는 this가 반환된다. 일반적으로.. 공감수 0 댓글수 0 2024. 3. 27.
함수와 메서드의 차이 ❓jQuery선택자 이후 동작함수를 작성할 때 함수와 메서드, 이벤트의 정의가 불분명한 상태였음! 정의?란게 불분명한 느낌 상황에 맞게 잘 선택하고 싶어 차이를 짚고 넘어가고 싶었음 함수(Function)과 메서드(Method)의 차이 함수는 여러 문장들이 하나의 기능을 구현하도록 구성한 것이라고 할 수 있다. 그 함수 중에서 클래스 내부에 정의한 함수를 메서드라고 부른다. 또한 메서드는 객체의 속성을 다루기 위한 행위를 정의한 것이라는 의미도 포함하고 있다. 함수 메서드 특정한 작업을 수행하기 위해 설계되었다. 객체의 기능을 구현하기 위해 클래스 내부에 구현(정의)되는 함수이다. 메서드를 구현하면 객체의 기능을 구현하는 것이다. 자체적으로 존재한다.(독립적) 객체와 연결되어 있다. 클래스 내부에 종속되.. 공감수 0 댓글수 0 2024. 2. 6.
loalStorage사용하기 LocalStorage localStorage(로컬스토리지)는 사용자의 로컬에 존재하는 저장소이다. 우리는 이 저장소에 특정 데이터를 저장하거나 수정하거나 삭제할 수 있다. 유사한 것으로는 session storage가 있는데, session storage와 달리 localStorage는 유효기간이 존재하지 않는다. setItem(): key, value 추가 getItem(): value 읽어 오기 removeItem(): item 삭제 clear(): 도메인 내의 localStorage 값 삭제 length: 전체 item 갯수 key(): index로 key값 찾기 setItem() window.localStorage.setItem('key', 'value') ✔️ stirng타입의 데이터를 저장하.. 공감수 0 댓글수 0 2023. 10. 29.
동기와 비동기의 차이 동기(Synchronous)와 비동기(Asynchronous) 동기는 '직렬적'으로 작동하는 방식이고 비동기는 '병렬적'으로 작동하는 방식이다. (즉, 비동기란 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다.) 왼쪽 차트는 '비동기'로 작동하는 방식이다. 한번에 여러 태스크가 동시에 병렬적으로 실행된다. 반면, 오른쪽 차트는 '동기'적으로 작동하는 방식이다. 하나의 태스크가 끝날 때 까지 기다렸다가 다음 태스크가 실행된다. 총 실행 시간으로 따지자면 '동기' 방식이 더 느리다. 동기적예시 console.log(1) console.log(2) console.log(3) 비동기적예시 console.log(1); setTimeout(function () { co.. 공감수 0 댓글수 0 2023. 10. 5.
document객체정리(많이 사용하는거 위주) Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다.HTML 요소의 선택: 새로운 HTML 요소를 선택하기 위해 제공되는 메서드HTML 요소의 생성: HTML 요소를 생성하기 위해 제공되는 메서드HTML 이벤트 핸들러 추가: HTML 요소에 이벤드 핸들러를 추가하기 위해 제공되는 속성HTML 객체의 선택HTML 요소의 선택document.getElementsByTagName('태그이름')해당 태그 이름의 요소를 모두 선택함. 지정된 TagName(태그명)의 모든 요소 포함한 NodeList 반환(인덱스 번호 필요)document.getElementById('아이디')해당 아이디의 요소를 선택함.document.getElementsByClassName('클래스이름')해당.. 공감수 0 댓글수 0 2023. 9. 21.
JS_숫자를 문자열로 변환하기 🔴toString() 🔴String() 🔴Template literals을 이용하여 변환하기 🔴빈 문자열을 이어 붙이는 방법 변환하기 1. toString( ) 문자열로 변환시키고자 하는 것.toString( ); const num = 786; const str = num.toString(); const type = typeof str console.log(typeof num); // number console.log(str); // 786 console.log(type); // string const str = 783.85.toString() const type = typeof str console.log(str); // 783.85 console.log(type); // string console.l.. 공감수 0 댓글수 0 2023. 8. 17.
JS_반복문 반복문 for문 for(초기화한 변수값; 조건; 증감 표시){ 수행할 명령 }; 구성요소를 생략하는 것도 가능하다. let i = 0; // i를 선언하고 값도 할당하였습니다. for (; i < 3; i++) { // 'begin'이 필요하지 않기 때문에 생략하였습니다. alert( i ); // 0, 1, 2 } let i = 0; for (; i < 3;) { alert( i++ ); } for (;;) { // 끊임 없이 본문이 실행됩니다. } // for문의 구성요소를 생략할 때 주의할 점은 // 두 개의 ; 세미콜론을 꼭 넣어주어야 한다는 점이다. // 하나라도 없으면 문법 에러가 발생한다. 인라인 변수 선언 지금까진 ‘카운터’ 변수 i를 반복문 안에서 선언하였다. 이런 방식을 ‘인라인’ 변수.. 공감수 0 댓글수 0 2023. 8. 15.
JS_변수, 데이터 타입 🔴document.write( ); 🔴document.writeln( ); 🔴문자열 프로퍼티와 메서드 🔻.length 🔻.charAt( 수 ) 해당 번째 글자 추출 🔻.split(" ") 해당 데이터를 기준으로 나눈 배열을 생성해 출력 🔴배열의 프로퍼티와 메서드 🔻.length 🔻.push("딸기") 배열 뒤에 해당 데이터 삽입 🔻.unshift("레몬") 배열 앞에 해당 데이터 삽입 🔻.pop()) 배열 뒤의 데이터 제거 🔻.shift() 배열 앞의 데이터 제거 🔴Math의 수학 메서드 🔻Math.abs(수) 절대값 🔻Math.ceil(수) 반올림 아니고 그냥 올림 🔻Math.floor(수) 반내림 아니고 그냥 내림, 걍 버림 🔻Math.random( ) 임의 수 출력 🔴문자를 숫자로 변환하는 메서드 .. 공감수 0 댓글수 0 2023. 8. 14.
JS_정수와 실수의 정의, 정수 판별하기 🔴Number.isInteger() 🔴나머지 연산자(%) 정수란, 0을 포함하고, 자연수 및 음의 자연수를 포함하는 수(... -3, -2, -1, 0, 1, 2, 4, ...) 자연수란, 양의 정수를 의미하며 1부터 시작하여 1씩 커지는 수로 0 이나 음수를 포함하지 않음(0은 자연수가 X) 정수가 아닌 유리수란, 자연수가 아닌 분수, 소수(0.1, 0.2, 4/7, 8/9, 0.3, 0.8, ....) 실수란, 유리수와 무리수를 포함하는 수 유리수란, 분자와 분모가 모두 정수인 분수로 나타낼 수 있는 수로 양수(+), 0, 음수(-)가 모두 포함(쉽게 모든 수가 포함된다고 생각) 무리수란, 유리수가 아닌 수를 무리수라 하고, 소수로 나타내면 순환하지 않는 무한소수인 수 √2=1.41421356…, √.. 공감수 0 댓글수 0 2023. 8. 8.

문의안내

티스토리
로그인
고객센터

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