CSS에 `random()` 함수가 추가되어 웹 디자인의 혁신을 가져옵니다! JavaScript 없이 CSS 내에서 난수를 생성하여 애니메이션 지연, 무작위 레이아웃, 무작위 색상 등을 구현할 수 있습니다. 이 함수는 최소값, 최대값, 단계의 세 가지 인수를 사용하며, 사용자 지정 속성이나 `element-shared` 키워드를 사용하여 요소 내부 또는 전역적으로 난수를 유연하게 공유할 수 있습니다. 성운 생성, 무작위로 배치된 직사각형, 사진 스택 등의 예시를 통해 `random()` 함수의 강력함을 보여주고 개발자의 피드백을 요청합니다.
더 보기
이 글에서는 CSS의 새로운 앵커 포지셔닝 기능을 설명합니다. 이 기능을 사용하면 다른 요소의 위치를 기반으로 요소를 배치할 수 있습니다. 자바스크립트 없이 최소한의 CSS만으로 반응형 메뉴와 툴팁을 만들 수 있습니다. 튜토리얼에서는 `position-anchor`, `position-area`, `position-try`, `anchor()` 함수의 사용법을 자세히 설명하고 논리 속성과 물리적 속성의 사용법을 비교합니다. 반응형 메뉴 예시는 다양한 화면 크기에 대한 적응성을 보여줍니다.
더 보기
CSS의 새로운 `contrast-color()` 함수는 지정된 배경색에 대해 자동으로 검정색 또는 흰색 텍스트를 선택하여 색상 선택을 단순화합니다. 이 기사에서는 사용 방법, 대비 계산을 위한 WCAG 2.1 및 APCA 알고리즘 비교, 접근성 향상을 위한 `prefers-contrast` 미디어 쿼리 사용법을 자세히 설명합니다. 현재 검정색과 흰색으로 제한되지만, 향후 버전에서는 더욱 사용자 지정 가능한 옵션이 제공될 수 있습니다. 이 함수는 개발을 간소화하고, 특히 여러 색상 상태를 관리하는 경우 접근성을 향상시킵니다.
더 보기
Safari Technology Preview 216은 `text-wrap: pretty`를 도입하여 웹의 텍스트 레이아웃에 혁명을 일으켰습니다. 단락 기반 알고리즘을 사용하여 지나치게 짧은 마지막 줄, 들쭉날쭉한 가장자리, 산만한 타이포그래피 리버와 같은 오랜 타이포그래피 문제를 해결합니다. 기존의 한 줄씩 알고리즘과 달리 `pretty`는 전체 단락을 평가하여 가독성과 미적 요소를 향상시키기 위해 레이아웃을 최적화합니다. Chrome 등의 브라우저도 `pretty`를 지원하지만 Safari의 구현은 더욱 포괄적이며 마지막 몇 줄이 아니라 전체 단락을 조정합니다. `text-wrap: balance`는 모든 줄을 거의 같은 길이로 만드는 데 중점을 두며 제목이나 짧은 텍스트에 적합합니다. 개발자는 필요에 따라 적절한 `text-wrap` 값을 선택하고 성능에 미치는 영향을 고려해야 합니다.
더 보기
WebKit은 기존 웹 푸시의 전력 소모 및 개인 정보 보호 문제를 해결하기 위해 선언적 웹 푸시를 도입했습니다. 기존 웹 푸시는 서비스 워커에 의존하기 때문에 지능형 추적 방지(ITP)의 영향을 받기 쉽고, 처리 실패로 인해 구독이 취소될 수 있습니다. 선언적 웹 푸시는 서비스 워커 없이 알림을 보내고 표시할 수 있으며, 푸시 메시지에 알림 내용을 직접 포함하여 효율성과 개인 정보 보호를 향상시킵니다. 기존 웹 푸시와의 하위 호환성도 유지합니다.
더 보기
CSS Grid와 Flexbox는 강력한 레이아웃 도구이지만, Masonry 레이아웃처럼 복잡한 레이아웃에는 부족합니다. "Item Flow"라는 새로운 제안은 Flexbox의 `flex-flow` 속성과 Grid의 `grid-auto-flow` 속성을 통합하여 이 문제를 해결하고자 합니다. `item-direction`, `item-wrap`, `item-pack`, `item-slack`과 같은 새로운 속성을 도입하여 더욱 유연하고 강력한 레이아웃 제어를 가능하게 합니다. 이를 통해 Flexbox에 밀집 배치, Grid에 줄 바꿈 비활성화와 같은 새로운 기능이 추가되고, Masonry 레이아웃에 대한 깔끔한 해결책을 제공합니다. 결과적으로 더욱 통합적이고 사용자 친화적인 CSS 레이아웃 시스템을 구축할 수 있습니다.
더 보기