⏳ 2023. 5. 15. - 2023. 5. 21. Prototype js는 프로토타입 기반 언어이다. js에서, 원시형 타입을 제외한 모든 것은 객체이고, 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 객체 지향 언어의 상속처럼, 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 프로토타입이라고 한다. // Prototype function User(first, last) { this.firstName = first; this.lastName = last; } const user1 = new User("user", "1"); const user2 = new User("user", "2"); console.log(user1); con..

⏳ 2023. 5. 15. - 2023. 5.21. 호이스팅(Hoisting) // 호이스팅(Hoisting) hello1(); // "hello1" // hello2(); // ❌ error // 함수 선언문(Declaration) function hello1() { console.log("hello1"); } // 함수 표현식(Expression) const hello2 = function () { console.log("hello2"); }; 호이스팅은 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상을 말한다. 선언문만 호이스팅된다. 즉시 실행 함수 // 즉시 실행 함수(IIFE, Immediately-Invoked Function Expression) // (F)() (() => { conso..

코드 보기 CSS에서 변수를 지정할 때는 변수 맨 앞에 --를 붙여야 한다. 변수를 호출할 때는 var(변수명)의 방식을 사용한다. 1 2 3 .container { --lightgray: #f5f5f5; width: 400px; height: 400px; border: 2px solid orange; background-color: var(--lightgray); } .item { font-size: 50px; width: 150px; height: 150px; border: 2px solid red; background-color: var(--lightgray); } CSS에서 변수의 유효범위는 변수가 선언된 요소 자신부터 그 요소의 후손 요소까지이다. 전역적으로 사용하기 위해서 html에 변수를 선..

⏳ 2023. 5. 8. - 2023. 5. 14. 해피해피해피~ 드디어 시작된 자바스크립트 강의. 쿸쿸쿸 그동안 웹을 다루는 언어들은 클론 코딩 or 실전 박치기를 통해 학습했다. 그러다보니 항상 기초가 부족하다는 생각을 하고 있었는데, 필수 강의를 보고 나면 기초가 탄탄해지는 느낌이라 기분이 좋다. 24시간이 모자라 필수 강의가 js를 다룰 때부터 선택 강의도 js 파트에 들어가고 싶었지만.. 아무래도 노력이 조금(아니.. 많이?) 부족했던 것 같다. ㅜㅜ 그렇다고 파트를 스킵하기엔 선택 강의에서 다루는 내용이 주옥같아서 놓치고 싶지 않다!! 토요일에 백엔드 개발자로 일하고 있는 친구를 만났다. 개발자가 되는 과정을 들었는데, 하루에 3시간도 안 자면서 공부했다고 하니.. 더 많은 공부 시간을 만들어..

Hero 콘텐츠 사이트에서 가장 먼저 보이는 특정한 영역을 의미한다. 가장 먼저 보이고 가장 중요하면서, 사용자에게 페이지에 대한 전반적인 내용을 함축적으로 전달할 수 있는 콘텐츠가 들어있다. 이미지 선택 및 드래그 방지 코드 보기 user-select로 선택을 제어하고 user-drag로 드래그를 제어할 수 있다. 그러나 user-drag는 실험적인 속성으로 vendor prefix(공급 업체 접두사)를 사용해야 값이 적용된다. 비교적 최신/실험적인 기술은 웹 표준 기술과 구분하기 위하여 -webkit-과 같은 vendor prefix를 사용한다. 브라우저마다 지원 여부가 다르므로 https://caniuse.com/에서 확인하자.

코드 보기 body { height: 3000px; } header { height: 50px; border-bottom: 1px solid #d2d2d2; position: sticky; top:0; background-color: rgba(255,255,255,0.7); backdrop-filter: blur(20px); } h1 { width: 100%; height: 400px; background-color: orange; } sticky는 부모 요소의 범위 안에서만 동작한다.

스크립트 코드 보기 js에서 html을 불러오는 방법은? -> documentElement document에서 가장 최상위 요소인 html을 불러올 수 있다. 검색 포커스 및 값 비우기 코드 보기 transition을 적용했을 때 아직 보이지 않은 요소에 대해 함수를 실행하면 함수가 제대로 동작하지 않을 수 있다. 그럴 때 사용하는 setTimeout()

화살표 박스 만들기 코드 보기 .container { margin: 200px; width: 200px; height: 200px; border: 4px solid; position: relative; } .item { width: 40px; height: 20px; overflow: hidden; position: absolute; top: -20px; right: 20px; } .item::before { content:""; width: 20px; height: 20px; border: 4px solid; position: absolute; top: 0; left: 50%; background-color: #fff; transform: rotate(45deg); transform-origin: 0 ..