@media .box { width: 1200px; height: 150px; margin: 50px; border: 10px solid black; background-color: orange; } /* @media 타입 and (기능) { 스타일 } */ @media screen and (max-width: 1260px) { .box { width: auto; height: 200px; background-color: red; } } @media screen and (max-width: 800px) { .box { height: 300px; background-color: royalblue; } } orientation @media (orientation: portrait) { .box { width..

https://vercel.com/ Vercel: Develop. Preview. Ship. For the best frontend teams Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. vercel.com github에 올린 코드를 vercel을 통해 쉽게 배포할 수 있다..! https://iam454-ipad.vercel.app/ iPad 10.2(9세대) 강력한 A13 Bionic 칩을 탑재한 iPad(9세대). 센터 스테이지 기술이 적용된 12MP 울트라 와이드 전면 카메라, True Tone..

코드 보기 mask-image 이미지를 마스킹할 때 사용하는 mask-image 비디오의 검은 테두리 역시 이 속성으로 없애버릴 수 있다!

코드 보기 Intersection Observer 뷰포트에 타겟 엘리먼트가 보이고 있는지 관찰한다. 사용법 const io = new IntersectionObserver(callback, options); // 관찰자 초기화 io.observe(element) 화면에 보일 때 class를 추가하는 것으로 트랜지션 효과를 줄 수 있다.

코드 보기 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..