공부기록용

❓script의 권장되는 위치는 하단이라는 것을 처음에 배워서 인식은 하고 있지만 다른 위치에서 사용했을 때 올바르게 사용하는 방법도 알고 싶었다.1. "DOMContentLoaded" 이벤트는 HTML 문서의 모든 DOM 요소가 완전히 로드되고 파싱되었을 때 발생하는 이벤트로 즉, 스타일시트, 이미지 및 하위 프레임 로드가 완료되기 전에 발생시킨다.   ➕defer, async➕ 외부에서 script를 작성하고 head안에서 연결을 해줄 때 사용하는 속성인데, 개인적으로 이 속성들을 사용했을 때 이유는 정확하지 않지만 원하는 순서로 작동하지 않았던 기억들이 많아서 사용하지는 않는 방법이라 좀 더 공부가 되야 할 듯 한 부분이다.2. 제일 하단 요소를 먼저 다 읽은 후 작동되도록 가장 하단에 작..

🔴자동슬라이드 구현하기 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..

🔴무한슬라이드 구현하기 무한으로 슬라이드되도록 구현하고자 하는데 처음의 앞과 마지막의 뒤로 슬라이드가 더이상 이어지지 않는다. 이런 형태를 만들어주기위해 요소를 복제해 앞뒤로 넣어주도록 한다. 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..

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..

생성자 함수 "객체를 생성하는 역할을 하는 함수" 함수의 이름의 첫 글자는 대문자로 시작한다. 일반 함수와 구분하기 위함 'new'연산자를 붙여서 실행한다. new 키워드를 사용하지 않으면 일반적인 함수와 동일하게 동작하여 새로운 객체를 반환하지 않는다. 생성자 함수엔 보통 return 문이 없다. 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없다. 만약 return 문이 있다면 아래와 같은 간단한 규칙이 적용된다. 객체를 return 한다면 this 대신 객체가 반환 원시형을 return 한다면 return문이 무시 return 뒤에 객체가 오면 생성자 함수는 해당 객체를 반환해주고, 이 외의 경우는 this가 반환된다. 일반적으로..

❓jQuery선택자 이후 동작함수를 작성할 때 함수와 메서드, 이벤트의 정의가 불분명한 상태였음! 정의?란게 불분명한 느낌 상황에 맞게 잘 선택하고 싶어 차이를 짚고 넘어가고 싶었음 함수(Function)과 메서드(Method)의 차이 함수는 여러 문장들이 하나의 기능을 구현하도록 구성한 것이라고 할 수 있다. 그 함수 중에서 클래스 내부에 정의한 함수를 메서드라고 부른다. 또한 메서드는 객체의 속성을 다루기 위한 행위를 정의한 것이라는 의미도 포함하고 있다. 함수 메서드 특정한 작업을 수행하기 위해 설계되었다. 객체의 기능을 구현하기 위해 클래스 내부에 구현(정의)되는 함수이다. 메서드를 구현하면 객체의 기능을 구현하는 것이다. 자체적으로 존재한다.(독립적) 객체와 연결되어 있다. 클래스 내부에 종속되..