코드 보기 animation의 8가지 속성 .item { width: 200px; height: 200px; background-color: orange; animation-name: myAnimation; animation-duration: 2s; animation-timing-function: steps(4); animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; } .item:hover { animation-play-state: paused; } @keyframes myAnimation { 0% { width: 200px; } 100% { width: 400px; } } .item { widt..

⏳ 2023. 5. 15. - 2023. 5. 21. 문자 문자열 자르기 강의에서는 slice()만 다루었지만, 가끔 헷갈려서 이번 기회에 다른 것도 정리해보았다. let str = "Hello world!"; console.log(str.length); // 12 // substr(시작 인덱스, 길이) : 시작 인덱스부터 길이만큼 자르기 // 길이를 적지 않으면 끝까지 console.log(str.substr(3, 7)); // "lo worl" console.log(str.substr(3)); // "lo world!" // substring(시작 인덱스, 끝 인덱스) : 시작 인덱스부터 끝 인덱스 전까지 자르기 // 끝 인덱스를 적지 않으면 끝까지 console.log(str.substring(3,..

여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 받기 위해 브라우저는 서버에 이미지를 요청하게 된다. 하지만 사용된 이미지가 많은 경우, 그만큼 서버의 요청이 많아지므로 페이지의 로딩 시간이 오래 걸리게 된다. 이미지 스프라이트를 사용하면 서버 요청을 상당수 줄일 수 있고, 파일의 관리 측면에도 이득이 있다.

⏳ 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에 변수를 선..

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는 부모 요소의 범위 안에서만 동작한다.