Front End Develop Front End Develop

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

1. all Bootstrap과 같은 CSS 프레임워크를 사용한 적이 있습니까? 그렇다면 일부 요소를 원하는대로 재정의하고 싶을 때가 있었을 것입니다. 가장 일반적인 방법은 CSS의 !important 속성을 사용하여 현재 속성을 강조하고 다른 모든 설정과 규칙을 무시하는 것입니다. .header{ color: blue !important; font-size: 14px !important; } all에는 initial, inherit, unset과 같은 3가지 속성이 포함되어있습니다. .header{ all:initial; color: blue; font-size: 14px; } 물론 ie 지원범위들을 생각하면 inherit이라던지 auto로 사용할 수 있는 속성이 있다면 그것으로 대체하는 것이 가장 좋..

스크롤바는 웹사이트에서 몇가지의 특징을 가지고 있습니다. 첫째, 스크롤바는 사용성과 접근성의 요소입니다. 둘째, 경험의 법칙 : 영역이 스크롤되면 스크롤바가 표시되어야합니다. 하지만 웹은 큰 공간이고 저는 트릭을 좋아하기 때문에 호버링할 때만 공개하는 아이디어를 다룰 것입니다. macOS 자체도 기본적으로 스크롤바를 숨겨서 상황에 따라 상호 작용할 때 표시합니다. iOS에서도 동일하므로 혼란스러운 상황이 발생합니다. 여기에 기본적으로 스크롤바를 숨기고 요소를 가리킬 때만 표시하는 방법이 있습니다. macOS 설정에 관계없이 Chrome, Firefox 및 Safari에서 작동합니다. 트릭은 마스크가 스크롤바를 덮는다는 것입니다! 따라서 스크롤바 (여기서는 17px가 덮을 것이라고 추측하고 있습니다)와 높..

현재 많은 사이트들에서 사용하는 grid 스타일 속성은 다음과 같습니다. .grid { display: grid; grid-template-columns: repeat(3, 1fr); } 위 처럼 작성하는 대신에 다음과 같이 되어야 한다는 것입니다. .grid { display: grid; grid-template-columns: repeat(3, minmax(10px, 1fr)); } 왜일까요? 전자의 경우 그리드 열의 최소 너비는 최소 내용이므로 원하는 것보다 어색하게 더 넓어질 수 있습니다. 후자의 경우 최소값을 10px로 줄였습니다 (0이 아니므로 사라지지 않고 더 많은 혼란을 초래하지 않음). 작업이 조금 필요하지만 더 나은 효율을 볼 수 있을거에요! 출처 : css-tricks.com/you-..

css variables 사용에 대해서 어떻게 생각하시나요? 오랫동안 요청되었지만 여전히 많이 사용되지 않는 계단식 변수에 대한 CSS 맞춤 속성은 협업 및 코드 재사용을위한 혁신적인 가능성을 제공합니다. 그러나 오늘날 CSS 변수는 제대로 이해되지 않고 있습니다. 이 글을 읽은 후 선언적 CSS 변수와 다른 프로그래밍 언어의 변수 간의 차이점과 그 기능을 활용하는 방법을 더 잘 이해하기를 바랍니다. CSS 변수는 계단식으로 연결되고 상속되는 사용자 지정 속성입니다. -접두사로 시작하며 값에 대한 실제 규칙이 없습니다. 선언시 느슨하게 구문 분석되지만 사용자 지정이 아닌 속성에서 사용될 때까지 오류 처리가 수행되지 않습니다. 해당 값은 모든 CSS 속성에서 사용할 수있는 var (-name) 함수를 통해..

CSS로 레이아웃을 가운데 맞추는 방법들은 많습니다. 그 중 5가지를 알아보도록 하지요. 동영상 버전 레이아웃을 가운데로 맞추는 것에는 다양한 유형이 있습니다. 주의할 다섯 가지는 다음과 같습니다. 1. Squished width(넓이) 변경에 대응할 수 있어야 합니다. 2. Squashed height(높이) 변경에 대응할 수 있어야 합니다. 3. Duplicate 항목 수가 늘어나도 동적으로 늘어나야 합니다. 4. Edit 콘텐츠의 길이와 언어에 따라 동적이어야 합니다. 5. Flow 문서 방향과 글의 방향에 구애받지 않아야 합니다. 5가지 센터링 방법 1. 콘텐트 센터 .content-center { display: grid; place-content: center; gap: 1ch; } 장점 * ..

CSS @keyframes 애니메이션의 각 반복 사이에 일시 중지를 추가하고 싶었다면 CSS에서 이를 수행하는 기본 제공 방법이 없다는 사실에 실망했을 것입니다. 물론 애니메이션 지연을 사용하여 @keyframe 집합의 시작을 지연할 수 있지만 키 프레임을 통한 첫 번째 반복과 각 후속 실행 사이에 시간을 추가할 방법은 없습니다. 기본적인 방법은 다음과 같습니다. /* scss */ @for $i from 1 through 20 { &:nth-child(#{$i}) { $delay: random(9999) + 0ms; top: calc(50% - #{random(400) - 200px}); left: calc(50% - #{random(300) + 0px}); animation-delay: $delay;..