본문 바로가기

728x90
반응형

css3

(2)
[CSS] linear-gradient 예제와 함께 알아보자 CSS 의 linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성한다. 함수의 결과 생성되는 이미지는 이미지 요소의 한 종류이므로 이미지가 적용되는 곳에 대해서만 이를 사용할 수 있다. 즉, background-color 또는 color 와 같은 속성에는 사용할 수 없다. 사용법 linear-gradient() 함수 사용법은 다음과 같다. 1 linear-gradient(방향_또는_각도, 색상_그리고_정지점1, 색상_그리고_정지점2, ... 색상_그리고_정지점n); 방향 또는 각도 미리 정의된 키워드로 표현한 그라디언트 진행 방향, 또는 진행 각도를 첫 번째 인자로 전달한다. 이는 선택사항이나, 지정하지 않을 경우 'to bottom'이 기본값으로 적용된..
[CSS] 애니메이션, 트랜지션, 트랜스폼의 차이 뜬금없지만 프론트엔드 개발자이지만 CSS를 잘 다루지 못하는 상태로 취업해서 밑바닥부터 구르고 있다. 통장 잔고를 보면 눈가가 뜨거워진다. 애니메이션, 트랜지션, 트랜스폼의 차이. 매번 단편적으로 보고 넘어가버리니 다시 보면 헷갈려서 정리해 보려고 한다. CSS의 Animation, Transition 및 Transform은 모두 웹 페이지에서 요소를 시각적으로 개선하기 위해 사용되는 CSS 속성이다. 애니메이션 (Animation) CSS3에서 새롭게 추가된 기능으로, 특정 요소에 대해 애니메이션 효과를 부여하는 방법이다. 요소에 복잡한 시각적 변화를 부여하는 데 사용되며, 일반적으로 사용자가 상호작용하지 않아도 자동으로 실행한다. @keyframes 규칙을 사용하여 정의하며, 시작 상태와 끝 상태를 ..

728x90
반응형