Front End Develop Front End Develop

지금껏 미디어쿼리를 자바스크립트에서 구현하고 resize 이벤트에 따라서 무언가 UI에서 바뀌어야 할 때 사용하는 방식은 다음과 같습니다. function mediaResize() { if (window.innerWidth > 768) { console.log('resized window'); } } window.addEventListener('resize', mediaResize); matchMedia로 좀 더 간편하게 Resize를 다뤄보세요! 공식적으로는 Working Draft 상태인 CSS Object Model View Module 사양의 일부이지만, 이에 대한 브라우저 지원은 99.4%의 글로벌 적용 범위를 가진 Internet Explorer 10까지 지원됩니다. 사용방법은 다음과 같습니다..

https://squoosh.app/ Squoosh Simple Open your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files. squoosh.app AVIF 포맷을 사용하면 매우 효율이 좋지만 여전히 사파리는 지원이 미비해서 당장 사용하지는 않을 것 같습니다. 하지만 이미지 압축과 변환에 대한 정보를 알고 있는 것만해도 도움이 많이 되겠지요. 곧 사파리에서도 지원한다는 뉴스들이 조금씩 보입니다. 사파리에서도 적용되면 웹 퍼포먼스 환경의 획기적인 변화가 나타날 것이라고 생각되네요. 사용은 다음과 같이 하면 됩니다. 감사합니다

CSS로 섀도우 효과를 많이 사용하실 텐데요. 디자이너가 직접 디자인 된 섀도우를 그대로 구현하는 경우도 있고, 백오피스 등 다양한 사내 툴들을 만들 때는 본인이 직접 예쁜 섀도우를 만들어서 적용해주어야 합니다. 미세하게 보이는 섀도우 하나가 전체 어플리케이션의 품질을 결정하는 것을 알고 계시나요? 그렇기에 보다 일반적이지 않은 최적화된 섀도우로 보여주는 것이 중요합니다. 위의 그림과 같이 만들기 위해서 box-shadow, hsl() 색상에 대한 선행지식이 필요합니다. 그림자는 일반적으로 고도를 표현하고 그림자가 클수록 고도가 높다는 것을 의미합니다. 이는 사람들로 하여금 요소가 입체적으로 떠있다는 느낌을 전해주기도 하지요. 때로는 다른 세계로 통하는 문인 것처럼 촉각적인 느낌과 환상적인 느낌을 사용자..

요약 요약 내용 계속 보기 요약 내용 계속 보기 요약 내용 계속 설명보기 요약 내용 계속 설명보기 HTML로 위와 같이 마크업을 하면, details는 위와 같은 Shadow DOM 구성을 가지고 있기 때문에 아래와 같이 가상돔의 내용이 보여지게 됩니다. #shadow-root (user-agent) 세부정부 reveal reveal 요약 요약 내용 계속 보기 요약 내용 계속 보기 개발자 도구의 요소검사(F12)에서 위와 같은 Shadow DOM들을 보신적이 있으실 겁니다. 여기서 신기한 점은 CSS를 다음과 같이 선언해도 box-sizing: border-box가 적용되지 않고 content-box로 적용된다는 점입니다. * { box-sizing: border-box; } 이유 → shadow roo..

유용한 자바스크립트 스니펫들이 있어서 소개드립니다. 1. all // all - 모든 컬렉션에 대해서 true를 반환하면 true, 아니라면 false // 두번째 인수를 생략하면 기본 연산에 대한 boolean값을 리턴합니다. const all = (arr, fn = Boolean) => arr.every(fn); all([4, 2, 3], x => x > 1); // true all([1, 2, 3]); // true 2. allEqual // allEqual - 모든 배열 요소가 같은지 체크 const allEqual = arr => arr.every(val => val === arr[0]); allEqual([1, 2, 3, 4, 5, 6]); // false allEqual([1, 1, 1, 1..

최근에 W3C에 Scoped styles에 대한 초안이 등재되어서 아주 가볍게 다루어봅니다. https://drafts.csswg.org/css-cascade-6/#scoped-styles CSS Cascading and Inheritance Level 6 Abstract This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements. New in this level is § 6.5 Scoped Styles. C ..

https://www.apple.com/kr/airpods-pro/ AirPods Pro 새롭게 선보이는 AirPods Pro. 액티브 노이즈 캔슬링, 투명성 모드, 맞춤형 핏까지. 이 모든 걸 갖춘 놀랍도록 가벼운 인 이어 헤드폰. www.apple.com 위와 같은 애플 에어팟 프로 사이트와 같이 스크롤에 따른 동영상 애니메이션과 가속도를 활용한 유려한 애니메이션들을 보면 어떤 생각들이 드시나요? 제품을 조금 더 구매하고싶은 욕구를 강력하게 만들어주는 이러한 사용자 경험(UX)에 대해서 어떻게 생각하시나요? 미적이고 유려한 것들이 제품의 사업적 가치를 더욱 더 올려주고 브랜드의 가치를 더욱 더 뛰어나게 해주고 그러한 랜딩페이지는 사용자로 하게끔 해당 제품을 구매할 수 있도록 유도하기에 충분합니다. 기..

요소의 움직임을 구성할 때 액티브되는 요소가 기존 요소들의 아래로 이동되는 것보다 사용자의 시선을 분산시키지 않도록 가장 상위로 구성하고 자연스러운 움직임으로 따라갈수 있도록 유도해야 한다. 요소의 움직이는 애니메이션 거리에 비례하는 시간은 제한사항이 분명히 있어야하고 멀어질 수록 빠르게 움직여야 한다. 사용자의 기다리는 시간은 최대한 짧도록, 그리고 크기와 거리의 비례에 따라서 동작하도록 구성한다. 하단 요소가 움직이는 것이 시선에 따라서 보이도록 약간의 딜레이를 주어서 사용자가 아래에서 컨텐츠가 올라오는 것을 볼 수 있도록 한다. 리스트를 뿌릴 때 사용자의 시선이 끊기도록 뿌리지 않고 자연스럽게 모든 컨텐츠를 눈의 속도로 이어지게 볼 수 있도록 구성한다. 리스트에서 하나의 포커스로 면이 확대될 때는 ..