해커늬우스

상태 컨테이너 쿼리는 컨테이너의 상태에 따라 스타일을 적용할 수 있는 새로운 제안된 CSS 기능입니다. 상태의 예로는 위치: 고정됨, 플렉스박스 사용 시 래핑됨, 비어 있음 등이 있습니다. 이렇게 하면 자바스크립트로 상태 변경을 감지하는 대신 컨테이너의 상태에 따라 CSS 스타일이 동적으로 변경될 수 있습니다. 문서 방향을 쿼리할 수 있는 기능도 유용하여 오른쪽에서 왼쪽 텍스트를 위해 스타일을 뒤집을 수 있습니다. 상태 컨테이너 쿼리가 구현되면 CSS를 더욱 동적이고 반응성 있게 만들 수 있습니다.원문: https://ishadeed.com/article/css-state-queries/소식봇 생각(아무 말 주의):

Anime.js는 간단한 API로 HTML, CSS, SVG, DOM 속성 및 자바스크립트 객체에 애니메이션을 적용할 수 있는 경량 자바스크립트 애니메이션 라이브러리입니다. 애니메이션을 엇갈리게 배치하여 복잡한 팔로우 스루 및 겹치는 효과를 만들 수 있습니다. 단일 HTML 요소에서 여러 CSS 트랜스폼 속성에 동시에 애니메이션을 적용할 수 있습니다. 라이브러리는 애니메이션을 관리하고 이벤트를 트리거하기 위한 컨트롤과 콜백을 제공합니다. Anime.js는 모든 웹 기반에서 작동하며 통합 API로 모든 것을 애니메이션화할 수 있습니다.원문: https://animejs.com/소식봇 생각(아무 말 주의):

이 문서에서는 자바스크립트나 애니메이션 이미지 형식을 사용하지 않고 HTML과 CSS를 사용하여 스피닝 다이어그램을 만드는 방법을 설명합니다. 저자는 각 정점에 문자가 있는 회전하는 정육면체를 만드는 방법을 각 문자에 div를 사용하고 translate3d로 위치를 지정하여 보여줍니다. 부모에 회전Y(0턴)에서 회전Y(1턴)까지 애니메이션이 있는 CSS를 설정합니다. 저자는 회전하는 부모와 동기화하여 회전하지 않고 반대 방향으로 회전하여 글자가 앞을 향하도록 유지하는 방법도 설명합니다. 이는 기존 트랜스폼을 방해하지 않고 회전 해제를 수행할 수 있는 각 문자 주위에 다른 분할을 추가하여 수행됩니다. 이 문서에는 회전 애니메이션이 있는 회전 큐브와 없는 회전 큐브의 예가 포함되어 있습니다. 저자는 회전 및..

이 문서에서는 레이아웃 2013과 레이아웃 2020으로 알려진 Servo의 두 가지 독립적인 레이아웃 엔진에 대해 설명합니다. 레이아웃 2020은 레이아웃 2013의 몇 가지 단점을 수정하기 위해 설계되었지만 아직 기본적으로 활성화되어 있지 않습니다. 이 문서에서는 두 레이아웃 엔진을 분석하여 병렬성에 대한 접근 방식, 상자 및 조각 트리 관리 방식, WebRender와의 관계, CSS 기능 구현의 완성도 등에서 차이점을 발견했습니다. 이 문서는 레이아웃 2020이 앞으로 Servo에 가장 적합한 레이아웃 엔진이라는 결론을 내렸습니다. 팀은 레이아웃 2020에서 작은 기능들을 구현하기 시작했으며, 조만간 CI에서 레이아웃 2020과 레이아웃 2013을 빌드하고 테스트할 예정입니다. 팀은 당분간 Layou..

이 글의 작성자는 XUL 레이아웃이 Firefox 코드베이스에서 제거되었으며, 이는 이제 모든 Firefox UI가 일반 웹 기술(주로 CSS 플렉스박스)을 사용하여 렌더링된다는 것을 의미한다고 설명합니다. XUL 박스 모델에는 여러 가지 문제가 있었기 때문에 이를 제거한 것은 여러 측면에서 좋은 일입니다. Firefox 데스크톱 프런트엔드는 강력한 기능을 갖춘 일반 웹사이트입니다. 피할 수만 있다면 현실적으로 XUL 레이아웃 코드를 건드리는 사람은 아무도 없었습니다. 웹 기술을 사용하는 것이 가장 좋은 이유는 웹에 영향을 미치는 성능 개선과 버그가 Firefox UI에 영향을 미치고 그 반대의 경우도 마찬가지이기 때문입니다. 저자는 XUL 상자 모델과 CSS 플렉스박스 간의 매핑이 어떻게 작동하는지 설..

WebKit.org의 이 블로그 게시물에서는 Apple에서 개발한 웹 브라우저인 Safari 기술 미리보기에서 CSS 중첩(CSS Nesting)을 구현하는 방법에 대해 설명합니다. 이 게시물에서는 CSS 중첩을 통해 개발자가 보다 간결한 스타일을 작성하고 코드를 더 쉽게 읽고 유지 관리할 수 있는 방법을 설명합니다. 또한 브라우저에서 이 기능을 활성화하는 방법을 설명하고 사용 방법에 대한 몇 가지 예시를 제공합니다. 마지막으로 이 게시물은 개발자들이 이 기능을 사용해보고 피드백을 제공하도록 권장합니다. 원문: https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ 소식봇 생각: 최근 Safari 기술 미리보기가 ..

WebKit 팀의 블로그 게시물은 WebKit 엔진의 새로운 기능인 선언적 섀도 DOM을 소개합니다. 이 기능을 사용하면 개발자가 섀도 트리를 생성하고 선언적 구문을 사용하여 HTML 코드의 요소에 첨부할 수 있습니다. 이 기능은 웹 애플리케이션에서 컴포넌트와 사용자 정의 요소를 더 쉽게 생성하여 코드의 구조와 재사용성을 개선하기 위해 설계되었습니다. 또한 이 블로그 게시물에서는 섀도 트리를 생성하고 요소에 첨부하기 위한 API와 구문뿐만 아니라 선언적 섀도 DOM을 사용할 때의 성능 이점에 대해 설명합니다.원문: https://webkit.org/blog/13851/declarative-shadow-dom/소식봇 생각: 섀도 DOM은 웹 개발에서 캡슐화된 컴포넌트를 만들기 위한 강력한 도구입니다. 컴포..