1 – clip-path로 표시 영역 자르기 참조 – clip-path 시각 생성기(CSS Portal) 1.1 – 작업 환경 준비 바탕화면에 web_clip 폴더를 만듭니다. web_clip 폴더 안에 index.html 파일을 만듭니다. index.html에 아래 코드를 그대로 붙여 넣고 저장합니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Clip and Mask Practice</title> <link rel="stylesheet" href="style.css"> </head> <body> <div … 더 읽기
이 문서는 순수 HTML과 Tailwind CSS v4로 만든 사이트를, 브라우저에서 실시간으로 CSS를 만들어 주던 방식에서 미리 컴파일된 하나의 정적 CSS 파일로 굳혀 다시 배포하는 절차를 다룹니다. AGY(구글 안티그라비티)로 사이트를 만들어 GitHub Pages에 이미 올린 상태를 전제로 씁니다. 다 따라 하면 브라우저가 페이지를 열 때마다 CSS를 계산하는 부담이 사라지고, 배포 파일 하나만 보고도 어떤 스타일이 들어갔는지 … 더 읽기
이미지 다운로드 개요 본 학습 문서는 웹 페이지에 생동감을 불어넣는 CSS의 핵심 동적 효과인 트랜지션(Transition), 트랜스폼(Transform), 그리고 애니메이션(Animation) 기술을 심도 있게 다룹니다. 요소의 상태 변화를 부드럽게 이어주는 트랜지션의 기본 원리부터, 2D 및 3D 공간에서의 공간 변형을 제어하는 트랜스폼, 그리고 @keyframes를 활용한 정교한 시무브먼트 구현법을 체계적으로 학습합니다. 실무에서 즉시 활용 가능한 카드 뒤집기, 호버 확대, 경로 … 더 읽기
Apple이 WWDC25에서 공개한 Liquid Glass 디자인 언어의 핵심 효과를 CSS와 SVG 필터 조합구현 Specular Highlights, Blur, Color Filter, Refraction, Edge/Ripple Distortion, Chromatic Aberration 등 실제 유리 재질을 모방하는 다양한 레이어를 단계별로 CSS/SVG로 구현 주요 효과 구현에는 backdrop-filter, box-shadow, SVG DisplacementMap, Turbulence, ColorMatrix, Offset, Blend 사용 Safari/Firefox에서는 SVG 필터가 동작하지 않아 Blur·Shadow만 적용 복잡한 효과일수록 GPU 사용량이 크고, UI 전반에 남용 … 더 읽기
예시 CSS 코드 아래 예제는 vw 단위를 사용하여 다양한 요소의 폰트 크기를 설정한 것입니다. 이 예제에서는 calc()와 clamp()를 함께 사용하여 다양한 화면 크기에서의 최적의 폰트 크기를 제공합니다. css코드 복사 html { font-size: 62.5%; /* 1rem = 10px */ font-family: 'Pretendard', sans-serif; } body { font-size: calc(1rem + 0.5vw); /* 기본 텍스트 크기 */ } h1 … 더 읽기
문자관련스타일 01. font 단위 👁🗨 상대단위들 단위 기준 em 부모 요소 기준 단위환산사이트 rem :root(html) 기준 (루트→최상위) vh 브라우저 화면 높이기준 (viewportHeight→vh) (폰트크기 x 브라우저높이) / 100 vw 브라우저 화면 너비기준(viewportWidth→vw) (폰트크기 x 브라우저너비) / 100 % 부모요소 기준 <div class="parent"> 부모 요소 (font-size 20px, 400×300) <p class="em">em: 부모 폰트(20px) × 2 = 40px</p> <p … 더 읽기
