Front End Develop Front End Develop

picture 태그 에서 ie를 지원하기 위해서는 picture태그 내에 img 태그가 들어가야 합니다. 해당 이미지를 ie fallback으로 사용하기 때문입니다.

스크롤 최상단으로 이동하는 방법에 css와 js가 있습니다. 스크롤 최상단 css 스크롤 최상단 JS css html { scroll-behavior: smooth; } 위 처럼 스크롤 상태에 대한 smooth 속성을 사용해서 scroll을 부드럽게 처리할 수 있기 때문에 #인 포지션인 0으로 갈 때 부드럽게 이동합니다. js document.querySelector("#js-scroll").addEventListener("click", (e) => { e.preventDefault(); window.scroll({ top: 0, left: 0, behavior: "smooth" }); }); 위의 방법도 스크롤을 부드럽게 처리하기 위한 옵션이 들어갑니다. 이 두가지 방법은 중요한 차이가 있습니다. 차이..

See the Pen Rough Notation by Chris Coyier (@chriscoyier) on CodePen. roughnotation.com RoughNotation A small JavaScript library to create and animate hand-drawn annotations on a web page roughnotation.com 아주 가볍고 3.8kb(gzipped) 유용한 라이브러리가 있어 소개시켜드립니다. goo filter를 이용한 효과의 세기도 조절할 수 있어서 매우 유용할 것으로 보입니다. 출처 : roughnotation.com/

animation 가속과 감속을 자유롭게 이루어내는 javascript 가속도에 대한 코드. .smoothBox { position:fixed; left:0; top:300px; width:0; height:200px; background:hotpink; } const box = document.querySelector('.box'); const smoothBox = document.querySelector('.smoothBox'); const accelearation = 0.1; let delay = 0; let requestAnimationId; let animState; let approx; const anim = () => { delay = delay + (pageYOffset - delay) *..

커스텀 프로퍼티 소개 브라우저가 -webkit- 또는 -moz-와 같은 공급 업체 접두사를 사용하여 새 속성을 정의한 것과 같은 방식으로 -- 접두사를 사용하여 자체 사용자 지정 속성을 정의 할 수 있습니다. Sass 또는 JavaScript의 변수와 마찬가지로 값의 이름을 지정하고 저장하고 검색하는 데 사용할 수 있지만 CSS의 다른 속성과 마찬가지로 DOM과 함께 계단식으로 상속되고 상속됩니다. html { --brand-color: rebeccapurple; } 캡처 된 값에 액세스하기 위해 var () 함수를 사용합니다. 두 부분으로 구성되어 있습니다. 먼저 사용자 지정 속성의 이름과 속성이 정의되지 않은 경우 대체 항목입니다. button { background: var(--brand-color..

Modern CSS 3탄 입니다! 먼저 이미지가 배경 이미지로 스타일 속성에 삽입되는 HTML입니다. 일반적으로 aria-label은 일반 img 태그에 표시되는 alt 속성을 대신하므로 좋습니다. background-size:cover Whizzbang Widget SuperDeluxe Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o. Add to Cart .card__img { background-size: cover; background-position: center; // 16:9 ratio padding-bottom: 62.5%; }..

1 2 ... BEM(css 방법론 중 하나, Block-Element__Method)을 이용해서 작성했습니다. .hex-grid__list { display: grid; list-style-type: none; margin: 0; padding: 0; } 위와 같이 만들어져야 하는 것입니다. .hex-grid__list { display: grid; list-style-type: none; margin: 0; padding: 0; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr; } 반복을 피하기 위해서 다시 한번 리팩토링 합니다. .hex-grid__list { --amount: 5; display: grid; list-style..

Greensock에 유용한 플러그인이 있어 소개합니다. 새로운 플러그인의 요점은 페이지가 특정 위치로 스크롤 될 때와 특정 요소가 뷰포트에있을 때 애니메이션을 트리거하는 것입니다. 구성 할 수있는 모든 것은 다음과 같습니다. 수년 동안 많은 스크롤 위치 라이브러리가 있었지만 Greensock은 API와 성능을 바로 잡는 요령을 가지고 있습니다. 원하는 것은 애니메이션을 트리거하는 것이기 때문에 이제 Greensock을 사용하여 확인할 수 있습니다. 코드펜에서 바로 연결해서도 사용할 수 있습니다. See the Pen GSAP ScrollTrigger - Demo by Noel Delgado (@noeldelgado) on CodePen. See the Pen ScrollTrigger: SVG Text M..