본문 바로가기

HTML, CSS21

Tailwind CSS 가이드 Tailwind CSS 종합 가이드TailwindCSS Vite 설정 방법 (v 4.1)1. installnpm install tailwindcss @tailwindcss/vite2. vite.config.js settingimport { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import tailwindcss from '@tailwindcss/vite';// https://vite.dev/config/export default defineConfig({ plugins: [react(), tailwindcss()],});3. index.css import tailwindCSS@import 'tailwindcss';4. t.. 2025. 9. 5.
Figma를 활용한 인터랙티브 SVG 제작 가이드 Figma를 활용한 인터랙티브 SVG 제작 가이드파트 I: Figma의 기본 원칙: 인터랙션을 위한 디자인성공적인 인터랙티브 SVG 제작의 여정은 코드를 작성하기 훨씬 전, Figma 캔버스에서 시작됩니다. 이 첫 번째 파트에서는 인터랙션을 염두에 둔 디자인의 근본적인 원칙을 다룹니다. Figma를 단순한 시각적 디자인 도구가 아닌, 최종 웹 결과물의 구조적 청사진을 만드는 강력한 저작 도구로 바라보는 인식의 전환이 필요합니다. 모든 레이어, 그룹, 벡터 경로는 잠재적인 인터랙티브 요소가 되며, 이러한 관점은 디자인 프로세스 전반을 이끌어야 합니다.1.1. 사고의 전환: 정적 목업에서 인터랙티브 설계도로인터랙티브 SVG를 제작하는 과정은 단순히 보기 좋은 이미지를 그리는 것을 넘어섭니다. 이는 최종 제품.. 2025. 9. 5.
SVG 가이드 SVG 가이드I. SVG의 본질: 벡터 그래픽의 이해Scalable Vector Graphics (SVG)는 현대 웹 그래픽의 초석을 이루는 기술입니다. SVG의 진정한 힘을 이해하기 위해서는 단순히 '이미지 포맷'이라는 개념을 넘어, 그것이 작동하는 근본적인 원리와 래스터(Raster) 이미지와의 본질적인 차이를 파악하는 것이 중요합니다. 이 장에서는 SVG의 핵심 정체성을 분석하고, 웹 개발 및 디자인 워크플로우에 혁신을 가져온 이유를 탐구합니다.1.1. SVG란 무엇인가?: XML 기반 벡터 이미지 포맷SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 약자로, 이름에서 알 수 있듯이 크기 조절이 자유로운 벡터 기반의 이미지 포맷입니다. SVG의 가장 핵심적인 특징은 .. 2025. 9. 5.
모던 CSS 가이드 모던 CSS 가이드: 선택자부터 확장 가능한 아키텍처까지이 문서는 CSS의 핵심 원리부터 최신 고급 기능까지, 웹 개발자가 알아야 할 모든 것을 담은 포괄적인 가이드입니다. 단순히 속성을 나열하는 것을 넘어, 각 기능의 철학적 배경과 실제 프로젝트에서 어떻게 전략적으로 활용할 수 있는지에 대한 깊이 있는 통찰을 제공하는 것을 목표로 합니다. 이 가이드를 통해 여러분은 CSS를 단순히 스타일을 입히는 도구가 아닌, 견고하고 유지보수 가능하며 확장성 있는 사용자 인터페이스를 구축하는 강력한 시스템으로 이해하게 될 것입니다.Part I: 캐스케이드의 근본적인 규칙CSS를 효과적으로 사용하기 위해서는 먼저 그 작동 원리, 즉 CSS의 '물리 법칙'을 이해해야 합니다. 이 파트에서는 스타일이 어떻게 결정되고 적용.. 2025. 9. 5.
SVG 이해하기 SVG 로드맵1단계. 기본 이해SVG 정의, 래스터와 벡터 차이 태그 기본 속성 (width, height, viewBox)좌표계와 단위기본 도형(, 등)2단계. Path 문법 (핵심)M, L, H/V, C, Q, A, Z절대/상대 좌표다양한 도형/하트/곡선 예제3단계. 스타일링fill, stroke, stroke-widthstroke-linecap, stroke-linejoin, stroke-dasharrayCSS 적용 방식, opacity와 레이어 개념4단계. 좌표 변환과 레이아웃transform="translate/rotate/scale" 그룹 태그viewBox, preserveAspectRatio (반응형 핵심)5단계. 텍스트와 심화 요소, , + (재사용 구조)Gradient, Patter.. 2025. 8. 16.
HTML 특수문자(entity) 코드 HTML에서 특수 문자를 표시하기 위해 사용되는 코드입니다.기호엔티티 코드설명<less than (작다)>>greater than (크다)&&ampersand (앤퍼샌드)""double quote (큰따옴표)''single quote (작은따옴표)©©저작권 기호®®등록 상표 기호€€유로 화폐 기호¥¥엔 화폐 기호￦&won;원 화폐 기호✓✓체크 마크××곱하기 기호÷÷나누기 기호→→오른쪽 화살표←←왼쪽 화살표↑↑위쪽 화살표↓↓아래쪽 화살표  줄 바꿈 없는 공백HTML 엔티티 코드는 문자 그대로 표현하고 싶을 때 사용웹 페이지에서 보안적으로 필요한 경우에도 활용 (.. 2025. 3. 5.
TailwindCSS TailwindCSS(https://tailwindcss.com/)란? Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.tailwindcss.comCSS를 직접 작성하지 않고 미리 정의된 클래스를 조합하여 스타일을 적용시킨다.장점: 빠른 개발, 유지보수 용이, 중복 스타일 최소화단점: 초반 적응이 필요하고, HTML이 클래스명으로 복잡해질 수 있음.tailwind.config.ts 설정// tailwind.config.. 2025. 2. 12.
CSS Transition 1. 전환(Transition) 기본 개념CSS 전환은 요소의 상태 변화 시, 미리 지정한 속성이 부드럽게 변화하도록 애니메이션 효과를 제공합니다. 전환은 단일 속성이든 여러 속성이든 적용할 수 있으며, 각각의 속성마다 지속 시간, 타이밍 함수, 지연 시간 등을 개별적으로 설정할 수 있습니다.전환 관련 주요 속성은 다음과 같습니다:transition-property역할: 전환 효과를 적용할 CSS 프로퍼티를 지정합니다.기본값: all (모든 속성에 효과 적용)복수 지정: 여러 속성을 적용할 경우 쉼표(,)로 구분합니다.예) transition-property: width, height;transition-duration역할: 전환 효과가 완료되는 데 걸리는 시간을 지정합니다.기본값: 0s표기법: 초(s).. 2024. 12. 13.
CSS 애니메이션 효과 만들기 및 참고 사이트 Transition과 Transform요소에 전환 효과를 주어 부드러운 변화(예: 위치 이동, 회전, 크기변경 등)를 구현할 수 있음.상태에 따라 동일 속성에 대해 다른 시간 값 및 타이밍 함수를 부여하여 애니메이션 효과를 조절 가능.타이밍 함수 종류ease, ease-in, ease-out, linear, cubic-bezier(...) 등으로 애니메이션 속도를 조절함.Keyframes@keyframes를 이용해 복잡한 애니메이션 경로를 정의하고, animation 속성으로 적용함.animation-fill-mode로 애니메이션 종료 후 상태 유지, animation-play-state로 애니메이션 일시정지를 제어할 수 있음.1. 애니메이션 기본 – Transition과 TransformA. 기본 전환.. 2024. 12. 13.

티스토리툴바