🎨CSS 기술 문서

CSS의 가장 기본이자 핵심인 박스 모델의 구성 요소와 브라우저 렌더링 과정을 영철이와 함께 파헤쳐 봅니다.

원하는 요소만 콕 집어내는 정교한 선택자와, 스타일 충돌을 해결하는 '명시도(Specificity)'의 계산법을 영철이와 함께 알아봅니다.

CSS의 이름에 담긴 '폭포(Cascade)'의 원리와 부모에서 자식으로 전달되는 '상속'의 메커니즘을 영철이와 함께 이해해 봅니다.

단순한 배경색을 넘어, 현대적인 웹 디자인을 완성하는 컬러 시스템, 그라디언트, 그리고 강력한 CSS 필터 기능을 영철이와 함께 배워봅니다.

단순히 글자 크기를 키우는 것을 넘어, 사용자에게 정보를 가장 쾌적하게 전달하는 텍스트 렌더링과 폰트 최적화 기법을 영철이와 함께 알아봅니다.

현대 웹 레이아웃의 필수 도구인 Flexbox의 핵심 원리와 정렬 방식, 그리고 flex-grow/shrink의 정밀한 계산법을 영철이와 함께 배워봅니다.

Flexbox가 해결하지 못하는 복잡한 매거진 스타일 레이아웃을 단 몇 줄로 설계하는 CSS Grid의 강력한 힘을 영철이와 함께 경험해 봅니다.

요소를 자유자재로 배치하는 position 속성의 정석과, z-index가 먹히지 않는 근본적인 이유인 '쌓임 맥락'을 영철이와 함께 파헤쳐 봅니다.

기기 크기에 맞추는 고전적인 미디어 쿼리를 넘어, 요소가 담긴 그릇의 크기에 반응하는 최신 컨테이너 쿼리까지 반응형의 모든 것을 영철이와 함께 마스터합니다.

웹에 생명력을 불어넣는 CSS 애니메이션의 핵심 기법과, 60fps의 부드러움을 유지하기 위한 성능 최적화 전략을 영철이와 함께 완성해 봅니다.

단순히 값을 저장하는 수준을 넘어, 런타임에 스타일을 제어하고 테마를 전환하는 전략적인 CSS Custom Properties 활용법을 영철이와 함께 알아봅니다.

커지는 프로젝트 규모를 감당할 수 있게 해주는 BEM 명명 규칙과, 현대적인 CSS-in-JS 및 Utility-first(Tailwind)의 장단점을 영철이와 함께 분석해 봅니다.

CSS 속성 한 줄이 브라우저의 CPU와 GPU에 어떤 부하를 주는지 이해하고, Reflow와 Repaint를 최소화하여 극한의 부드러움을 구현하는 법을 영철이와 함께 완성해 봅니다.

SASS 없이도 가능한 정규 Nesting부터 스타일 우선순위의 구원투수인 Cascade Layers까지, CSS의 판도를 바꾸고 있는 최신 도구들을 영철이와 함께 마스터합니다.

눈대중으로 확인하는 단계를 넘어, 브라우저 개발자 도구를 200% 활용하고 시각적 회귀 테스트(Visual Regression Test)로 디자인을 보호하는 법을 영철이와 함께 여정의 마침표로 찍어봅니다.