Front End Develop Front End Develop

최근 CSS는 사용자 정의 속성 및 새로운 기능과 같은 새로운 멋진 기능을 많이 추가했습니다. 이러한 것들이 우리의 삶을 훨씬 더 쉽게 만들 수 있지만, 또한 재미있는 방식으로 Sass와 같은 전처리기와 상호 작용할 수 있습니다. 새로운 CSS 사용자 속성인 min() 및 max() 함수를 사용해 본 적이 있다면 다른 단위로 작업 할 때 "호환되지 않는 단위 : vh 및 em"과 같은 오류 메시지가 표시 될 수 있습니다. 이는 Sass가 자체 min() 함수를 가지고 있고 CSS min() 함수를 무시하기 때문입니다. 또한 Sass는 고정된 관계가없는 단위로 두 값을 사용하여 어떤 종류의 계산도 수행 할 수 없습니다. min() 내부에서 calc()를 사용하려고하면 오류가 발생합니다. calc (20em..

과거에 비해서 최신 브라우저는 일반적으로 웹 페이지를 구성하고 HTML, CSS, Javascript등의 복잡한 웹을 렌더링하는데에 있어서 정말 효율적이게 발전해왔습니다. 보통 몇 초 남짓 안에 모든 것들이 렌더링됩니다. 프론트엔드 개발을 하면서, 렌더링 속도를 높이기 위해서 더 무엇을 할 수 있을까 고민하는 것은 중요합니다. 이럴 때 해결할 수 있는 방법 중 한가지로 Contain이라는 속성이 있습니다. Contain 속성은 특정 요소와 콘텐츠가 문서 트리의 다른 부위와 독립되어있음을 나타낼 때 사용한다고 합니다. /* 키워드 값 */ contain: none; /* 격리없이 평범하게 렌더링함 */ contain: strict; /* style을 제외한 모든 격리 규칙을 적용함 */ contain: c..

모바일 환경에서 많이들 사용하는 햄버거 메뉴는 애니메이션을 많이 넣어서들 사용합니다. SVG 및 CSS를 사용하여 다양한 효과들을 만들 수 있습니다. 우선 SVG를 적절히 그려서 애니메이션을 위한 라인들을 그립니다. body { align-items: center; display: flex; justify-content: center; height: 100vh; margin: 0; } .menu { background-color: transparent; border: none; cursor: pointer; display: flex; padding: 0; } .line { fill: none; stroke: black; stroke-width: 6; transition: stroke-dasharray 6..

스크롤 최상단으로 이동하는 방법에 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/

커스텀 프로퍼티 소개 브라우저가 -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..