Console count()의 인수를 주지 않으면 default가 이름이 된다. Cookie 도메인 단위로 저장되며 사이트당 최대 20개 및 4KB로 제한된다.(표준안 기준) 영구 저장이 불가능하다. // Cookie // domain: 유효 도메인 설정 // path: 유효 경로 설정 // expires: 만료 날짜(UTC Date) 설정 // max-age: 만료 타이머(s) 설정 document.cookie = "a=3; domain=localhost; path=/abc"; document.cookie = "b=2"; console.log(document.cookie); Storage 도메인 단위로 저장되며 5MB로 제한된다. 세션 혹은 영구 저장이 가능하다. // Storage // session..

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

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

코드 보기 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에 변수를 선..