Front End Develop Front End Develop

1. 애니메이션 메뉴 탭 바 전환탭 사이에 애니메이션이 있는 60FPS 유체 헤더입니다. CSS 애니메이션 또는 JavaScript를 사용하여 매끄러운 60FPS 애니메이션을 얻을 수 있습니다. HTML, CSS 및 JavaScript를 조화롭게 사용하여 메뉴를 다시 만드는 방법 SVG, CSS 애니메이션 작업 및 둘 다 결합하는 방법 애니메이션 goo svg 필터를 사용해서도 구현할 수 있겠지요. 2. Cyberpunk 2077 테마 버튼 비슷하게 구현을 해보는 것도 좋을 것 같습니다. CSS 변수, 키 프레임 및 클립 경로를 사용하는 방법 복잡한 호버 애니메이션을 만드는 방법 3. 체스 조각과 체스 판 체스에 대한 관심은 Walter Tevis의 1983년 소설을 원작으로 한 드라마 미니 시리즈 인 ..

document.cookie = "cookie1=soo; SameSite=Lax"; document.cookie = "cookie2=soo"; document.cookie = "cookie3=hoo; SameSite=None; Secure"; SameSite를 명시한 cookie1과 cookie2는 기본적으로 크롬 80 이상부터 Default Lax로 동작합니다. 하지만 cookie3의 경우에는 None으로 속성을 지정하면서 Secure 속성도 반드시 같이 지정해주셔야 합니다. 그렇게 하면 반드시 HTTPS 프로토콜 환경에서만 전송이 가능하며 서드파티와 결재모듈 등의 연동 작업 및 사용을 할 수 있게 됩니다. 이 외에도 다양하게 서버에 세팅하는 등 해결할 수 있는 방법들이 있습니다.

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로 사용할 수 있는 속성이 있다면 그것으로 대체하는 것이 가장 좋..

HTML없이는 웹을 상상할 수 없습니다. 웹 개발자가 되려면 가장 먼저 배워야 할 것입니다. 그러나 여전히 일부 사람들이 HTML의 힘을 과소평가하는 것을 봅니다. 다른 특별한 기능들을 알지 못하기 때문입니다. 1. Datalist 이 태그는 미리 정의된 옵션 목록을 지정하고 사용자가 옵션을 더 추가할 수 있도록 합니다. autocomplete(자동 완성) 기능을 제공하기 때문에 자동완성 기능으로 원하는 옵션을 얻을 수도 있습니다. Choose your fruit : 2. Details Details 태그는 사용자에게 주문형 세부 정보를 제공합니다. 따라서 이 태그는 주문형 정보가있는 목차를 표시하려는 경우에 사용할 수 있습니다. 열리면 확장되어 내용이 표시됩니다. Summary 태그는 표시되는 Deta..

ES 모듈인 ESM은 자바스크립트(ES) 모듈을 의미합니다. 최신 브라우저가 지원합니다. IE를 삭제하는 한 문은 상당히 열려 있습니다. ESM 이전의 JavaScript 프로젝트 상황은 다음과 같습니다. npm에서 사용해야하는 패키지가 있습니다. package.json, npm install 등을 사용하여 미리 npm에서 설치합니다. 어떤 이유로 (개발자의 편의를 위해) 잘못된 ESM 인 import 문을 작성하고 로컬 node_modules 폴더에서 패키지를 가져 오는 것으로 가정합니다. 우리 번들러는 잘못된 import를 어떻게 처리해야하는지 알게 될 것입니다. Babel 및 다른 대안들을 실행하는 것과 같이 어쨌든 우리가 원하는 다른 작업을 수행한다는 말이 있기 때문에 이것은 모두 괜찮습니다. 우..

스크롤바는 웹사이트에서 몇가지의 특징을 가지고 있습니다. 첫째, 스크롤바는 사용성과 접근성의 요소입니다. 둘째, 경험의 법칙 : 영역이 스크롤되면 스크롤바가 표시되어야합니다. 하지만 웹은 큰 공간이고 저는 트릭을 좋아하기 때문에 호버링할 때만 공개하는 아이디어를 다룰 것입니다. 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-..