Front End Develop Front End Develop

자바스크립트를 다루는데에 있어서 좋은 습관들이 있어 공유드립니다. 코드를 쉽게 읽고 유지 관리하려면 몇 가지 모범 사례를 따라야합니다. Object와 Class를 다룰 때 Getter와 Setter를 쌍으로 이루자 우리는 Getter와 Setter를 반드시 쌍으로 다뤄야 합니다. Getter가 없으면 속성을 읽을 수 없으므로 사용되지 않습니다. 예를 들어 아래처럼 사용하기 보다는 const obj = { set a(value) { this.val = value; } }; 아래처럼 사용하는 것이 이상적입니다. const obj = { set a(value) { this.val = value; }, get a() { return this.val; } }; 배열을 여닫기 전에 줄바꿈 하기 const arr =..

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