CSS-Tricks 한국어 팔로우 CSS Tricks는 웹 개발자, 특히 CSS 및 관련 기술에 초점을 맞춘 웹 개발자들을 위해 유용한 트릭, 기법 및 리소스를 제공하는 인기 있는 웹사이트입니다. CSS-Tricks 한국어 RSS thenote.app RSS css-tricks.com CSS-Tricks css-tricks.com
쓰기 모드 writing-mode CSS 속성은 텍스트 줄이 가로 또는 세로로 배치되는지, 그리고 블록과 줄이 진행되는 방향을 설정합니다. .element { writing-mode: vertical-rl; }이는 중국어, 일본어 또는 ...와 같은 언어에서 가장 유용합니다.writing-mode는 원래 CSS-Tricks에 손으로 직접 작성하여 사랑으로 게시되었습니다. 뉴스레터도 꼭 받아보세요. writing-mode css-tricks.com
포인터 이벤트 pointer-events 속성은 클릭, 호버 상태 및 기타 포인터 기반 이벤트와 같은 포인터 이벤트의 대상이 될 수 있는지 여부를 제어합니다. 즉, 브라우저가 요소를 대화형으로 처리해야 하는지 여부를 결정할 수 있습니다.pointer-events는 원래 CSS-Tricks에 직접 작성하여 사랑으로 게시되었습니다. 뉴스레터도 꼭 구독해야 합니다. pointer-events css-tricks.com
What’s !important #15: 경계 인식 CSS, 시간 기반 CSS, 전체 너비 CSS 및 기타 지난번과 마찬가지로, What’s !important #15는 상당히 알차게 구성되어 있습니다. 경계 인식 CSS, 그리드 레인 접근성 확보, 시간 기반 웹 디자인 제작, 풀 블리드 CSS 수정, 사용자 정의 가능한 선택 개선, 새로운 웹 플랫폼 기능 등에 대해 자세히 알아보세요.What’s !important #15: 경계 인식 CSS, 시간 기반 CSS, 풀 블리드 CSS 및 기타 기능은 CSS-Tricks에 애정을 담아 직접 작성하고 게시했습니다. 뉴스레터도 꼭 구독하시기 바랍니다. What’s !important #15: Boundary-aware CSS, Time-based CSS, Full-bleed CSS, and More css-tricks.com
강력한 CSS border-shape 속성을 사용할 준비를 하세요! 최근에 shape() 함수와 corner-shape 속성을 얻었습니다. CSS에서 모양을 만드는 데 이 외에 또 무엇이 필요할까요? 알려드리겠습니다: border-shape 속성입니다!강력한 CSS border-shape 속성을 준비하세요! CSS-Tricks에 애정을 담아 직접 작성하고 게시했습니다. 뉴스레터도 꼭 받아보세요. Get Ready For the Powerful CSS border-shape Property! css-tricks.com
What’s !important #14: Gap Decorations, random(), field sizing, and More 바쁘신 줄 알기에, What’s !important #14에서는 몇 가지 브라우저 업데이트에도 불구하고 매우 바빴던 지난 몇 주를 빠르게 살펴보겠습니다. CSS Quake부터 CSS Gap Decorations까지, 놓치지 마세요!What’s !important #14: Gap Decorations, random(), field sizing, and More는 CSS-Tricks에 애정을 담아 직접 작성하고 게시했습니다. 뉴스레터도 꼭 구독하시길 바랍니다. What’s !important #14: Gap Decorations, random(), field sizing, and More css-tricks.com
CSS 상태와 JavaScript 이벤트 간의 전환선 CSS는 항상 사용자 상호 작용에 기반하여 스타일을 지정하는 의사 클래스를 가지고 있었습니다. 그러나 최근 기능들은 CSS가 "수신"하는 것과 JavaScript가 일반적으로 수신하는 것의 대안으로서의 기능 사이의 경계를 모호하게 만들고 있습니다.CSS 상태와 JavaScript 이벤트 사이의 변화하는 경계는 CSS-Tricks에 애정을 담아 직접 작성하고 게시되었습니다. 뉴스레터도 꼭 구독하시는 것이 좋습니다. The Shifting Line Between CSS States and JavaScript Events css-tricks.com
translateZ() translateZ() 함수는 요소를 사용자에게 더 가깝게 또는 더 멀리 이동시킵니다.translateZ()는 원래 CSS-Tricks에 애정을 담아 직접 작성하고 게시되었습니다. 여러분도 이 뉴스레터를 꼭 구독해야 합니다. translateZ() css-tricks.com
translateY() translateY() 함수는 지정된 양만큼 요소를 수직으로 이동시킵니다.translateY()는 원래 CSS-Tricks에 애정을 담아 직접 작성하여 게시되었습니다. 여러분도 이 뉴스레터를 꼭 구독해야 합니다. translateY() css-tricks.com
translateX() translateX() 함수는 지정된 양만큼 요소를 수평으로 이동시킵니다.translateX()는 원래 CSS-Tricks에 직접 작성하여 게시되었습니다. 여러분도 이 뉴스레터를 구독하시는 것이 좋습니다. translateX() css-tricks.com
translate() CSS translate() 함수는 2차원 평면에서 요소의 기본 위치를 이동시킵니다.translate()는 CSS-Tricks에 애정을 담아 직접 작성하고 게시했습니다. 뉴스레터도 꼭 구독하시길 바랍니다. translate() css-tricks.com
반대 스크롤 방향에 스크롤 기반 애니메이션 사용하기 때로는 디자이너들이 우스꽝스러운 아이디어를 내놓기도 하는데, 결국에는 마음에 들게 되는 경우가 있습니다. 제가 페이지를 스크롤할 때 사용자가 반대 방향으로 움직이는 아이템들의 열을 만들어야 했던 이 컨셉에서도 그런 일이 있었습니다.CodePen 임베드 대체참고: 이 …반대 스크롤 방향에 스크롤 기반 애니메이션 사용하기는 CSS-Tricks에 애정을 담아 직접 작성하고 게시한 글입니다. 뉴스레터도 꼭 구독하시는 것이 좋습니다. Using Scroll-Driven Animations for Opposing Scroll Directions css-tricks.com
스크롤에 반응하는 애니메이션 첫 살펴보기 스크롤 기반 애니메이션과 스크롤 트리거 애니메이션의 차이점을 살펴보겠습니다.스크롤 트리거 애니메이션에 대한 첫 번째 시선은 CSS-Tricks에 애정을 담아 직접 작성하고 게시한 글입니다. 뉴스레터도 꼭 구독하시길 바랍니다. A First Look at Scroll-Triggered Animations css-tricks.com
ariaNotify()의 사이렌의 노래 WAI-ARIA 1.3 사양에 의해 정의된 새로운 ariaNotify() 메서드가 있습니다. 이 메서드는 프로그래밍 방식으로 스크린 리더의 내레이션을 트리거하는 수단을 제공합니다.ariaNotify()의 사이렌의 노래는 원래 CSS-Tricks에 손으로 직접 작성하여 사랑으로 게시되었습니다. 뉴스레터도 꼭 구독하시는 것이 좋습니다. The Siren Song of ariaNotify() css-tricks.com
그건 좋은 점이야 Props for That는 브라우저에서 일반적으로 CSS로 볼 수 없는 실시간 props 기반의 것들을 만듭니다. 커서 위치, 진행률 값, 특정 폼 상태, 현재 시간, 스크롤 속도와 같은 것들입니다.Prop For That는 원래 CSS-Tricks에 직접 작성하여 게시되었습니다. 여러분도 뉴스레터를 구독하는 것이 좋습니다. Prop For That css-tricks.com
What’s !important #13: @function, alpha(), CSS Wordle, 그리고 더 많은 것들 CSS 함수, alpha() 함수, Grid Lanes, 여러분이 모를 수도 있는 Dialog에 대한 몇 가지 정보, CSS Wordle 등 — 이것이 바로 지금 !important한 것들입니다.What’s !important #13: @function, alpha(), CSS Wordle, 그리고 더 많은 것들이 CSS-Tricks에 사랑으로 직접 작성되어 게시되었습니다. 여러분도 이 뉴스레터를 꼭 받아보시는 것이 좋습니다. What’s !important #13: @function, alpha(), CSS Wordle, and More css-tricks.com
왜 3D 뷰 전환이 작동하지 않나요? 3D 뷰 전환이 왜 작동하지 않는 걸까요?! Sunkanmi가 이 답답함을 해결하고 우아한 해결책을 제시합니다.3D 뷰 전환이 왜 작동하지 않는 걸까요?는 CSS-Tricks에 애정을 담아 직접 작성하고 게시한 글입니다. 여러분도 이 뉴스레터를 꼭 구독하시길 바랍니다. Why Isn’t My 3D View Transition Working? css-tricks.com
내비게이션 라벨에 '내비게이션'을 포함할 필요는 없습니다. 스크린 리더를 위해 글을 쓸 때 염두에 두어야 할 미묘한 차이 중 하나입니다.원래 CSS-Tricks에 손으로 직접 작성하여 게시된 내비게이션 라벨에 '내비게이션'을 포함할 필요가 없습니다. 뉴스레터도 꼭 구독하시는 것이 좋습니다. There’s no need to include ‘navigation’ in your navigation labels css-tricks.com
기억에 남는 웹 경험 만들기: 모던 CSS 툴킷 기억에 남는 경험을 만드는 데는 여러 가지 방법이 있습니다. 때로는 양식이 매끄럽게 완성되는 것처럼 간단할 수도 있습니다. 하지만 여기서는 사이트를 살아있는 것처럼 느끼게 하고 기억에 남게 만들고 싶을 때 제가 사용하는 기법들을 공유하는 데 관심이 있습니다.기억에 남는 웹 경험 만들기: 현대 CSS 툴킷은 원래 손으로 작성되어 CSS-Tricks에 애정을 담아 게시되었습니다. 뉴스레터도 꼭 구독하시는 것이 좋습니다. Creating Memorable Web Experiences: A Modern CSS Toolkit css-tricks.com
스크롤 기반, 스크롤 트리거, 스크롤 상태, 그리고 뷰 전환 나는 하나를 말하고 다른 것을 의미했으며, 다른 것이 필요할 때 하나를 사용했습니다. 스크롤 구동 애니메이션, 스크롤 트리거 애니메이션, 컨테이너 쿼리 스크롤 상태, 그리고 뷰 전환을 미래의 나를 위해 비교하고 있습니다.스크롤 구동, 스크롤 트리거, 스크롤 상태, 그리고 뷰 전환은 원래 CSS-Tricks에 직접 작성하여 애정을 담아 게시되었습니다. 뉴스레터도 꼭 구독하시는 것이 좋습니다. Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions css-tricks.com
자바스크립트 없이 완벽한 CSS 파이 차트 다시 도전! CSS 파이 차트에 다시 한번 빠져듭니다! 이번에는 저자 Antoine Villepreux가 단 한 줄의 JS 없이 의미론적이고 유연한 차트를 제공합니다.완벽한 CSS 파이 차트에 대한 또 다른 시도… 자바스크립트 없이! 원래 CSS-Tricks에 직접 작성하여 애정을 담아 게시되었습니다. 여러분도 이 뉴스레터를 꼭 구독해야 합니다. Another Stab at the Perfect CSS Pie Chart… Sans JavaScript! css-tricks.com
offset-path CSS의 offset-path 속성은 애니메이션 중에 요소가 따라갈 이동 경로를 정의합니다.이 속성은 원래 motion-path로 시작되었습니다. 이것과 다른 모든 관련 motion-* 속성들은 명세에서 offset-*으로 이름이 변경되고 있습니다. 우리는 변경하고 있습니다...offset-path는 원래 CSS-Tricks에 손으로 직접 작성하여 사랑으로 게시되었습니다. 뉴스레터도 꼭 받아보세요. offset-path css-tricks.com
@custom-media CSS @custom-media at-rule은 미디어 쿼리에 대한 별칭을 만들 수 있도록 합니다.@custom-media는 원래 CSS-Tricks에 직접 작성하여 사랑으로 게시되었습니다. 여러분도 이 뉴스레터를 꼭 구독해야 합니다. @custom-media css-tricks.com
@function @function at-rule은 CSS 사용자 정의 함수를 정의합니다. 이 사용자 정의 함수는 인수를 받고, 복잡한 로직을 포함하며, 해당 로직에 기반한 값을 반환할 수 있는 재사용 가능한 CSS 블록입니다.@function은 원래 CSS-Tricks에 손으로 직접 작성하여 사랑으로 게시되었습니다. 뉴스레터도 꼭 받아보시는 것이 좋습니다. @function css-tricks.com
::검색-텍스트 CSS ::search-text 의사 요소는 브라우저의 "페이지에서 찾기" 기능에서 일치하는 텍스트를 선택합니다.::search-text는 원래 CSS-Tricks에 직접 작성하여 애정을 담아 게시되었습니다. 뉴스레터도 꼭 구독하시는 것이 좋습니다. ::search-text css-tricks.com
모든 프레임워크를 위한 Astro 마크다운 컴포넌트 유틸리티 이전 글에서는 Astro에서 Markdown 컴포넌트를 사용하는 이유와 방법에 대해 이야기했습니다.여기서는 이를 확장하여 어떤 프레임워크를 사용하든 어디서든 Markdown을 사용할 수 있도록 도와드리겠습니다. 따라서…Astro Markdown Component Utility for Any Framework는 CSS-Tricks에 정성껏 직접 작성하여 게시되었습니다. 뉴스레터도 꼭 구독하시길 바랍니다. Astro Markdown Component Utility for Any Framework css-tricks.com
What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More 구형 (Safari에서 Safari가 없을 때 테스트), 신형 (::checkmark), 중간형 (anchor positioning이지만 HTML 사용), 그리고 더 많은 것들.!important #12: Safari 테스트, ::checkmark, HTML 앵커 포지셔닝, 그리고 더 많은 것들 은 원래 CSS-Tricks에 손으로 직접 쓰고 사랑으로 발행되었습니다. 뉴스레터도 꼭 구독하셔야 합니다. What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More css-tricks.com
CSS 문자 간격으로 텍스트 표시하기 ::nth-letter와 같은 기능이 나오기 전까지는, letter-spacing, ::first-word, ::first-line과 같은 기존 CSS 기능으로도 정말 멋진 텍스트 효과를 만들 수 있습니다.CSS letter-spacing으로 텍스트 드러내기 (원래 손으로 쓴 글이며 CSS-Tricks에 애정을 담아 게시되었습니다. 뉴스레터도 꼭 받아보세요.) Revealing Text With CSS letter-spacing css-tricks.com
AI 시대의 기술 문서 작성 이것은 전적으로 AI에 관한 것이 아닙니다. AI 시대의 기술 문서 작성에 관한 것입니다. 이에 대한 몇 가지 생각이 있으며, 읽고 있는 여러분에게 도움이 되기를 바랍니다.AI 시대의 기술 문서 작성은 원래 CSS-Tricks에 애정을 담아 손으로 쓰고 발행되었습니다. 뉴스레터도 꼭 구독하시길 바랍니다. Technical Writing in the AI Age css-tricks.com
크로스-도큐먼트 뷰 트랜지션: 수백 개의 엘리먼트에 걸친 확장성 페이지의 모든 view-transition-name은 고유해야 합니다. 문제는 CSS의 모든 의사 요소 선택자가 특정 이름을 대상으로 하므로 애니메이션 스타일이 관리할 수 없는 선택자 벽으로 폭발한다는 것입니다.Cross-Document View Transitions: Scaling Across Hundreds of Elements는 CSS-Tricks에 직접 작성하여 게시되었습니다. 뉴스레터도 구독하시는 것이 좋습니다. Cross-Document View Transitions: Scaling Across Hundreds of Elements css-tricks.com
2026년 CSS 중앙 정렬의 현황 수많은 온라인 자료에도 불구하고, 요소를 가운데 정렬하려고 할 때 혼란스러워하기 쉽습니다. 문서화된 해결책들이 있지만, 당신이 선택한 코드가 왜 작동하는지 정말 이해하고 있나요? 2026년 현재의 가운데 정렬 옵션 상태를 살펴보겠습니다.2026년 CSS 가운데 정렬 상태는 CSS-Tricks에 애정을 담아 직접 작성하고 게시했습니다. 뉴스레터도 꼭 구독하세요. The State of CSS Centering in 2026 css-tricks.com
Stack Overflow: 우리가 질문을 멈출 때 Stack Overflow 질문의 급격한 감소를 보는 것은 여전히 엄청난 충격입니다. 우리 업계의 학습에 대해 그것이 무엇을 의미할까요?Stack Overflow: 우리가 질문을 멈출 때 CSS-Tricks에 정성껏 직접 작성하고 게시했습니다. 뉴스레터도 꼭 받아보세요. Stack Overflow: When We Stop Asking css-tricks.com
문서 간 뷰 전환: 아무도 언급하지 않는 함정 이것은 문서 간 뷰 전환에 대한 2부작 시리즈의 1부로, 더 이상 사용되지 않는 옵트인 방식부터 잘 알려지지 않은 4초 타임아웃까지 모든 주의사항을 다룹니다.Cross-Document View Transitions: The Gotchas Nobody Mentions는 CSS-Tricks에 애정을 담아 직접 작성하고 게시했습니다. 뉴스레터도 꼭 구독하시길 바랍니다. Cross-Document View Transitions: The Gotchas Nobody Mentions css-tricks.com
What’s !important #11: 3D 복셀 장면, 플라잉 포커스, CSS 구문 등 스타일링 가능한 3D 복셀 장면, 플라잉 포커스 애니메이션, 또는 새로운 CSS 문법이 마음에 드신다면, 이번 What’s !important 이슈는 분명 여러분을 위한 것입니다.What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More는 CSS-Tricks에 정성껏 직접 작성하여 발행되었습니다. 여러분도 이 뉴스레터를 구독하시는 것이 좋습니다. What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More css-tricks.com
CSS에서 할인 가격 계산 및 표시하기 기본 가격과 할인 금액을 제공하여 할인된 제품 가격을 계산하고 표시하는 CSS의 영리한 사용법으로, attr(), mod(), round()와 같은 최신 CSS 기능을 특징으로 합니다.CSS로 할인된 가격을 계산하고 표시하기는 CSS-Tricks에 애정을 담아 직접 작성하고 게시한 글입니다. 뉴스레터도 꼭 구독하시는 것이 좋습니다. Computing and Displaying Discounted Prices in CSS css-tricks.com
rotateX() rotateX() 함수는 3차원 공간에서 x축을 중심으로 요소를 회전시킵니다.rotateX()는 원래 CSS-Tricks에 직접 작성하여 게시되었습니다. 여러분도 이 뉴스레터를 구독하시는 것이 좋습니다. rotateX() css-tricks.com
rotateY() rotateY() 함수는 요소의 수직 y축을 중심으로 회전시킵니다.rotateY()는 원래 CSS-Tricks에 사랑으로 직접 작성하여 게시되었습니다. 뉴스레터도 꼭 받아보시는 것이 좋습니다. rotateY() css-tricks.com
rotateZ() rotateZ() 함수는 요소를 z축을 중심으로 시계 방향 또는 반시계 방향으로 회전시킵니다.rotateZ()는 원래 CSS-Tricks에 직접 작성하여 게시했습니다. 여러분도 뉴스레터를 구독하시는 것이 좋습니다. rotateZ() css-tricks.com
rotate() rotate() 함수는 2D 평면에서 요소를 시계 방향 또는 반시계 방향으로 회전시킵니다.rotate()는 원래 CSS-Tricks에 애정을 담아 직접 작성하여 게시되었습니다. 여러분도 이 뉴스레터를 꼭 구독해야 합니다. rotate() css-tricks.com
곧 자바스크립트를 섀도우렐름으로 추방할 수 있을 것입니다 제안된 ShadowRealm API는 격리를 위해 특별히 설계된 새로운 종류의 realm을 도입하며, 오직 그것만을 위한 것입니다.곧 우리는 마침내 JavaScript를 ShadowRealm으로 추방할 수 있습니다. 원래 CSS-Tricks에 직접 손으로 작성하여 사랑으로 게시되었습니다. 뉴스레터도 꼭 구독하시는 것이 좋습니다. Soon We Can Finally Banish JavaScript to the ShadowRealm css-tricks.com
왜 키보드 사용자가 오버플로우 컨테이너를 스크롤할 수 없는가 키보드 사용자가 테이블로 탭(Tab)하면 포커스가 셀에 맞춰집니다. 그런 다음 행을 가로질러 읽기 위해 화살표 키를 누르지만 아무 일도 일어나지 않습니다. 스크린 리더 사용자는 스크롤 컨테이너가 아닌 접근성 트리로 탐색하기 때문에 전혀 눈치채지 못했습니다.키보드 사용자가 오버플로우 컨테이너를 스크롤할 수 없는 이유는 원래 CSS-Tricks에 직접 작성하여 게시되었습니다. 뉴스레터도 꼭 받아보시는 것이 좋습니다. Why Keyboard Users Can’t Scroll Your Overflow Containers css-tricks.com
CSS 코너 모양을 사용하여 접힌 모서리 만들기 저는 Kitty Giraudel의 접힌 모서리 기법을 접하게 되었습니다. 최근에 모서리 모양에 푹 빠져 있었기 때문에, 모서리 모양을 사용하여 접힌 모서리를 만들 수도 있을 것이라고 생각했습니다.CSS-Tricks에 애정을 담아 직접 작성하고 게시한 접힌 모서리를 위한 CSS 모서리 모양. 여러분도 이 뉴스레터를 꼭 구독해야 합니다. Using CSS corner-shape For Folded Corners css-tricks.com
2026년 어머니날을 위한 스크롤텔링 선물 2026년 어머니날 스크롤텔링 실험에 어머니께서 어떻게 영감을 주셨는지 설명해 드리겠습니다. 또한, 어머니께서 개발과 삶에 대한 제 접근 방식에 어떻게 영감을 주셨는지도 함께 말씀드리겠습니다.2026년 어머니날을 위한 스크롤텔링 선물은 원래 CSS-Tricks에 사랑으로 직접 손으로 쓰고 발행되었습니다. 여러분도 이 뉴스레터를 꼭 받아보시는 것이 좋습니다. A Scrollytelling Gift for Mum on Mother’s Day 2026 css-tricks.com
Google의 Prompt API Mat Marquis on Google pulling the web standards equivalent of U2 album marketing:Chrome 사용자로서 최근 4GB 용량의 Gemini Nano를 전송받았을 것입니다. 별도의 허락은 묻거나 요구하지 않았습니다. 만약 이를 제거한다면,Google의 Prompt API는 원래 CSS-Tricks에 직접 작성하여 애정을 담아 게시되었습니다. 여러분도 이 뉴스레터를 꼭 받아보시는 것이 좋습니다. Google’s Prompt API css-tricks.com
Grid + Transform 트릭으로 지그재그 CSS 레이아웃 만들기 대부분의 그리드 레이아웃은 완벽하게 정렬된 깔끔한 행에 배치되어, 마치 대형을 갖춘 군인들 같습니다. 하지만 때로는 지그재그 패턴과 같이 좀 더 리듬감 있는 것을 원할 수도 있습니다. CSS Grid로 이를 구현하는 방법은 다음과 같습니다.CSS Grid + Transform 트릭으로 지그재그 CSS 레이아웃 만들기. 이 글은 CSS-Tricks에 애정을 담아 직접 작성하고 게시했습니다. 뉴스레터도 꼭 구독하시길 바랍니다. Making Zigzag CSS Layouts With a Grid + Transform Trick css-tricks.com
고정 높이 카드: 겉보기보다 더 약하다 카드의 여러 열을 동일하게 정렬하는 것은 우리 모두가 겪어본 골칫거리이며, 고정된 높이로 작업할 때는 더욱 어려워집니다.고정 높이 카드: 보기보다 더 취약함은 원래 CSS-Tricks에 손으로 직접 작성하여 애정을 담아 게시되었습니다. 뉴스레터도 꼭 받아보시는 것이 좋습니다. Fixed-Height Cards: More Fragile Than They Look css-tricks.com
What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink 최적화, 그리고 더 많은 것들 개발자들은 HTML-in-Canvas, 육각형 월드맵-분석 기능, e-ink 장치를 위한 웹 기반 OS, content 속성을 사용한 이미지 소스 교체 등 다양한 실험을 해왔습니다. 이것이 What’s !important #10입니다.What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More는 CSS-Tricks에 애정을 담아 직접 작성하고 게시한 글입니다. 뉴스레터도 꼭 받아보시는 것이 좋습니다. What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More css-tricks.com
CSS에서 네이티브 랜덤성의 중요성 CSS에서 난수 생성을 위한 새로운 기능들이 추가됩니다! 하지만 이곳에 도달하기까지의 길은 길고 구불구불했습니다.CSS에서의 네이티브 난수의 중요성는 CSS-Tricks에 정성껏 직접 작성하여 게시되었습니다. 여러분도 이 뉴스레터를 꼭 구독해야 합니다. The Importance of Native Randomness in CSS css-tricks.com
contrast() contrast() 필터 함수는 요소의 대비를 증가시키거나 감소시킵니다.contrast()는 원래 CSS-Tricks에 직접 작성하여 사랑으로 게시되었습니다. 뉴스레터도 꼭 받아보시는 것이 좋습니다. contrast() css-tricks.com
대비색() contrast-color() 함수는 값을 받아 해당 값에 가장 대비되는 색상인 검은색 또는 흰색을 반환합니다.contrast-color()는 원래 CSS-Tricks에 직접 작성하여 게시되었습니다. 뉴스레터도 꼭 구독하시기 바랍니다. contrast-color() css-tricks.com
이제 존재하지 않는 ::nth 글자 선택기를 사용해 봅시다 제 꼼수가 권력자들에게 네이티브 지원이 필요 없다는 또 다른 이유를 제공하거나, 만약 많은 사람들이 제 ::nth-letter 해킹을 실제로 사용한다면, 브라우저 신들이 이를 실제로 구현해야 할 필요성을 인식할 수도 있습니다.이제 존재하지 않는 ::nth-letter 선택자를 사용해 봅시다. CSS-Tricks에 직접 손으로 작성하여 사랑으로 게시되었습니다. 뉴스레터도 꼭 구독하세요. Let’s Use the Nonexistent ::nth-letter Selector Now css-tricks.com
