반응형 CSS3 JavaScript Animation과 CSS Animation 차이 CSS 애니메이션과 JavaScript 애니메이션은 웹 페이지에서 동적인 요소를 만들기 위해 사용되지만 다른 접근방식을 보입니다. 1. CSS 애니메이션 CSS 애니메이션은 CSS 속성을 사용하여 웹 요소에 애니메이션 효과를 적용하는 방식 주로 @keyframes 규칙을 사용하여 애니메이션의 시작 상태와 종료 상태, 그리고 중간 단계의 스타일을 정의 CSS 애니메이션은 주로 시각적인 요소에 대한 애니메이션에 사용됩니다. 예를 들어, 요소의 이동, 회전, 크기 변화, 색상 변화 등을 담당 CSS 애니메이션은 브라우저에 내장된 애니메이션 엔진을 사용하므로, 성능 면에서 일반적으로 JavaScript 애니메이션보다 부드럽고 효율적 CSS 애니메이션은 간단한 애니메이션 효과를 적용하기에 편리하며, 코드가 간결하.. 2024. 2. 16. [Javascript] - Slide/Carousel 효과내기 Javascript에 다양한 Slide 라이브러리가 있다. Owl Carousel, Swiper JS, Splide, Flicking 등등 라이브러리를 사용하는 것도 좋은 방법이지만, 때로는 직접 만들어보는것도 좋다. 1. HTML // HTML 2. JS var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("image-fade"); for (i = 0; i slides.length) { slideIn.. 2024. 1. 23. Tailwind CSS 이 포스팅에서는 Tailwind CSS에 대해 다뤄보려고 한다. TailwindCSS란? - Utility-first CSS Framework로 부트스트랩과 비슷하게 이미 지정된 단어들을 클래스명에 선언하게 되면 해당 CSS가 적용 되는 방식이다. Layout, Flex, Effects, Space 등 다양한 CSS가 클래스명에 따라 적용되어있어 찾아서 사용하면 보다 간편하게 웹사이트에 스타일을 입힐 수 있다. 내가 생각한 Tailwind CSS의 장단점 1) 장점 클래스의 이름을 고민하지 않아도 된다. 쉽게 반응형 페이지를 구현할 수 있다. 공식문서를 통해 쉽게 사용 가능 반복되는 스타일은 컴포넌트 추상화, 클래스 추상화를 통해서 재사용 가능 2) 단점 지정된 클래스명을 알아야 사용할 수 있다. CSS.. 2023. 11. 28. 이전 1 다음 반응형
