References 관련

• Tools
• StackExchange
  • UX
• Guideline
• Learning
• velog
• BLEX
• Substack
• DZone
• Google
  • Chrome for Developer
  • Google for Developer
• TOAST UI :: Make Your Web Delicious!
• NAVER D2
• NHN Cloud Meetup - NHN 기술 블로그
• Codemotion
• WebKit
• Web.dev
• Smashing Magazine — For Web Designers And Developers
• OpenReplay
• WIT블로그
• Medium
• dev.to
• velog
• BLEX
• üntil
• CSS-Tricks - Tips, Tricks, and Techniques on using Cascading Style Sheets.
• LogRocket Blog - Resources to Help Product Teams Ship Amazing Digital Experiences
• Builder.io
• Nerd Level Tech
• amplication
• Mike Aparicio
• VADIM MAKEEV
• Eric Bailey
• kurtextrem
• shadeed9
• CSS in Real Life
• Andy Bell
• Modern CSS Solutions
• Chris Coyier
• Tobias Ahlin
• Ahmad Shadeed
• Bram.us
• The Daily WTF
• Vincent De Oliveira
• Bejamas Discovery
• voussoir
• James Fisherh
• Olivia King
• Junhyunny's Devlogs
• tistory
• Blog @ tonsky.me
• Hackernoon
• Dan Wilson
• adactio
• Dan Cătălin Burzo
• You have arrived at a website named heydonworks.com: HeydonWorks
• Articles & Experiments by Roman Komarov
• Go Make Things
• CSS Tip: Learn CSS the easy one
• David Walsh Blog - JavaScript Consultant
• Blog @ tonsky.me
• remy sharp's b:log
• Piccalilli - level up your front-end development skills
• Next-Generation Mobile Apps and Cross Browser Testing Cloud | LambdaTest
• Cruncher
• Terence Eden’s Blog
• The Cascade
• Fully Stacked
• Envato Tuts+
• Ryan Mulligan
• Dharmen Shah's Blog
• Bram.us – A rather geeky/technical weblog, est. 2001, by Bramus
• Noah Liebman
• Lullabot
• Geoff Graham
• phloe
• Robin Rendle — Designer and writer.
• Text Effects
• utilitybend
• Jason Zimdars
• Scott Jehl, Web Designer/Developer
• Chris Burnell
• Blog | Brad Frost
• Developer, writer and speaker | Stefan Judis Web Development
• Max Böck
• Josh W Comeau
• Vallista
• NTS UIT개발실 기술블로그
• Let's Build UI
• Lea Verou
• Cruncher – web development agency in Lausanne
• 사진찍는 웹 개발자의 블로그
• David Gerrells
• Ykss
• GlyphDrawing.Club
• Build Your Own X From Scratch Books
• Jim Nielsen’s Blog

---

Tools

• flexiple
• CTA Button Generator
• Glassmorphism
• Fancy Border Radius
• WAIT! Animate
• kodeshot
• Make some waves!
• cssTypeset
• EnjoyCSS
• CSSMatic
• Patternify
• CssButtonGenerator
• Autoprefixer CSS online
• CSS Gradient
• Get Waves
• CSS Generator Tool
• CSS Generator
• BlobMaker
• cubic-bezier
• Bennette Feely Clippy
• Colorzilla: Gradient Generator
• TinyPNG
• favicon.ico Generator

---

StackExchange

UX

• Should a toggle button show its current state or the state to which it will change?

---

Guideline

Skills Breakdown - Fullstack Developer

• Checklist Design

---

Learning

• 100dayscss
• CSSBattle
• Front-end challenges
• Mastering CSS Blend Modes
• CSS Selectors: A Visual Guide
• THE IDEAL VIEWPORT DOESN'T EXIST

---

velog

• @superlipbalm / (번역) Shadow DOM을 스타일링 하는 8가지 방법
• @ksh4704 / HTML 정리(1)

---

BLEX

• @baealex - 실용적인 프론트엔드 테스트
• @laetipark - 명품 웹 프로그래밍 정리 노트 : 2. HTML5
• @laetipark - 명품 웹 프로그래밍 정리 노트 : 3. HTML5 문서 구조화와 웹 폼
• @laetipark - 명품 웹 프로그래밍 정리 노트 : 4. CSS3로 웹 페이지 꾸미기
• @simp7 - TL;DR CSS - 1

---

Substack

• cssisntmagic / Let's reduce the combination of the width and max-width properties to one
• cssisntmagic / Reduce top: 0; right: 0; bottom: 0; left: 0 to one line!
• cssisntmagic / position: absolute frees us from using display: block
• cssisntmagic / CSS without order dependencies
• cssisntmagic / We don't need to use 0 anymore to define margins and paddings
• cssisntmagic / What is the :nth-child(n of S) selector?

---

DZone

• Best 15 CSS Trends To Watch For

---

Google

Chrome for Developer

• Four new CSS features for smooth entry and exit animations
• CSS Wrapped: 2023!
• Introducing the CSS anchor positioning API

Google for Developer

• Chrome 69 베타: AV1 동영상 디코더, CSS 트릭

---

TOAST UI :: Make Your Web Delicious!

• CSS 변수 합성의 강력함

---

NAVER D2

• 웹 폰트 사용과 최적화의 최근 동향

---

NHN Cloud Meetup - NHN 기술 블로그

• flexbox로 만들 수 있는 10가지 레이아웃

---

Codemotion

• Creating a Fallout-Style UI Using Modern CSS

---

WebKit

• WebKit Features in Safari 17.0
• Implementing Vertical Form Controls
• Help us invent CSS Grid Level 3, aka “Masonry” layout
• News from WWDC24: WebKit in Safari 18 beta
• How to use container queries now

---

Web.dev

• Light-dark()를 사용한 CSS 색상 스키마에 종속된 색상
• Popover API가 Baseline에 도입
• @property: Next-gen CSS variables now with universal browser support

---

Smashing Magazine — For Web Designers And Developers

• InfiInfinite-Scrolling Logos In Flat HTML And Pure CSS
• Writing CSS In 2023: Is It Any Different Than A Few Years Ago?
• Sliding 3D Image Frames In CSS
• The Modern Guide For Making CSS Shapes
• The Times You Need A Custom @property Instead Of A CSS Variable

---

OpenReplay

• Responsive Mobile Layouts Made Easy With Pure.CSS

---

WIT블로그

• CSS 애니메이션의 성능 아는 만큼 좋아져요!
• (번역) 랜더링 성능을 향상 시키는 새로운 CSS 속성 content-visibility
• Variable fonts (가변 폰트)

---

Medium

• 30 Practical Tips for Effective User Interface Design
• uxdesign / Why UI designers should understand Flexbox and CSS Grid
• w3cplus / Illustrated CSS: CSS Custom Properties
• front-end-weekly / CSS Container Queries: Revolutionising Responsive Web Design

---

dev.to

• Oruga - UI components library without CSS framework dependency
• The Best Way To Dark Mode Your Website In My Opinion.
• 8 SCSS Best Practices to Keep in Mind
• jaredcodes / Finally Understand Responsive Design!
• madhusaini22 / How to remove background of an image with CSS
• black7375 / Rethinking CSS in JS

---

velog

• @tjdud0123 / css 변수 이용 다크 모드 토글
• @danjr / HTML 기본 태그 - (4)
• @danjr / CSS 속성 선택자
• @danjr / CSS - position
• @9rganizedchaos / Flexbox Align-items center와 overflow scroll이 결합될 때!
• @leemember / SassError: Undefined mixin. 에러 해결
• @superlipbalm / (번역) Campfire의 모던 CSS 패턴

---

BLEX

---

üntil

• @morethanmin / 터치 디바이스에서 hover 스타일 제어하기
• @swmg03 / [STUDYLOG] CSS 정리 - (3)
• @morethanmin / mobile safari에서 video poster 렌더링 이슈
• @baealex / 쉐도우 돔을 스타일링 하는 방법

---

CSS-Tricks - Tips, Tricks, and Techniques on using Cascading Style Sheets.

• Managing User Focus with :focus-visible
• The Power of :has() in CSS

---

LogRocket Blog - Resources to Help Product Teams Ship Amazing Digital Experiences

Understanding the CSS revert-layer keyword

---

A typewriter CSS animation is easier to achieve than you may think. Let's explore how and why to create a typewriter animation with only CSS.

Understanding the CSS revert-layer keyword

---

In this article, we’ll explore CSS cascade layers — and, specifically, the revert-layer keyword — to help you refine your styling strategy.

---

Builder.io

• CSS Tips for Better Web Development

---

Nerd Level Tech

A Complete and Beginner-Friendly Guide to CSS Mastery-Part 3

---

amplication

• Why We Chose Node.js Over Deno?

---

Mike Aparicio

• Why we're bad at CSS

---

VADIM MAKEEV

• Conditionally adaptive CSS. Browser behavior that might improve your performance

---

Eric Bailey

• Don't use custom CSS scrollbars

---

kurtextrem

• The modern way of serving images

---

shadeed9

• New Viewport Units

---

CSS in Real Life

• Cool Tools
• Reducing Complexity in Front End Development

---

Andy Bell

• A (more) Modern CSS Reset

---

Modern CSS Solutions

• 12 Modern CSS One-Line Upgrades

---

Chris Coyier

• Being Picky about a CSS Reset for Fun & Pleasure

---

Tobias Ahlin

• Responsive type scales with composable CSS utilities

---

Ahmad Shadeed

• Case Study: Rebuilding TechCrunch layout with modern CSS
• An Interactive Guide to CSS Container Queries
• CSS Variables 101
• CSS :has() Interactive Guide

---

Bram.us

• The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark()
• Misconceptions about CSS Specificity

---

The Daily WTF

• STYLING WITH CLASSY CSS

---

Vincent De Oliveira

• Deep dive CSS: font metrics, line-height and vertical-align

---

Bejamas Discovery

• Three modern CSS properties your website must have
• Learn CSS :has() selector by examples: 5 top use cases

---

voussoir

• CSS for printing to paper

---

James Fisherh

• A formula for responsive font-size

---

Olivia King

• Inclusive Sans

---

Junhyunny's Devlogs

• How to set weights and styles with @font-face

---

tistory

• rutgo-letsgo / Enthusiastically, Steady, Slowly
  • 21 HTML Tips You Must Know About(무조건 알아야 하는 21개의 HTML 팁)
• puleugo / 푸르고 개발 블로그
  • 티스토리에 마진 넣는법
• ravenkim97 / Life Log
  • [Find_Similar_Colors] for CSS Desingner (셀레니움 + 크롤링)
• kesakiyo / 오늘도 개발로그
  • HTML에서 DOCTYPE을 꼭 사용해야 하는 이유
  • 한 번쯤 들어봤을 Reset CSS와 Normalize CSS, 무슨 차이가 있을까?
  • HSL 색상 모델이란? - RGB보다 직관적인 색상 모델
  • HTML에서 form을 원격으로 제출하는 방법
• aspdotnet / 재우니의 블로그
  • image, xml, javascript, css, font 파일을 base64 로 치환하여 html 적용해 보기
  • html : 애니메이션 효과, 특정 텍스트 자주색으로 형광펜 칠하듯이 보여주기
  • html_css : 마우스 우클릭 방지와 텍스트 드래그 방지를 구현 (Prevent right-clicking and dragging text)
  • html : froala Editor 사용하여 콘텐츠 작성 및 미리보기 설정하기

---

Blog @ tonsky.me

• Hardest Problem in Computer Science: Centering Things

---

Hackernoon

• How to Build a Masonry Layout Using CSS

---

Dan Wilson

• The New CSS Math: pow(), sqrt(), and exponential friends

---

adactio

• Hanging punctuation in CSS

---

Dan Cătălin Burzo

• How to think about HTML responsive images

---

You have arrived at a website named heydonworks.com: HeydonWorks

• Testing HTML With Modern CSS

---

Articles & Experiments by Roman Komarov

• Alternating Style Queries
• Layered Toggles: Optional CSS Mixins
• Self-Modifying Variables: the inherit() Workaround

---

Go Make Things

• An advanced way to use CSS variables
• CSS variables
• An intro to Flexbox
• Practical uses for Flexbox
• How to build a reusable grid system with CSS grid
• An intro to CSS Grid

---

CSS Tip: Learn CSS the easy one

• Fluid Typography With Discrete Steps
• Rounded Tabs With Inner Curves
• A Fancy Frame With Zig-Zag Borders
• A Modern Way To Create A Star Shape
• CSS-Only Pixelated Cut Corners
• Avatar With Status Indicator
• Write Better CSS With Modern CSS
• How To Extract R,G,B Channels From A Color
• Single-Digit Inputs With One Element (OTP)

---

David Walsh Blog - JavaScript Consultant

• HTML popover Attribute

---

Blog @ tonsky.me

• Hardest Problem in Computer Science: Centering Things

---

remy sharp's b:log

• CSS text fragment selector (please)

---

Piccalilli - level up your front-end development skills

• A primer on the cascade and specificity

---

Next-Generation Mobile Apps and Cross Browser Testing Cloud | LambdaTest

• How to Add a Smooth Scroll in CSS
• How to Set CSS Media Query For Portrait Orientation
• The Ultimate Guide to CSS Keyframes Animation
• CSS Margins: All You Need to Know
• CSS Grid vs Flexbox: Which to Choose and When
• How to Use CSS Grid repeat() Function

---

Cruncher

• Printing music with CSS Grid

---

Terence Eden’s Blog

• Use CSS to boost the font size of emoji with no extra markup

---

The Cascade

• Popover API
• Cool queries

---

Fully Stacked

• The slow death of CSS vendor prefixes

---

Envato Tuts+

• Build a Neat HTML5-Powered Contact Form
• 2 Ways to Make Half-Colored Background Page Sections

---

Ryan Mulligan

• Detect JavaScript Support in CSS
• CSS @property and the New Style

---

Dharmen Shah's Blog

• Animation can make bell🔔 much more than emoji!

---

Bram.us – A rather geeky/technical weblog, est. 2001, by Bramus

• If View Transitions and Scroll-Driven Animations had a baby

---

Noah Liebman

• Recursion! In the stylesheet

---

Lullabot

• Do You Still Need Sass?

---

Geoff Graham

• The New !important

---

phloe

• The Chaotic Neutral Nature of Font-size

---

Robin Rendle — Designer and writer.

• How to Kill the Cascade

---

Text Effects

• ICE TEXT EFFECT WITH CSS
• FLICKERING GLOWING TEXT EFFECT WITH CSS

---

utilitybend

• Animating clip paths on scroll with @property in CSS

---

Jason Zimdars

• Modern CSS patterns and techniques in Campfire

---

Scott Jehl, Web Designer/Developer

• How would you build Wordle with just HTML & CSS?

---

Chris Burnell

• The Cluster Composition

---

Blog | Brad Frost

• transparent borders

---

Developer, writer and speaker | Stefan Judis Web Development

• Target=_blank implies rel=noopener

---

Max Böck

• Old Dogs, new CSS Tricks

---

Josh W Comeau

• An Interactive Guide to Flexbox
• An Interactive Guide to CSS Grid
• How To Center a Div
• The Undeniable Utility Of CSS :has

---

Vallista

• 웹 개발자의 지옥, 이메일 폼 개발하기

---

NTS UIT개발실 기술블로그

• 웹폰트 사용하기 (웹폰트 101)

---

Let's Build UI

• Nesting in CSS

---

Lea Verou

• Inline conditionals in CSS?

---

Cruncher – web development agency in Lausanne

• Printing music with CSS Grid

---

사진찍는 웹 개발자의 블로그

• 컨텐츠에 따라 높이가 자동으로 조절되는 textarea 구현하기

---

David Gerrells

• So you think you know box shadows?

---

Ykss

• (번역) CSS에서의 인라인 조건문?

---

GlyphDrawing.Club

• Font with Built-In Syntax Highlighting

---

Build Your Own X From Scratch Books

• CSS finally adds vertical centering in 2024

---

Jim Nielsen’s Blog

• Sanding UI

---

이찬희 (MarkiiimarK)

Never Stop Learning.