728x90 css문법3 CSS 기초 강의 12편: CSS 애니메이션과 인터랙션 심화 1. CSS 애니메이션 기본CSS 애니메이션은 @keyframes와 animation 속성을 사용하여 단계별로 스타일을 변화시킵니다. @keyframes는 애니메이션의 각 단계에서 적용할 스타일을 정의하며, animation 속성은 애니메이션을 요소에 적용하는 데 사용됩니다.기본 문법@keyframes 애니메이션이름 { 0% { 속성: 값; } 100% { 속성: 값; }}선택자 { animation: 애니메이션이름 시간 타이밍함수 반복횟수;} 예제: 단순 이동 애니메이션@keyframes moveRight { 0% { transform: translateX(0); } 100% { transform: translateX(100px); }}.box { width: 100px.. 2024. 11. 27. CSS 기초 강의 7편: CSS 애니메이션과 트랜지션으로 시각 효과 만들기 1. CSS 트랜지션 (Transition)트랜지션은 특정 스타일 속성이 변경될 때 애니메이션 효과를 적용하여 변화를 부드럽게 만듭니다. 주로 마우스 호버 또는 클릭 이벤트와 같은 상황에서 사용됩니다.트랜지션 기본 문법선택자 { transition: 속성 시간 타이밍함수 지연시간;}속성: 트랜지션을 적용할 CSS 속성 (예: width, background-color 등)시간(duration): 트랜지션 효과가 완료되는 데 걸리는 시간 (예: 0.5s, 1s 등)타이밍 함수(timing-function): 트랜지션 진행 속도를 조절 (ease, linear, ease-in, ease-out)지연시간(delay): 트랜지션이 시작되기 전 대기 시간예제: 마우스 호버 시 배경색 변경.button { .. 2024. 11. 22. CSS 기초 강의 1편: CSS의 기본 개념과 문법 1. CSS란?CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 언어입니다. HTML이 웹 페이지의 구조와 콘텐츠를 나타낸다면, CSS는 이 콘텐츠의 색상, 폰트, 간격, 배경 등을 설정하여 웹 페이지의 시각적인 스타일을 지정합니다.2. CSS 문법CSS 문법은 **선택자(selector)**와 **선언(declaration)**으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 선택하고, 선언은 스타일 속성(property)과 그 값(value)을 지정합니다.선택자 { 속성: 값;}예제h1 { color: blue; font-size: 24px;} 선택자: h1은 스타일을 적용할 HTML 요소를 선택합니다.속성: color와 fo.. 2024. 11. 16. 이전 1 다음 728x90
