⏳ 2023. 5. 15. - 2023. 5. 21. 화살표 함수 얘네 그냥 익명 함수 쓰기 귀찮아서 쓰는 건줄 알았는데.. 함수를 어떻게 쓰는지에 따라 this의 범위가 달라진다는 새로운 사실! 😱 을 알게 되었다.. 즉시 실행 함수 이거.. 쓰긴 쓰나요..? 콜백 지옥 지금까지는 보통 강의를 한 번만 봐도 이해했다. 그러나 콜백 파트에서 처음으로 강의를 두 번 봤고.. 엥 이런 식으로 코드 짜면.. 코드가 길어지면.. 나중에 이해하기 힘들 것 같은데..? 생각이 들었다. 그렇게 콜백 관련하여 구글링을 참지 못했고 역시나 콜백 지옥 😈 이라는 문제 상황이 이미 있었다. 그것을 해결하기 위한 promise, async, await 등의 개념이 있었는데 7주차 강의에서 이런 내용도 소개해주었으면.. 좋겠다..

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

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