본문 바로가기

language/css31

🎞️ transform: scale, rotate, translate 완전 정리 🎞️ transform: scale, rotate, translate 완전 정리transform은 요소를 이동, 회전, 확대/축소, 기울이기 등의 방식으로 시각적으로 변화시키는 CSS 속성입니다. 다양한 애니메이션과 인터랙션 구현에 자주 사용되며, 레이아웃에 영향을 주지 않고 시각적으로만 변화시키는 것이 특징입니다.1️⃣ transform 속성의 대표 함수 함수설명예시 translate(x, y)이동translate(20px, 10px) scale(x, y)확대/축소scale(1.2) rotate(angle)회전rotate(45deg) skew(x, y)기울이기skew(10deg, 0) matrix()복합 변형 (고급)matrix(a,b,c,d,e,f) 2️.. 2025. 5. 15.
🎞️ keyframes를 활용한 애니메이션 작성법과 실전 예제 🎞️ keyframes를 활용한 애니메이션 작성법과 실전 예제@keyframes는 CSS에서 중간 단계를 포함한 복잡한 애니메이션을 만들 때 사용하는 규칙입니다. 이 글에서는 keyframes의 기본 문법부터 실전 예제까지, 다양한 애니메이션 효과를 만들어보겠습니다.1️⃣ keyframes 기본 문법@keyframes 애니메이션이름 { 0% { 속성1: 값; } 50% { 속성2: 값; } 100% { 속성3: 값; }}.box { animation: 애니메이션이름 1s ease-in-out forwards;} 0% ~ 100%: 애니메이션 진행 비율 from / to도 사용 가능 (0% / 100%와 동일)2️⃣ 페이드 인/아웃 애니메이션@keyframes fadeIn { from .. 2025. 5. 15.
🎞️ CSS 트랜지션(transition) vs 애니메이션(animation)의 차이 🎞️ CSS 트랜지션(transition) vs 애니메이션(animation)의 차이웹에서 부드러운 인터랙션과 움직이는 효과를 구현할 때 자주 사용되는 두 가지 속성이 transition과 animation입니다. 이 두 방식은 비슷해 보이지만 적용 방식과 사용 목적이 다릅니다.1️⃣ transition – 상태 변화에 반응마우스 오버, 클릭 등 트리거가 발생했을 때 작동시작과 끝 상태만 설정주로 hover, focus, active와 함께 사용.button { background-color: #007bff; transition: background-color 0.3s ease;}.button:hover { background-color: #0056b3;}👉 hover 상태가 되었을 때만 효과가.. 2025. 5. 15.
🎨 스크롤바 디자인 커스터마이징 (웹킷 vs 크로스 브라우징 이슈) 🎨 스크롤바 디자인 커스터마이징 (웹킷 vs 크로스 브라우징 이슈)웹사이트의 스크롤바도 스타일링할 수 있다는 사실, 알고 계셨나요? 디자인 일관성을 위해 스크롤바를 커스터마이징하고 싶지만, 브라우저마다 지원 방식이 다릅니다. 이 글에서는 웹킷 기반 브라우저를 중심으로 스크롤바 커스터마이징 방법과 그 한계를 정리합니다.1️⃣ 기본 스크롤바는 브라우저마다 다르다 Chrome, Edge, Safari → 웹킷 기반 → 커스터마이징 가능 Firefox → scrollbar-color, scrollbar-width만 지원 IE/구버전 Edge → 제한적 지원 또는 불가2️⃣ WebKit 기반 커스터마이징 방법/* 전체 스크롤바 너비 */::-webkit-scrollbar { width: 10px; he.. 2025. 5. 15.
🎨 커스텀 체크박스/라디오 버튼 만들기 – 실전 CSS 예제 🎨 커스텀 체크박스/라디오 버튼 만들기 – 실전 CSS 예제브라우저 기본 체크박스와 라디오 버튼은 디자인 제어가 제한적입니다. 하지만 input 요소는 감추고, label과 가상 요소를 활용하면 디자이너가 원하는 형태로 자유롭게 꾸밀 수 있습니다.1️⃣ 기본 체크박스의 구조 동의합니다👉 이 구조를 기반으로 input은 숨기고, label로 꾸미게 됩니다.2️⃣ 커스텀 체크박스 예제HTML: 약관에 동의합니다CSS:.custom-checkbox { display: inline-flex; align-items: center; cursor: pointer; gap: 8px;}.custom-checkbox input { display: none;}.checkmark { width: .. 2025. 5. 15.
🎨 이미지와 배경 이미지 처리 – object-fit, background-* 🎨 이미지와 배경 이미지 처리 – object-fit, background-*이미지는 콘텐츠와 디자인 모두에서 중요한 역할을 합니다. 이 글에서는 HTML 이미지 태그()와 CSS 배경 이미지를 각각 어떻게 적절히 배치하고 크기 조절할 수 있는지, 그 차이점과 핵심 속성들을 정리합니다.1️⃣ 태그 vs background-image 구분 태그background-image 용도 콘텐츠 이미지 (의미 있음) 디자인용 이미지 (의미 없음) 접근성 alt 속성 필수 화면 리더가 읽지 않음 조절 방식 object-fit background-* 2️⃣ object-fit .. 2025. 5. 15.

티스토리툴바