CSS60 SVG 라이브러리 (RoughNotation) 선긋기, 하이라이트 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/ 2021. 2. 6. CSS Cascading 잘하기 커스텀 프로퍼티 소개 브라우저가 -webkit- 또는 -moz-와 같은 공급 업체 접두사를 사용하여 새 속성을 정의한 것과 같은 방식으로 -- 접두사를 사용하여 자체 사용자 지정 속성을 정의 할 수 있습니다. Sass 또는 JavaScript의 변수와 마찬가지로 값의 이름을 지정하고 저장하고 검색하는 데 사용할 수 있지만 CSS의 다른 속성과 마찬가지로 DOM과 함께 계단식으로 상속되고 상속됩니다. html { --brand-color: rebeccapurple; } 캡처 된 값에 액세스하기 위해 var () 함수를 사용합니다. 두 부분으로 구성되어 있습니다. 먼저 사용자 지정 속성의 이름과 속성이 정의되지 않은 경우 대체 항목입니다. button { background: var(--brand-color.. 2021. 2. 2. [Modern CSS] 3탄 CSS만으로 반응형 풀사이즈 이미지 크기 만들기 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%; }.. 2021. 1. 31. [css/scss] 그리드로 육각형 레이아웃 만들기 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.. 2021. 1. 31. 이전 1 ··· 3 4 5 6 7 8 9 ··· 15 다음
