Front End Develop Front End Develop

yarn global add [패키지명] npm install [패키지명] -g

여러개의 애니메이션을 동시에 적용하고 싶을 땐 어떻게 하시나요? div { animation: x 2000ms infinite alternate ease-in, y 2000ms infinite alternate ease-out; } @keyframes x { from { transform: translateX(0vw) } to { transform: translateX(90vw) } } @keyframes y { from { transform: translateY(0vh) } to { transform: translateY(90vh) } } 이렇게 중첩하게되면 똑같은 2000ms 시간 내에 하나만 적용되어야 하므로 한 가지 애니메이션만 작동하게 됩니다. 하지만, 최신 브라우저에서 사용되는 Web Anim..

크롬 업데이트가 어느 덧 100을 바라보고 있습니다. 프론트엔드 개발자로써 브라우저 지분율을 대부분 차지하고 있는 크롬 브라우저의 업데이트는 민감할 수 밖에 없으리라 생각합니다. 저희가 보여주는 모든 UI, UX 작업들에 영향을 주기 때문이기도 하지요. 그럼 본격적으로 크롬 99에서 업데이트 된 점들을 하나 둘 씩 살펴보도록 합시다. : ) ​CSS 캐스케이딩 레이어, 새로운 Input 엘리먼트에 대한 피커 셀렉터 등 곧 크롬 100을 앞두고 있는 크롬 99에서는 다양한 옵션들이 추가되었는데요. 크롬 96부터 아래와 같은 옵션이 생겨서 navigator.userAgent로 탐색할 수 있는 버전을 강제 설정으로 변경해서 확인하실 수 있습니다. 크롬 버전에 대해서 2자리 숫자로 체크를 하고 있었다면 이제 달..

WCAG(웹 콘텐츠 접근성 지침)에 의한 이야기를 해볼까 합니다. Web Content Accessibility Guidelines(WCAG)에 따르면 애니메이션에 있어서 일시중지 및 재생제어 기능을 제공해야하는 시기와 화면 깜빡임 또는 깜빡임에 대한 제한 등 움직임에 민감한 사용자를 위한 애니메이션을 줄이는 등 다양한 지침들이 포함됩니다. Pause, Stop, Hide 특히, 애니메이션에 적용되는 WCAG 권장 사항 중 첫 번째는 Pause, Stop, Hide 입니다. For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is pres..

import React from "react"; const imgCache = { __cache: {}, read(src) { if (!src) { return; } if (!this.__cache[src]) { this.__cache[src] = new Promise((resolve) => { const img = new Image(); img.onload = () => { this.__cache[src] = true; resolve(this.__cache[src]); }; img.src = src; setTimeout(() => resolve({}), 7000); }).then((img) => { this.__cache[src] = true; }); } if (this.__cache[src] inst..

웹사이트의 로딩 시간을 개선하기 위해서는 다양한 요소들이 존재합니다. 요즘 SPA 등에서 SEO를 위해서 사용되는 코드 스플리팅의 원리를 이용하면 조금 더 간단하게 생각할 수 있습니다. 왜 로딩 타임을 다뤄야 하는가? Tims is money, 말 그대로 시간은 돈이기 때문입니다. 사람들은 웹 사이트를 오래 기다려줄 만큼 여유롭지 않을 수도 있습니다. 주문 전환율도 빠른 웹사이트가 높다는 것은 이미 많이 알려진 사실입니다. 로딩 타임에 있어서 CSS는 어떤 영향을 주는가? 간단하게 브라우저 작동원리로만 봐도 CSS는 HTML 문서가 파싱된 다음에 외부 리소스인 CSS, JS는 만날 때마다 다운로드 우선순위를 할당하고 다운로드를 시작합니다. 이 때, 다양한 미디어쿼리들이 있습니다.(예를 들어 print 등..

CSS 및 JS로 특정 문자들을 수정할 수 있습니다. @font-face @font-face는 unicode-range라는 속성을 가지고 있습니다. 예를 들어, 우리 사이트의 제목에 (&)앰퍼샌드가 자주 포함되어 있다면, 앰퍼샌드(U+0026)의 유니코드 값을 조회하고 유니코드 범위를 사용하여 이 특정 문자를 대상으로 지정할 수 있습니다. @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300'); h1, h2, h3, h4, h5, h6 { font-family: 'Ampersand', Montserrat, sans-serif; } @font-face { font-family: 'Ampersand'; src: local('Ti..

clamp()는 ie를 지원하지 않습니다. 저희가 ie와 작별할 시간도 머지 않았습니다. font-size를 반응형으로 잡을 때 유동적으로 작용할 수 있도록 도와줍니다 그리고 최소 사이즈 및 최대 사이즈도 정할 수 있지요. 사용법은 다음과 같습니다. h1 { font-size: clamp(16px, 5vw, 34px); } /** * 16px - 최소사이즈 * 5vw - 기준점 * 34px - 최대사이즈 */ 뷰포트 너비의 5%인 font-size가 되는데 16px부터 34px 사이의 사이즈에서만 적용됩니다. 예를 들어 뷰포트 너비가 300px인 경우 5vw 값은 15px와 같습니다. 그러나 해당 font-size 값을 최소 16px로 고정했으므로 16px이 될 것입니다. 브라우저 지원이 아직 미비하지만..