본문 바로가기

HTML, CSS/CSS9

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.
Text 관련 CSS 1. 텍스트 정렬 및 장식 (Text Alignment & Decoration)text-align역할: 블록 레벨 요소 내부의 글자와 인라인 요소들을 좌우 가운데, 왼쪽, 오른쪽 등으로 정렬합니다.예시: .container { text-align: center; /* 자식 텍스트와 인라인 요소를 가운데 정렬 */}text-decoration역할: 텍스트에 밑줄, 취소선, 오버라인 등을 추가하거나 제거합니다.주요 값:underline: 밑줄을 표시none: 텍스트 장식을 제거예시:a { text-decoration: underline; /* 링크에 밑줄 적용 */}2. 글자 간격 및 들여쓰기 (Letter Spacing & Text Indent)letter-spacing역할: 텍스트 글자 사이의 간격을.. 2024. 12. 13.
CSS 선택자 별 점수 계산 방법 적용 순서:특이성(specificity): 아이디 선택자가 가장 높은 우선순위를 가지며, 그 다음으로 클래스, 속성, 가상요소, 마지막에 태그 선택자 순입니다.소스 순서: 동일한 특이성을 가진 규칙은 CSS 파일 내에서 나중에 작성된 규칙이 우선 적용됩니다.예를 들어, 위 코드에서 .logo와 #header .logo가 모두 적용될 수 있다면, 더 구체적인 #header .logo가 우선되어 노란색 테두리가 적용됩니다.1. 기본 CSS 초기화 (Universal Selector)목적: 모든 요소의 기본 마진과 패딩을 제거하여 일관된 스타일링의 출발점을 제공합니다.예시:/* 전체 선택자: CSS 초기화에 사용 (모든 요소의 margin, padding 제거) */* { margin: 0; padding.. 2024. 12. 12.

티스토리툴바