본문 바로가기
css

JavaScript가 필요하지 않을 수 있습니다.

by it-square 2022. 3. 10.
반응형

자바스크립트 좋아요, 너무 좋아요. 그러나 많은 경우 HTML과 CSS를 사용해도 같은 결과를 얻을 수 있습니다.

자바스크립트를 사용하지 않고도 할 수 있는 몇 가지 일들을 살펴보자.

이미지 슬라이더

이미지 슬라이더는 인기가 있으며 이미지 슬라이더를 만드는 데 사용할 수 있는 수많은 JS 플러그인이 있습니다. 불행하게도, 이것들은 당신의 코드베이스를 부풀리고 당신의 웹사이트 속도를 느리게 할 수 있는 엄청난 JS 오버헤드를 동반한다. 일반 HTML과 CSS를 사용하면 실제로 몇 줄의 코드만으로 이미지 슬라이더를 만들 수 있습니다.

 

SVG 애니메이션

개발자가 SVG 애니메이션을 만들고 싶을 때 Tweenmax와 같은 JS 애니메이션 라이브러리를 사용하는 경우가 많습니다. 그러나 일반 CSS를 사용하면 JS 없이도 SVG 애니메이션을 할 수 있습니다. 아래의 예를 살펴보십시오.

모달 창

오늘날 현대 응용 분야에서 우리는 모드 사용을 매우 자주 볼 수 있다. 모달은 어떤 종류의 JS에 의해 버튼 클릭으로 어떤 것을 표시하거나 숨김으로써 유발된다. 다음에는 일반 HTML / CSS를 사용하여 모델을 만드는 것이 어떨까요?

메뉴

 

모달과 마찬가지로 사이드바/햄버거 탐색을 만들고 싶을 때 자바스크립트로 전환하는 경우가 많습니다. 이것은 체크박스로 간단한 트릭을 사용하여 플레인 HTML / CSS를 사용하여 수행될 수도 있다.

색상 선택기

JavaScript를 사용하지 않고도 보기 좋은 색상 선택기를 만들 수 있습니다. "색상" 입력 유형을 사용할 수 있습니다. 매우 간단합니다.

'css' 카테고리의 다른 글

목 대 목: 더 적음 vs Scss  (0) 2022.03.10
SASS 기본 튜토리얼  (0) 2022.03.10
Angular에서 macOS 클론 구축  (0) 2022.03.10
빌딩 설계 시스템: CSS 스타일 처리 방법  (0) 2022.03.10
#100DaysOfCode의 26일  (0) 2022.03.07

댓글