Tag: CSS
-
Tailwind CSS 실무 유틸리티 클래스 치트시트 및 반응형 레이아웃
💡 핵심 요약 (Executive Summary) 본 가이드는 css tailwind.css 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다. 📑 Table of Contents • Basic • Custom Basic src/assets/tailwind.css css Copy @tailwind base; @tailwind components; @tailwind utilities; src/main.ts ts…
-
CSS 선택자(Selector) 완벽 가이드: 복합 선택자와 명시도
💡 핵심 요약 (Executive Summary) 본 가이드는 css 선택자(selector) 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다. 📑 Table of Contents 1. CSS selector에 대해 2. 기본 CSS selector 3. 복합 CSS selector 4. 가상 클래스 셀렉터…
-
웹 & UI 디자이너를 위한 2026 모던 컬러 시스템과 팔레트 설계 가이드
디지털 프로덕트 디자인에서 컬러(Color)는 단순한 시각적 장식을 넘어 사용자 경험(UX), 브랜드 아이덴티티, 그리고 웹 접근성(Accessibility)을 결정짓는 가장 핵심적인 요소입니다. 1. 60-30-10 법칙을 활용한 시각적 계층 구조 설계 성공적인 인터페이스 디자인은 사용자의 시선 흐름을 자연스럽게 유도합니다. 배경 영역의 60%에는 중립적인 뉴트럴 톤을, 본문 및 주요 컨테이너의 30%에는 보조 색상을, 그리고 사용자의 행동(Call-to-Action)을 유도하는 버튼과 핵심 배지에는…