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

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