본문 바로가기

HTML, CSS/CSS11

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.
모던 CSS 가이드 모던 CSS 가이드: 선택자부터 확장 가능한 아키텍처까지이 문서는 CSS의 핵심 원리부터 최신 고급 기능까지, 웹 개발자가 알아야 할 모든 것을 담은 포괄적인 가이드입니다. 단순히 속성을 나열하는 것을 넘어, 각 기능의 철학적 배경과 실제 프로젝트에서 어떻게 전략적으로 활용할 수 있는지에 대한 깊이 있는 통찰을 제공하는 것을 목표로 합니다. 이 가이드를 통해 여러분은 CSS를 단순히 스타일을 입히는 도구가 아닌, 견고하고 유지보수 가능하며 확장성 있는 사용자 인터페이스를 구축하는 강력한 시스템으로 이해하게 될 것입니다.Part I: 캐스케이드의 근본적인 규칙CSS를 효과적으로 사용하기 위해서는 먼저 그 작동 원리, 즉 CSS의 '물리 법칙'을 이해해야 합니다. 이 파트에서는 스타일이 어떻게 결정되고 적용.. 2025. 9. 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.
CSS 단위별 기준과 특징 (%, px, vh, em, rem) 1. 단위별 기준 및 특징% (퍼센트)기준: 부모 요소의 크기를 기준으로 함.용도: 부모 크기에 상대적인 크기 지정에 유용합니다.px (픽셀)특징: 고정된 단위로, 기기 해상도에 관계없이 동일한 크기를 나타냅니다.용도: 정밀한 크기 조절이나 경계(border) 등 고정된 크기가 필요한 경우에 사용.vh (뷰포트 높이)기준: 브라우저 화면(뷰포트)의 높이를 기준으로 함.예시: 100vh는 뷰포트 전체 높이.em기준: 해당 요소의 현재 폰트 크기를 기준으로 함.용도: 글자 크기에 따른 상대적 간격(padding, margin, 자간 등) 조절에 유용합니다.주의: 요소 내부의 줄 간격(line-height)에서는 단위 없이 배수로 지정하는 경우가 많습니다.rem기준: 최상위(root) 요소, 보통 의 폰트 크.. 2024. 12. 13.
CSS 요소 숨기기 (display, opacity, visibility, overflow, hidden, clip 등) display: none;→ 레이아웃에서 완전히 제거 (전환 효과 X)opacity: 0;→ 요소는 자리를 차지하지만 보이지 않으며, 페이드 인/아웃에 적합 (전환 효과 O)visibility: hidden;→ 요소가 보이지 않고, 마우스 이벤트도 막지만, 공간은 유지 (전환 효과 가능)max-height / height + overflow: hidden;→ 슬라이드 효과 등 높이 변화를 애니메이션 할 때 사용HTML hidden input → 화면에 표시되지 않고 값만 전달 (폼 데이터에 사용)추가 기법 (clip-path, transform: scale, off-screen positioning)→ 다양한 상황에 맞게 요소를 숨기거나 애니메이션 효과를 줄 수 있음1. display 속성display:.. 2024. 12. 13.
CSS Position과 정렬 공식 1. 자식 요소 수직 중앙 정렬 공식부모 요소 안에서 자식 요소를 수직 중앙에 배치하려면,부모 요소에 **position: relative;**를 지정하고,자식 요소에 **position: absolute;**로 위치를 설정한 후,자식 요소의 **top: 50%;**와 함께 자식 요소 높이의 절반만큼 margin-top(또는 transform)을 음수로 주면 중앙 정렬됩니다.예시:.container { margin: 25px; width: 350px; height: 200px; outline: dashed 1px black; position: relative; /* 자식 요소의 기준이 됨 */}.child { width: 50px; height: 50px; background-color: .. 2024. 12. 13.
CSS Display 1. 기본 Display 값Block 요소예시: div, header, section, footer, ul, li, ol, dl, dt, dd, p, address, aside, nav특징:기본적으로 가로 전체(100%)를 차지합니다.세로 크기는 내용에 따라 자동으로 늘어납니다.위아래로 쌓이며, 상하좌우의 마진과 패딩을 모두 지정할 수 있습니다.요소 내부에 다른 block 요소나 inline 요소를 포함할 수 있습니다.Inline 요소예시: a, span, em, strong, label, b, i, u특징:텍스트처럼 흐르는 성질을 가지며, 가로 및 세로 크기가 내용만큼 결정됩니다.여러 요소가 한 줄에 나란히 배치되고, 줄바꿈은 공간이 부족할 때 자동으로 발생합니다.좌우의 마진과 패딩은 적용되지만, 상하.. 2024. 12. 13.

티스토리툴바