CSS 트릭 : 고급 CSS 해킹을위한 최고의 가이드

고급 CSS 기술을 배우는 것을 고려해 본 적이 있다면이 가이드보다 좋은 출발점이 될 것입니다. 다음 CSS 주제를 다룹니다.

Animate.CSS 란? [튜토리얼]

이 섹션에서는 Animate.css를 시작하여 간단하고 효율적인 프로그래밍을 통해 창의적이고 기능적인 애니메이션 디자인을 만드는 데 웹 개발자를 더 효과적으로 지원하는 방법을 설명합니다. 웹 컨텐츠를 업그레이드하고 응용 프로그램 디자인을 개선하기 위해 Animate.css 시작하기 [튜토리얼]은 고유 한 컨텐츠를 만드는 좋은 방법입니다. 개발자는 디지털 환경에서 웹 사이트 콘텐츠를 공유 할 때 창의적이고 다양한 기능, 더 빠르고 더 나은 품질의 콘텐츠, 더 나은 브라우저 간 호환성을 통해 다른 경쟁 사이트보다 이점을 얻습니다. Animate.CSS 라이브러리 확장은 모든 웹 및 웹에 대한 도구, 단순성 및 유연성을 제공합니다. 모바일 앱 개발 서비스.

CSS 애니메이션은 다양한 애니메이션 기능이있는 CSS (Cascading Style Sheets)의 확장입니다. 이 모듈에는 웹 사이트 용 디자인 라이브러리가 포함되어있어 사용자에게 편리함, 창의성 및 전문적인 웹 애플리케이션을 제공합니다. 웹 개발자 Animate.css 시작하기 [튜토리얼] Cascading Style Sheet 확장을 통해 애니메이션 디자인을 적용하고 CSS 시퀀스를 편집하고 웹 사이트 디자인을 개선합니다. 이 확장은 Flash 또는 JavaScript에서 처리 및 메모리 사용량이 적은 특정 HTML 요소에 대한 간단한 구성으로 애니메이션 디자인을 구현할 때 개발자 상호 작용을 단순화합니다.

장점

의심 할 여지없이 Animate.CSS는 단순성과 호환성을 위해 개발자 커뮤니티에서 인기를 얻고 있습니다. 주로 Animate.CSS에는 개발자의 편의를 위해 개발자 웹 사이트 문서에 복사하여 붙여 넣는 간단하고 바로 사용할 수있는 스타일 시트 스크립트가 있습니다. 또한이 모듈은 개발자의 창의성을 제한하고 프로젝트 개발 완료 시간을 늦추는 추가 단계가 필요한 일반 GIF 또는 플래시 이미지에 사용자가 정착하지 못하도록 구축되었습니다. 또한 Animate.css 시작시 애니메이션 속성에 대한 많은 축약 형 애니메이션 디자인 스타일 스크립트가 있습니다. 중요한 것은 CSS (Cascading Styles Sheet) Animate.CSS 프로그램에는 창의적이고 기능적인 애니메이션 디자인에 필요한 디자인 사용자 정의 개발자 도구를 개발자에게 더 잘 제공하는 고급 키 프레임 확장이 포함되어 있습니다. 모듈을 사용하기 쉬울뿐만 아니라 Animate는 Javascript를 사용하여 추가 업그레이드 또는 개선을위한 호환성도 입증합니다.

Animate.CSS에서 애니메이션이 작동하는 방식

CSS animate는 단순하고 효과적인 디자인. 설명하기 위해 Animate.CSS에는 웹 사이트 스타일 지정을위한 두 가지 주요 구성 요소가 포함되어 있습니다. 첫 번째 구성 요소는 CSS 애니메이션에 대한 정보를 스타일링하고 저장합니다. 그러나 두 번째 구성 요소는 "키 프레임"을 사용하여 웹 개발자에게 애니메이션 디자인을위한 시퀀스의 시작과 끝을 알립니다. 또한이 구성 요소는 고급 전환 지점을 사용하여 더 나은 애니메이션 구성을 허용합니다.

애니메이션 만들기

CSS 애니메이션에는 기본 및 하위 속성 구성 요소가 포함됩니다. 일반적으로 웹 개발자는 Animate.CSS 스타일 별 스크립트 요소를 사용하여 Animate.css를 시작하고 애니메이션 속성에 대한 추가 디자인 스타일을 포함합니다. 보다 구체적으로, 속성은 웹 사이트에 기능적이고 간단한 애니메이션을 제공하기 위해 서로 다른 stye 함수간에 작동합니다. 애니메이션 속성에는 애니메이션 이름, 기간, 타이밍 및 지연과 같은 다양한 스타일 요소 기준이 포함됩니다. 다른 형식에는 애니메이션 수, 방향, 채우기 및 재생이 포함됩니다. 다행히도 라이브러리 모듈은 반응 형 웹 디자이너 기능이 불확실한 수많은 코드의 형식을 지정하고 테스트하는 대신 간단한 텍스트 시퀀스로 웹 사이트 애니메이션에 이러한 속성을 적용합니다.

키 프레임

.CSS Animate 확장을 통해 사용자는 "키 프레임"으로 작업하여 구성 요소가있는 애니메이션을 만듭니다. 사용자의 편의를 위해 "키 프레임"은 CSS 스타일 세트에 대한 점진적인 편집 기능을 제공하는 동시에 웹 개발자가 중요한 애니메이션 기능에 집중할 수 있도록 Cascading Style Sheets를 통해 설정됩니다. 자세히 설명하기 위해 "키스톤"은 사용자가 타이밍, 기간 내에서 구성을 수행하고 다른 디자인 시퀀스 내에서 심층적 인 세부 요소를 구성하는 데 도움이됩니다.

규칙에서 키 프레임

또한 애니메이션을 표시하려면 사용자가 구성 요소와 더 잘 연결되도록 "규칙에서 키 프레임"을 작동해야합니다. 보다 구체적인 속성 구성의 경우 확장은 디자인 "키 프레임"간의 애니메이션 값을 수정합니다. 식별을 위해 웹 개발자는 시퀀스 내에서 여러 이름을 편집하고 CSS 스타일 집합에 대한 값이없는 요소를 찾기 위해 "규칙의 키 프레임"을 중요하게 생각합니다. 또한 "규칙의 키 프레임"은 애니메이션에 대한 유용한 코드 표시기를 사용하여 웹 개발자를위한 편집 기능을 확장하여 디자인 스타일 중에 요소를 더 잘 렌더링합니다.

Annimate.CSS 변환

마찬가지로 중요한 CSS (Cascading Style Sheets) Animate.CSS 기능은 더 나은 요소 편집을 위해 "변환"속성을 제공합니다. CSS 디자인과 호환되지 않는 요소는 변형 도구로 변경됩니다. 유리하게도 크기 조정, 회전, 기울이기 및 변환과 같은 변환 도구를 사용하는 개발자는 웹 응용 프로그램에서 더 나은 디자인을 위해 요소를 구성 할 수 있습니다. 2d 또는 3d의 변형 속성은 웹 사이트를 만들 때 사용자에게 추가 디자인 창의성과 기능을 제공합니다.

규모

크기 조정을 통해 Animate.CSS 사용자는 웹 콘텐츠에 더 잘 맞도록 디자인의 크기를 조정합니다. 특정 CSS 변환 기능은 요소의 너비와 높이를 수정하여 웹 앱의 콘텐츠 크기를 더 잘 조정합니다. 기본적으로 축척 값은 XNUMX의 속성으로 시작하며 XNUMX보다 크거나 작은 값으로 조정되어 요소에 대한 확장 성을 형성합니다. 간단히 말해서 CSS의 속성은 요소 및 콘텐츠 디자인에 대한 확장 구성을 처리 할 때 비례 수정을 가능하게합니다.

꼬챙이

계속하려면 Animate.CSS의 변형 도구는 웹 개발자를위한 기울이기 기능으로 구성되어 있습니다. 요소 속성의 디자인은 기울어 질 수있는 웹 앱의 가로 및 세로 축에 맞춰 정렬됩니다. 일반적으로 기울이기 함수에는 개발자가 축에서 요소를 왜곡하는 데 도움이되는 "x"및 "y"값이 포함됩니다.

옮기다

또 다른 변형 기능은 CSS 번역입니다. 마찬가지로 번역 기능은 "x"및 "y"값을 공유하여 개발자를위한 더 나은 설계 기능을 지원합니다. CSS skew 기능과 달리 번역 도구를 사용하면 사용자가 가로 및 세로 축 내에 특정 요소를 배치 할 수 있습니다.

회전

또한 Animate.css를 시작하는 개발자는 변형 도구를 사용하며 요소에 대한 회전 기능도 포함합니다. 사용자는 쉽게 요소의 각도를 어느 방향 으로든 조정할 수 있습니다. 회전 값은 콘텐츠를 시계 방향으로 회전 할 때 양수이고 요소를 시계 반대 방향으로 조정할 때 음수 값으로 떨어집니다.

매트릭스

마지막으로 CSS 변환 기능에는 요소에 대한 매트릭스 함수가 ​​포함됩니다. 개발자에게 특히 유용한 매트릭스 도구는 범용 편집 응용 프로그램을 위해 2D 구성을 단일 요소에 결합합니다.

물만 추가하는 CSS 애니메이션

Animate.CSS 시스템은 "Just-Add-Water"를 나타냅니다. 모듈은 신규 또는 기존 웹 개발자를위한 사용자 친화 성과 단순한 디자인을 나타내는 "크로스 브라우저"애니메이션 소스로 분류됩니다.

설치

시작하려면 관리자는 Just Add Water Cascading Style Sheets Animation 프로그램을 설치해야합니다. 첫째, NPM을 통해 설치가 이루어집니다. 정의하기 위해 Node Package Manager는 자바 스크립트 Animate.CSS의 디자인을 공유하는 스크립트입니다. 기본적으로 프로그래밍 언어는 웹 개발을위한 안정적인 전제로서 Node.JS와 함께 작동합니다. 다음으로 사용자는이 코드“$ Node Package Manager install animate.css –save”를 사용하여 프로그램을 설치합니다.

또는 시퀀스는 "$ yarn add animate.css"를 따릅니다. 더 설명하기 위해 원사 설치는 관리자가 프로젝트를 설치하는 데 도움이됩니다. 일반적으로“Yarn”은 설치를 코드 또는 다른 설치 품위를 사용하는 종속성과 연결합니다. npm (노드 패키징 관리자) 설치 방법과 달리, "yarn"대안은 새 프로그램을 추가 할 때 "–save"또는 "–sav-dev"를 적용하지 않습니다. 깊이있는 다른 프로그램의 지원 없이는 종속성이 작동 할 수 없습니다. 모듈 및 설치 확장의 조합은 혁신적인 새 라이브러리 모델과 협력합니다.

Animate.CSS 사용 [튜토리얼]

Animate.CSS 웹 사이트에서 웹 개발자를위한 오픈 소스 코드를 사용할 수 있습니다. 사용자는 Animate.css 다운로드 다른 Cascading Style Sheet 애니메이션 텍스트에 액세스합니다. 이 목록에는 다양한 디자인 스타일이 포함되어 있으며 사용자 웹 사이트에 직접 적용될 수 있습니다. 또한 다운로드 코드는 Animate.Css를 시작하는 또 다른 방법입니다.

웹 사이트에서 Animate.CSS 시작하기

CSS (Cascading Style Sheets) 스타일 시트를 개발자 웹 사이트에 적용하는 것은 쉽고 빠르며 효과적입니다. 그러나 텍스트 구현에는 세부 사항에 대한 사용자주의가 필요합니다. 먼저 CSS (Cascading Style Sheets) animate.CSS 스타일 시트가 개발자의 문서에 올바르게 배치되어야합니다. .” 다음으로 관리자는 "애니메이션"스타일 시트 클래스를 웹 응용 프로그램 문서의 요소에 적용합니다. 또한 애니메이션 스크립트는 CSS 이름을 따라 요소에 대한 특정 애니메이션 기능을 수행합니다. 또는 사용자는 Annimate.CSS 요소 구성을위한 다른 호스트로 CDNJS와 같은 다른 버전으로 전환 할 수 있습니다. 형식은 다음과 같습니다.

Animate.CSS의 애니메이션

Animate.css를 시작하는 웹 디자이너는 웹 응용 프로그램의 콘텐츠를 차별화하는 단순하고 고품질의 애니메이션을 중요하게 생각합니다. Animate.CSS에서 제공하는 애니메이션 스타일 시트에는 문서 요소를 사용자 정의하는 다양한 CSS (Cascading Style Sheet) 애니메이션 스타일이 포함되어 있습니다. 또한 요소에 애니메이션 디자인을 만들려면 개발자가 "animated"태그를 입력해야합니다. 클래스는 문서 요소 내에 포함되며 콘텐츠 속성을 더 잘 정의하기 위해 추가 지침이 필요합니다. 일반적으로 개발자는 기능이 "무한"으로 설정된 활성 요소에 의존하여 웹 사이트 내에서 여러주기의 애니메이션 디자인을 사용할 수 있습니다. 또한 높은 평가를 받고있는 애니메이션의 지속 시간 제약과 지연 및 사용자 애니메이션 상호 작용은 Animate.CSS 스타일 시트 목록에서 사용할 수 있습니다.

타이밍 애니메이션 시작

대부분의 경우 Annimate.CSS를 시작하는 웹 개발자는 웹 사이트의 콘텐츠를 개선하기 위해 애니메이션 디자인을 찾습니다. 합리적으로 애니메이션은 사이트 방문자를 사이트의 특정 정보로 끌어들이는 방법으로 수행 할 수 있어야합니다. 따라서 개발자는 애니메이션 지연, 속도 및 타이밍과 관련하여 요소를 구성하는 방법을 이해해야합니다.

지연

현재 Animate.CSS는 특정 스타일 시트를 사용하여 지연 기능으로 개발자를 지원합니다. 예를 들어 지연 기능이있는 스타일 시트는 다음과 같이 나타날 수 있습니다.“ 예 .” 이 시나리오에서는 바운스 애니메이션 클래스가 연결된 요소에 대해 2 초의 지연이 발생합니다. 지연 클래스는 "지연"으로 식별되며 지연 기능을 XNUMX 초에서 XNUMX 초까지 변경할 수 있습니다. 사용자가 CSS (Cascading Style Sheet) 텍스트, 특히 코드를 추가하는 경우 추가 지연 기간이 허용됩니다.

속도

또한 Annimate.CSS의 요소 디자인에는 속도 시간 값이 있습니다. 개발자는 클래스에 대한 특정 스타일 시트를 사용하여 애니메이션 속도를 수정할 수 있습니다. 예를 들어, 애니메이션 시간 시퀀스는 다음과 같을 수 있습니다. " 예 .” 또한 개발자는 애니메이션 요소가 튀어 나와 "빠른"속도 기능을 만들 수 있습니다. 또한 클래스 이름은 "느림", "느리게", "빠름"및 "더 빠름"으로 참조 될 수 있습니다. 클래스 이름과 함께 "2 초", "3 초", "800 밀리 초"및 "500 밀리 초"와 같은 속도 시간은 요소 함수의 속도를 나타냅니다. 기본적으로 요소 비율은 XNUMX 초의 표준 값으로 설정됩니다. 추가 확장이있는 사용자는 CSS (Cascading Style Sheets) Annimate.CSS 스타일 시트 내에서 수동 텍스트 편집을 통해 타이밍을 변경할 수 있습니다.

사용자 지정 빌드 시작

앞서 언급 한대로 개발자는 Animate.CSS 스타일 시트를 수동으로 조정하여 표준 기본값과 별도로 새 애니메이션을 개발할 수 있습니다. "gulp.js,”는 Animate.CSS와 호환되며 사용자 정의 애니메이션 빌드를 쉽게 설정할 수 있습니다. 보다 구체적으로, 크로스 브라우저 플랫폼은 작업 개발을위한 자동화 프로그램입니다. 웹 개발자 및 프로그래머를 위해 Gulp 확장은 사용자 서버에서 플러그인을 지원하기 위해 다양한 파이프 구동 파일을 분석하고 구성합니다. 이 경우 Gulp는 개인화 된 애니메이션 빌드 및 기능 생성을 위해 종속성과 상호 작용합니다.

예를 들어, 초기 단계에서는 개발자에게 "$ cd path / to / animate.css /"스타일 시트 스크립트를 입력하도록 요청합니다. 다시 한 번 관리자는 "$ npm 설치"로 문서를 처리합니다. 그 후 웹 개발자는 "NPX Gulp"패키징 프로그램에 빌드에 참여합니다. 게다가 Gulp 내의 패키징은 웹 콘텐츠에 맞는 애니메이션 디자인 스타일을 포함하도록 조정 가능합니다. 사용자는 "animate-config.json"스크립트로이 패키지를 편집하여 적절한 빌드를 선택하고 선택합니다. 값이 "true"및 "false"인 빌드 옵션을 통해 선택하면 NPX Gulp 목록에서 추가되거나 제거되는 빌드가 결정됩니다.

좋은 코드를 작성하는 것은 웹 페이지에서 원하는 결과를 얻는 것 이상입니다. 좋은 코드는 가능한 한 효율적이고 간결해야합니다. 동일한 결과를 얻을 수있는 방법은 여러 가지가 있지만 가장 간결하고 간단한 방법은 몇 가지 예외를 제외하고 이상적인 선택입니다.

훌륭하고 깨끗한 코드를 작성하면 두 가지 주요 이점이 있습니다. 첫째, 극적으로 사이트 속도 및 성능 향상. 파일 크기가 작을수록 (그리고 보내는 외부 요청이 적을수록) 웹 사이트가 브라우저에로드되는 데 걸리는 시간이 줄어 듭니다. 둘째, 좋은 코드를 작성하면 유지 관리가 쉬워진다는 귀중한 이점이 있습니다. 프로젝트를 직접 코딩하든 다른 개발자와 함께 코딩하든 상관없이 코드가 더 간결할수록 (이상적으로는 좋은 문서가 포함됨) 코드베이스를 다시 방문해야하는 사람에게 골치 아픈 일이 줄어들 것입니다.

좋은 코드 작성을위한 모범 사례는 모든 프로그래밍 언어에 적용되는 경우가 많지만이 게시물은 웹 사이트에서 CSS를 개선하는 데 특별히 맞춤화됩니다.

불필요한 HTTP 요청 제거

웹 사이트를 개발하는 과정에서 HTML 문서 또는 CSS 파일에서 연결된 여러 외부 파일 및 종속성이 발생할 수 있습니다. 외부 CDN에서 호스팅되는 다양한 글꼴 또는 CSS 프레임 워크를 사용해 볼 수 있습니다. 이러한 각 종속성은 사이트가 브라우저에로드 될 때마다 만드는 HTTP 요청을 나타냅니다. 이는 사이트로드 시간에 큰 부담을주고 이러한 모든 요청이 매우 빠르게 합산됩니다.

프로젝트에 여러 개의 외부 글꼴 파일을 추가했지만 현재 CSS 파일에서 1 개 또는 2 개만 참조하고있는 경우 이러한 링크 된 종속성 중 하나를 <head> HTML 문서의.

코드 몇 줄에만 CSS 프레임 워크를 사용하고 있습니까? 이 줄을 복사하여 기본 .css 스타일 시트를 열고 원래 CSS 프레임 워크 코드에 대한 링크를 제거합니다.

CSS 규칙 단순화 및 통합

CSS를 작성하는 동안 다양한 요소와 선택자에 대해 동일한 규칙을 반복적으로 작성할 수 있습니다. 컴퓨터 프로그래밍에서 자주 반복되는 "DRY"(Do n't Repeat Yourself) 개념은 CSS에도 적용됩니다. 다른 선택기에 대해 동일한 CSS 규칙을 작성하는 경우 언제든지이를 통합하는 방법을 찾으십시오.

예를 들어, 작성하는 대신 :

p {글꼴 크기 : 14px; 여백 : 0 자동; 디스플레이 : 인라인 블록; } h1 {여백 : 0 자동; } img {디스플레이 : 인라인 블록; 여백 : 0 자동; }

 

다음과 같이 작성해보십시오.

p, h1, img {여백 : 0 자동; } p {글꼴 크기 : 14px; } p, img {디스플레이 : 인라인 블록; }

 

또는 더 나은 :

/ * p, h1, img 요소에 적용 * / .def-margin {margin : 0 auto; } / * p 요소에 적용 * / .def-fs {font-size : 14px; } / * p 및 img 요소에 적용 * / .d-ib {display : inline-block; }

 

이것은 큰 차이가 아닌 것 같지만 (적어도 코드 줄 측면에서) 총 문자 수가 크게 줄어들어 페이지로드 시간에 영향을 미칩니다. 또한 동일한 스타일을 활용하는 요소와 선택기를 통합하여 다른 요소에 적용되는 공통 스타일을보다 명확하게 확인할 수 있습니다.

 ID 및 클래스 값 재평가

클래스 또는 ID 값으로 스타일 표현의 측면을 지정하고 싶은 경우가 많지만 이는 이상적이지 않습니다. 예를 들어 오류 메시지의 경우 종종 다음을 사용하는 것이 합리적으로 보일 수 있습니다. red 다음과 같이 클래스 또는 ID 값으로

오류 메시지입니다.

 

하지만이 클래스의 색상이나 다른 스타일을 변경하면 어떻게됩니까? 이 클래스는 더 이상 내용이나 표현과 직접적인 관계가 없으며 혼란을 야기 할 가능성이 높습니다. 이 상황에서 더 나은 선택은 스타일 표현보다는 기능을 설명하는 클래스 값을 사용하는 것입니다.

오류 메시지입니다.

 

스타일 설명보다는 해당 요소의 콘텐츠 또는 기능을 설명하는 클래스 및 ID 값을 사용하는 것이 항상 좋은 생각입니다. 스타일은 사이트를 만드는 과정에서 여러 번 변경 될 수 있지만 함수 설명자를 사용하면 코드를 훨씬 더 읽기 쉽고 유지 관리하기 쉽습니다.

선택기 선택 재평가

요소를 선택하는 방법에는 여러 가지가 있지만 다른 방법보다 더 효율적인 방법이있는 경우가 많습니다. 특정 요소에 도달하기 위해 선택자를 서로 중첩시킬 수 있지만 너무 많은 수준으로 이동해야하는 경우 클래스 또는 ID 값이 더 잘 작동하는지 재평가하는 것이 가장 좋습니다.

중복 확인

웹 페이지를 스타일링하는 과정에서 다양한 색상 (예 : 같은 색상의 여러 음영)을 사용해 볼 수 있습니다. 명확한 단일 색상을 결정하지 않고도 이러한 다양한 규칙 세트를 코드에 남겨 두는 것은 쉽습니다. 이러한 유형의 중복을 확인하는 데 사용할 수있는 좋은 도구는 다음과 같습니다. cssstats.com.

이렇게하면 코드가 단순화 될뿐만 아니라 사이트에 40 가지 색상의 음영을 표시하는 대신 전체 디자인을 훨씬 더 일관성있게 만들 수 있습니다.

CSS 파일 축소

CSS 파일이 프로덕션 및 라이브 서버에 배포 할 준비가 완료되면 최상의 성능을 위해 파일을 축소하는 것이 좋습니다. 축소 기는 소스 코드에서 모든 공백을 제거하여 파일 크기를 크게 줄입니다. 소스 코드는 기능 (가독성 만 있음)을 위해 공백에 의존하지 않기 때문에 사이트 실행 방식에 부정적인 영향을 미치지 않습니다.

CSS (및 JS 파일)를 축소하기위한 많은 무료 도구가 있습니다. 한 가지 옵션은 cssminifier.com 

CSS 파일 통합

지난 게시물에서 간략히 언급했듯이 가능한 한 리소스를 통합하는 것이 좋습니다. 개발 단계에서 CSS 모듈을 유지하기위한 좋은 주장이 있지만 (예 : 하나의 CSS 파일에 레이아웃 규칙을 유지하고, 다른 CSS 파일에 색상 옵션을 유지하는 등) 궁극적으로 이러한 모든 CSS 규칙을 단일 파일로 통합하는 것이 좋습니다. 최고의 성능.

네이티브 CSS3 애니메이션

인기있는 도서관은 Animate.css CSS 애니메이션을 프로젝트에 쉽게 추가 할 수 있도록합니다. 이들은 대체로 "바운스", "흔들기"및 과도하게 사용되었을 때 다소 부실하다고 느낄 수있는 기타 스톡 움직임과 같은 일반적인 동작으로 구성됩니다. CSS에 내장 된 애니메이션 속성을 활용하면 단순한 모션을 넘어 훨씬 더 복잡하고 사용자 정의 된 애니메이션을 만들 수 있습니다. CSS 애니메이션은 CSS3 사양에서 사용할 수있는 요소 색상, 크기, 위치 또는 기타 속성에 영향을 줄 수 있습니다. 이 게시물은 네이티브 CSS3 속성을 시작하는 방법과이를 사용할 수있는 몇 가지 예를 소개합니다.

요소에 애니메이션 추가

HTML 요소 애니메이션을 제공하기 위해 처음 두 단계는 애니메이션의 이름과 기간을 선언하는 것입니다. 이것은 animation-name 및 animation-duration 속성 :

#my애니메이션 {
    애니메이션 이름: 색상 변경;
    애니메이션 기간: 5s;
}

 

animation-duration 초 또는 밀리 초 단위의 값을 허용 할 수 있습니다 ( s or ms 정수 뒤).

애니메이션 만들기

이름과 기간을 선언했으면 이제 애니메이션을 만들 차례입니다. 이것은 @keyframes 규칙 뒤에 애니메이션 이름이옵니다.

@키프레임 색상 변경 {
    
}

 

내부 @keyframes 규칙은 애니메이션의 각 "프레임"에 대한 규칙이며 0% 에 100%. 0% 애니메이션의 시작 부분입니다. 100% 그 사이에 가능한 모든 백분율 값으로 끝입니다. 이것은 책의 각 페이지가 결합 될 때 움직임을 만드는 고유 한 프레임 인 비디오 또는 플립 북과 매우 유사하다고 생각할 수 있습니다.

@키프레임 색상 변경 {
    0% {
        배경 색: 검은;
    }  
    50% {
        배경 색: 회색;
    }
    100% {
        배경 색: 화이트;
    }
}

 

위의 예에서 color-change 애니메이션은 background-color 의 #myAnimation 요소 black at 0%에 gray at 50% 마지막으로 white at 100%.

그러나 사용자 정의 애니메이션을 사용하는 힘은 프레임의 증분 변경 수준에 관계없이 모든 CSS 속성을 절대적으로 변경할 수 있다는 것입니다. 이것의 좋은 예는 :hover 의사 클래스. CSS :hover 상태는 종종 요소를 마우스로 가리킬 때 색상 또는 사소한 스타일 변경을 적용하는 데 사용되지만 애니메이션을 사용하면 이러한 변경 사항을 훨씬 더 자세하게 할 수 있습니다.

단추:가져가 {
    애니메이션 이름: 버튼 애니메이션;
    애니메이션 기간: 5s;
    애니메이션 채우기 모드: 포워드;
}
@키프레임 버튼 애니메이션 {
    0% {
        배경 색: 푸른;
    }
    50% {
        변환: 규모(2.1);
        배경 색: 다저 블루;
    }
    75% {
        변환: 규모(2.5);
        배경 색: 화이트;
    }
    100% {
        변환: 규모(1.5);
        배경 색: 푸른;
    }
}

 

위의 예에서 button-anim 애니메이션 효과 button 마우스를 가져 가면 요소. 이것의 background-color 요소 자체의 크기도 신중하고 고유 한 단계 (원본, 5 배, 2.1 배, 원본의 2.5 배)로 1.5 초 동안 XNUMX 개의 동일한 단계로 변경됩니다.

위의 예에 포함 된 추가 속성은 animation-fill-mode 특성. 이 속성은 애니메이션 기간이 완료되기 전후에 스타일을 적용하는 방법을 나타내는 데 사용할 수 있습니다. 사용 animation-fill-mode: forwards 애니메이션의 마지막 프레임에있는 스타일 ( 100% 규칙)이 적용된 상태로 유지됩니다. 추가하지 않고 animation-fill-mode 속성, 스타일 button 애니메이션이 완료된 후 원래 상태로 돌아갑니다.

결론

CSS 애니메이션은 매우 복잡하고 상세 할 수 있으며 최대 100 개의 개별 프레임을 지정할 수 있습니다. 이 기능은 기본적으로 바닐라 CSS에서 사용할 수 있다는 점을 고려하면 모든 최신 브라우저에서 잘 지원되는 웹 프로젝트에 시각적 인 흥미와 복잡성을 추가하는 좋은 방법입니다.

CSS3에서 색상 그라디언트 사용

CSS3가 도입된 이후로 2개 이상의 색상이 점차 서로 흐려지는 색상 그라디언트를 배경으로 사용할 수 있게 되었습니다. 이전에는 Photoshop 또는 기타 도구를 사용하여 그라디언트를 만들어야 했습니다. 이미지 편집 소프트웨어. 효과적으로 사용하면 정적 배경색을 넘어 웹 페이지 디자인에 흥미와 질감을 더할 수 있는 좋은 방법입니다. Internet Explorer의 레거시 버전은 이 기능을 지원하지 않지만 모든 최신 브라우저에서 지원하므로 프로젝트에 안전하게 추가할 수 있습니다. 이 게시물에서는 그라디언트 배경과 사용 가능한 사용자 지정 옵션을 살펴봅니다.

기본 선형 그래디언트

요소의 배경을 설정하려면 ( body은 div또는 기타 요소), background 속성은 일반적으로 색상 값과 함께 사용됩니다.

본문 {배경 : #fffbed; }

 

단색 대신 선형 그래디언트를 사용하려면 최소 두 가지 색상 (XNUMX 진수, rgb, hsl 또는 명명 된 색상 값 사용)을 쉼표로 구분하여 linear-gradient() 값 :

body {배경 : linear-gradient (#fffbed, # 45add3); }

공급 업체 접두사

다른 브라우저가 linear-gradient 값과 다르게 공급 업체 접두사를 함께 사용하는 것이 좋습니다. 이렇게하면 Safari, Firefox, Chrome 및 Opera에서 값을 이해할 수 있습니다. 공급 업체 접두사를 사용하려면 2 개를 추가하면됩니다. background 규칙 linear-gradient 접두사가 붙은 값 -webkit- 및 -moz-. 또한 공급 업체 접두사없이 일반 규칙 앞에 나타나야합니다.

본문 {배경 : -webkit-linear-gradient (#fffbed, # 45add3); 배경 : -moz-linear-gradient (#fffbed, # 45add3); 배경 : linear-gradient (#fffbed, # 45add3); }

 

약간의 추가 입력이지만 모든 주요 브라우저에서 그라디언트가 지원 될 것입니다.

제어 방향

기본적으로 그라디언트는 위에서 아래로 전환되며 첫 번째 색상은 linear-gradient 값은 상단 색상입니다.

그래도 색상 앞에 방향 키워드를 추가하여 그라디언트의 방향을 변경할 수 있습니다 (예 : to top, to bottom, to right, to left, to right top등)

body {background : linear-gradient (to right bottom, #fffbed, # 45add3); }

 

방향을 모서리로 설정할 때 x 축 또는 y 축을 먼저 지정할 수 있습니다 (예 : to right bottom 및 to bottom right 동일).

다양한 색상

쉼표로 구분하여 그라디언트에서 두 가지 이상의 색상을 사용할 수 있습니다.

body {배경 : linear-gradient (#eaecee, # abebc6, # 45add3); }

or

body {background : linear-gradient (#eaecee, # ebdef0, # f4f6f7, # abebc6, # 4eb39d, # 45add3); }

 

색상 중지

때로는 특정 색상이 시작되는 위치를 제어하여 특정 색상이 더 많은 공간을 차지하거나 전환 할 더 넓은 공간을 가질 수 있습니다. 이러한 "색상 정지"를 추가하려면 지정된 색상 뒤에 백분율 값을 추가하여 해당 색상이 시작될 위치를 지정합니다.

body {배경 : linear-gradient (#eaecee, # abebc6 30 %, # 45add3 % 80); }

 

이것은 전환을 더 세밀하게 제어하는 ​​데 유용하며 흥미로운 효과에 사용할 수 있습니다.

방사형 그래디언트

선형 그래디언트에서 사용 가능한 변형 중 하나는 방사형 그래디언트입니다. 방사형 그래디언트는 요소의 중심에서 원처럼 바깥쪽으로 전환됩니다. 선형 그래디언트와 거의 동일한 구문을 사용합니다. radial-gradient 대신 값 :

body {배경 : Radial-gradient (#eaecee, # 45add3); }

 

CSS 포지셔닝 개요

이해해야 할 CSS에서 가장 중요한 속성 중 하나는 position 특성. 페이지의 레이아웃 요소에 대해 명시 적으로 값을 변경하지 않고도 많은 작업을 수행 할 수 있습니다. position 재산, 대부분 고급 레이아웃 문제 이 속성에 사용할 수있는 다른 값을 알아야합니다. 이 블로그 게시물에서는 position및 각각을 사용할 수있는 인스턴스.

정적 위치

static 기본값입니다. position즉, 어떤 요소에 대해서도 명시 적으로 값을 설정하지 않았습니다. position, 그것은 될 것이다 static 기본적으로. 요소가있는 position of static 다음과 같은 상자 오프셋 속성을 허용하지 않습니다. margin or padding .

아래 예에서 각각 div 각각은 블록 레벨 요소이기 때문에 서로 겹쳐집니다.

1과 1 호기 2과 2과

 

body {font-family : Helvetica; 색상 : 흰색; } .container {배경색 : #fffbed; } .unit {배경색 : # 337e7e; 높이 : 80px; 너비 : 80px; 텍스트 정렬 : 가운데; 라인 높이 : 80px; 테두리 : # 696969 2px 단색; }

 

상대 위치

요소가있는 position of relative 의 가치와 매우 유사합니다. static,하지만 한 가지 큰 차이점이 있습니다. top, right, bottom left.

요소가있는 경우 position of relative, 이러한 오프셋 속성은 요소 정상 위치로부터의 거리를 설정합니다. 즉, 요소를 position of relative ~을 가지려면 top 의 가치 10px, 요소가 나타납니다. 10px 일반적으로 나타나는 경우보다 낮습니다. position 했다 static.

요소가있는 position of relative 요소의 정상적인 "흐름"내에 머물러야합니다. 상자 오프셋 속성은 단순히 요소를 정상적인 흐름에서 이동시킵니다.

1과 1 호기 2과 2과

 

body {font-family : Helvetica; 색상 : 흰색; } .container {배경색 : #fffbed; } .unit {배경색 : # 337e7e; 높이 : 80px; 너비 : 80px; 텍스트 정렬 : 가운데; 라인 높이 : 80px; 테두리 : # 696969 2px 단색; 위치 : 상대; } .unit-1 {상단 : 10px; } .unit-2 {오른쪽 : 30px; } .unit-3 {왼쪽 : 20px; } .unit-4 {하단 : -30px; 오른쪽 : 40px; }

 

절대 위치

요소가있는 position of absolute 요소의 정상적인 흐름에서 제거되지만 상자 오프셋 속성도 허용합니다. 상자 오프셋 속성 사용 absolute 위치 지정 요소는 상위 요소와 직접 관련하여 해당 요소의 위치를 ​​지정합니다.

똑같은 CSS를 position: relative; 위의 예이지만 단순히 position 에 absolute 개별 요소의 위치가 완전히 달라집니다.

1과 1 호기 2과 2과

 

body {font-family : Helvetica; 색상 : 흰색; } .container {배경색 : #fffbed; } .unit {배경색 : # 337e7e; 높이 : 80px; 너비 : 80px; 텍스트 정렬 : 가운데; 라인 높이 : 80px; 테두리 : # 696969 2px 단색; 위치 : 절대; } .unit-1 {상단 : 10px; } .unit-2 {오른쪽 : 30px; } .unit-3 {왼쪽 : 20px; } .unit-4 {하단 : -30px; 오른쪽 : 40px; }

 

위치 고정

요소 position of fixed 매우 유사하다 position: relative;, 위치는 상위 요소가 아닌 브라우저 뷰포트를 기준으로합니다. 또한 요소는 페이지와 함께 스크롤되지 않고 "고정"된 상태로 유지되며 사용자가 페이지에서 어디에 있든 관계없이 항상 표시됩니다. 항상 표시되도록하기 위해 페이지의 머리글과 바닥 글을 "고정"하는 데 자주 사용됩니다.

CSS 선택기 개요

웹 개발에는 종종 동일한 결과를 얻을 수있는 다양한 방법이 있습니다. (언어에 관계없이) 좋은 코드를 작성하는 열쇠는 가능한 한 가장 효율적인 방법을 사용하여 필요한만큼 적은 코드를 작성하고 코드베이스를 최소한으로 유지하는 것입니다. 이렇게하면 페이지로드 시간이 빨라지고 자신과 다른 개발자를위한 소스 코드가 명확 해집니다. CSS를 작성할 때 타겟팅하려는 요소를 선택하는 방법과이를 수행하는 가장 좋은 방법을 아는 것이 중요합니다. 이 섹션에서는 가장 일반적인 CSS 선택기 몇 가지와 각각을 사용하는 최상의 인스턴스를 살펴 봅니다.

유형 선택기

모든 HTML 요소에 대해 해당 요소 유형에 해당하는 선택기가 있습니다. 여부 div, p, img 또는 다른 HTML 요소의 경우 해당 CSS 선택기는 태그에 사용 된 꺾쇠 괄호를 제외하고 정확히 동일합니다.

p {색상 : 검정; } div {디스플레이 : 인라인 : 블록; } img {너비 : 200px; }

 

유형 선택기는 타겟팅하려는 경우 이상적입니다. 매주 주어진 요소 유형의 인스턴스를 생성하고 모든 요소에 동일한 스타일을 적용합니다.

클래스 선택자

클래스 선택기는 특정 요소와 관련된 클래스 이름을 사용합니다. 이 선택기는 요소 유형에 관계없이 다양한 다른 요소에 특정 스타일을 적용하려는 경우에 이상적입니다. 예를 들어 다음과 같은 클래스가있을 수 있습니다. .responsive 에 적용 p, div 및 img 요소:

이 단락은 반응 형입니다. 반응 형 div

 

다음 CSS 코드 블록은 동일한 클래스를 가진 이러한 모든 요소를 ​​대상으로합니다.

.responsive {너비 : 80 %; 여백 : 0 자동; }

 

클래스 선택기는 항상 마침표 (.) 클래스 이름 앞에.

ID 선택기

ID 선택기는 주어진 HTML 문서의 단일 요소에만 적용 할 수 있지만 클래스 선택기와 유사합니다. 이것은 다음과 같은 경우에 유용합니다. 만 단일 요소를 타겟팅하려는 경우 :

독특한 스타일의 문단입니다

#myParagraph {색상 : 녹색 : 너비 : 200px; 왼쪽으로 뜨다; 디스플레이 : 인라인 블록; }

 

ID 선택기는 항상 파운드 또는 해시 기호 ()를 사용하여 스타일 시트에서 지정됩니다.#)는 ID 이름 앞에 있습니다.

범용 선택기

범용 선택기는 HTML 문서의 모든 단일 요소를 대상으로합니다. 모든 요소에서 기본 여백, 패딩 및 기타 스타일을 제거하는 등 CSS 재설정에 자주 사용됩니다.

* {여백 : 0; 패딩 : 0; }

 

범용 선택기는 별표 (*).

:hover

또 다른 일반적인 선택기 (그리고 많은 CSS "의사 클래스"중 하나)는 :hover. 이 의사 클래스를 선택기에 추가하면 요소의 호버 상태가 대상이됩니다. 이것은 이러한 스타일이 만 사용자가 마우스로 해당 요소를 가리킬 때 적용됩니다.

a : hover {텍스트 장식 : 밑줄; 색상 : 보라색; }

 

:hover 링크 또는 사용자가 마우스를 올려 놓을 때 강조하려는 요소에 자주 사용됩니다. 이 의사 클래스는 랩톱 및 데스크톱 사용자에게 적합하지만 마우스 커서가 없기 때문에 모바일 장치에는 실제로 사용되지 않습니다.

CSS의 특이성 이해

CSS 코드를 작성하는 과정에서 방금 작성한 코드가 페이지에 전혀 영향을주지 않는 것처럼 보이는 상황이 항상 발생합니다. 이것은 실망스럽고 혼란스럽고 다음과 같은 도움 없이는 문제를 해결하기 어려울 수 있습니다. Chrome 개발자 도구. 그러나 CSS의 특수성과 캐스케이드가 작동하는 방식을 더 잘 이해하면 이러한 문제를 완전히 완화하는 데 큰 도움이 될 수 있습니다. 이 섹션에서는 수행하려는 작업을 차단하는 코드를 확인하려고 할 때 일반적으로 발생하는 몇 가지 주요 문제를 지적합니다.

CSS (Cascading Style Sheets의 약자)가 위에서 아래로 작동한다는 것은 잘 알려져 있습니다. 이는 일반적으로 문서에서 더 아래에있는 코드가 상위에있는 다른 코드보다 우선한다는 것을 의미합니다. 이에 대한 간단한 예는 동일한 요소를 대상으로하는 두 개의 선언이 있습니다.

 

p {색상 : 파란색; } p {색상 : 녹색; }

 

이 예제에서 단락 요소의 색상은 단락에 파란색을 할당하는 선언 후에 나타나기 때문에 항상 녹색입니다.

문제는 요소 선택자 이외의 선택자는 다양한 수준의 특이성을 가지며 선택자를 결합하면 특이성이 증가하여 다른 규칙을 재정의한다는 것입니다.

요소 및 의사 요소

요소와 의사 요소는 가장 낮은 수준의 특이성을 갖습니다. 그들이 타겟팅하기 때문에 모든 요소 선택기를 사용하는 주어진 요소의 인스턴스는 해당 스타일을 실제로 적용하려는 경우에만 사용해야합니다. 모든 예를 들어, 다음 코드는 문서의 모든 단락 요소에 1px의 검은 색 테두리를 적용합니다.

 

p {테두리 : 1px 단색 검정; }

 

클래스, 속성 및 의사 클래스

클래스, 속성 및 의사 클래스는 더 높은 수준의 특이성을 가지며 관련된 요소에만 적용됩니다. 동일한 스타일을 공유하기를 원할 때마다 여러 다른 요소에 클래스를 적용 할 수 있다는 점에서 재사용이 가능합니다. 이러한 스타일은 요소 수준의 스타일과 충돌하는 스타일도 재정의합니다. 아래 예에서 모든 단락 요소는 녹색으로 표시됩니다. alert, 빨간색으로 표시됩니다.

 

p {색상 : 녹색; } p.alert {색상 : 빨간색; }

 

ID

ID는 가장 높은 수준의 특이성을 가지며 거의 모든 것을 재정의합니다. 원하는만큼 재사용 할 수있는 클래스와 달리 ID는 단일 요소.

 

p # myParagraph {색상 : 검정; } p.alert {색상 : 빨간색; } p {색상 : 녹색; }

 

아래 단락에 대해 두 개의 추가 선언이 있지만 p#myParagraph 선언, ID #myParagraph 항상 검은 색입니다.

인라인 스타일

인라인 스타일은 ID보다 더 높은 수준의 특이성을 갖습니다. 어떤 스타일을 인라인으로 적용하는 것은 일반적으로 매우 눈살을 찌푸 리지만 요소에 적용된 스타일을 찾고 관리하기 어렵 기 때문에 정당화 될 수있는 상황이 있습니다.

내 빨간 단락

 

위의 인라인 스타일은 다른 곳에 적용되는 스타일에 관계없이 항상 빨간색입니다. *

!important

인라인 스타일을 포함하여 위의 한 가지주의 사항은 !important. 할때는 언제나 !important CSS 규칙에 추가되면이 규칙은 다음과 같은 경우에 항상 다른 모든 규칙보다 우선합니다.

 

p {color : blue! important; }

 

!important CSS를 차단하는 것이 무엇인지 파악할 수 없을 때 생명의 은인이 될 수 있지만 쉽게 악용 될 수 있으며 코드를 더 엉망으로 만들 수도 있습니다. 일반적으로 !important 다른 모든 것이 실패 할 때만.

특이성을 더 잘 이해하고 확인하기위한 매우 편리한 도구는 다음과 같습니다. Keegan Street의 특이성 계산기. 의심스러운 경우 여기에서 선택기를 확인하는 것이 매우 유용 할 수 있습니다.

스크롤 트리거 애니메이션에 WOW.js 및 Animate.css 사용

애니메이션은 웹 사이트에 시각적 인 흥분과 움직임을 더할 수있는 좋은 방법입니다. animate.css 라이브러리는 CSS 기반 애니메이션을 웹 사이트에 쉽게 추가 할 수있는 방법을 제공합니다. 하지만 사용자가 웹 사이트의 특정 섹션으로 스크롤 한 후에 만 ​​이러한 애니메이션을 트리거하려면 어떻게해야합니까?

이것은 물론 jQuery를 통해 수행 할 수 있지만 해당 함수에 대한 JavaScript 라이브러리 만 사용하면 간단한 스크립트로 수행 할 수있는 함수에 불필요한 대량 추가가 추가됩니다. WOW.js는이 문제를 해결하여 3kB에서 jQuery가 필요하지 않고 스크롤링으로 트리거되는 애니메이션을 추가 할 수있는 사용하기 쉬운 라이브러리를 제공합니다.

이 게시물은 설치에 사용할 수있는 다양한 옵션을 포함하여 웹 프로젝트에 WOW.js 및 animate.css를 사용하는 방법에 대한 가이드를 제공합니다.짹짹 클릭

스크롤 효과 외에 다른 애니메이션에 대해 배우고 싶다면이 블로그 게시물의 마지막 섹션에서 다른 CSS 및 자바 스크립트 애니메이션 라이브러리 목록을 확인하세요.

animate.css 정보

CSS 애니메이션을 사용하면 HTML 웹 사이트에 눈길을 끄는 시각 효과를 추가하는 간단하고 쉬운 방법입니다. CSS 애니메이션에 가장 많이 사용되는 라이브러리 중 하나는 animate.css입니다. 라이브러리는 작을 수 있지만 복잡한 키 프레임을 사용하지 않고 웹 사이트에 더 많은 것을 추가하려는 초보 웹 개발자에게 완벽한 도구입니다. 이 블로그 게시물은 주로 WOW.js를 사용하는 방법에 대해 설명하지만 animate.css 파일은 매우 다양하며 다른 파일에서도 사용할 수 있습니다.

사이트의 요소에 추가 할 수있는 여러 애니메이션 중 일부는 다음과 같습니다.

• 정적 애니메이션: 이러한 유형의 애니메이션은 웹 페이지를로드하고 열 때 바로 나타납니다. 즉, 스크롤 (WOW.js)이 필요하지 않습니다!
• 스크롤 애니메이션: 이러한 유형의 애니메이션은 사용자가 웹 페이지의 요소보기로 스크롤 할 때 나타납니다. 이것은 WOW.js로 집중할 애니메이션 유형입니다. 이 애니메이션은 jQuery로도 만들 수 있습니다.
• 클릭 애니메이션: jQuery와 자바 스크립트 프로그래밍의 조합으로 사용자가 특정 요소를 클릭 할 때 실행되는 애니메이션을 웹 사이트에서 만들 수 있습니다.
• "특별한"애니메이션:이 기발한 애니메이션은 눈길을 끄는 애니메이션으로 사용자의 관심을 즉시 포착하고 싶을 때 요소에 사용할 수 있습니다.

WOW.js 정보

WOW.js는 HTML 문서에 추가 할 때 사이트에 매력적이고 동적 인 효과를 만들 수있는 Javascript 파일입니다. 이 스크롤 효과는 MIT에서 오픈 소스 코드로 라이센스를 받았기 때문에 웹 디자이너에게 가장 인기있는 옵션 중 하나입니다. WOW.js를 구현하는 웹 사이트에있을 때 사이트를 아래로 스크롤하면 애니메이션 요소가 마술처럼 나타납니다. 이 효과의 예를 보려면 공식 웹 사이트를 방문하십시오. 와우.js. animate.css와 함께 활용할 수있는 훌륭한 디자인 도구입니다.

Javascript를 사용하는 다른 애니메이션 옵션과 비교할 때 WOW.js는 간단하고 대량이없는 코드로 매우 유명합니다. 다른 CSS 애니메이션 라이브러리를 사용하여 WOW.js를 활성화 할 수 있습니다. WOW.js는 animate.css를 기본 라이브러리로 취급합니다. 여기에는 CSShake 또는 DynCSS와 같은 라이브러리가 포함됩니다. WOW.js는 오픈 소스 프로젝트에 무료로 사용할 수 있지만 모든 상용 프로젝트에 대한 라이선스를 구매해야합니다.

프로젝트에 animate.css 및 WOW.js 추가

웹 사이트 애니메이션을 시작하려면 첫 번째 단계는 HTML 문서에 animate.css 및 WOW.js를 추가하는 것입니다. HTML 프로젝트에 파일을 추가하는 방법에는 몇 가지가 있습니다. 각각의 공식 사이트에서 animate.css 및 WOW.js 배포판을 다운로드하거나 간단히 다음 사이트에서 사용할 수있는 파일에 링크 할 수 있습니다. CDN. CDN은 Javascript 및 CSS를위한 방대한 라이브러리 모음을 호스팅합니다.

웹 사이트에 animate.css를 사용하는 주요 이점은 CSS 코드가 단 하나의 파일에 보관되어 프로젝트를 단순화한다는 것입니다. 엄청나게. 프로젝트에 CSS 파일을 추가하면 문서 헤드의 HTML에 링크하기 만하면됩니다. 또는 단순히 CDN 파일을 HTML 문서에 링크 할 수 있습니다. animate.css 파일을 직접 추가하는지 아니면 단순히 CDN 파일에 링크하는지에 따라 href 만 약간 씩 다릅니다.

animate.css 및 WOW.js 설치

CDN에서 animate.css 및 WOW.js 파일을 보려면 아래 링크를 클릭하십시오.

• animate.css 축소되지 않은 버전 : https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css
• animate.css 축소 버전 : https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css
• WOW.js 축소되지 않은 버전 : https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js
• WOW.js 축소 버전 : https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js

(참고 : "최소화 된"코드는 기능을 유지하지만 파일 크기를 더 압축하기 위해 공백과 짧은 문자를 제거하는 것을 의미합니다. 이렇게하면 코드를 사용자 지정하거나 변경하려는 사용자가 코드를 읽고 편집하기가 더 어려워집니다. 코드.)

npm을 사용하여 animate.css 및 WOW.js 설치

또는 npm (Javascript 패키지 관리자)과 같은 패키지 관리자를 사용하여 명령 줄에 몇 개의 키워드를 입력하기 만하면 animate.css 및 WOW.js를 모두 설치할 수 있습니다. 프로젝트 디렉터리의 루트에서 명령 줄에서 다음 명령을 실행합니다.

npm 설치 wowjs

npm을 통해 WOW.js를 설치하는 한 가지 이점은 animate.css도 종속성으로 자동 설치한다는 것입니다. 이렇게하면 위에서 설명한 옵션 중 하나를 사용하여 animate.css를 다운로드하는 지침을 따르는 것에 대해 걱정할 필요가 없습니다. 파일을 직접 추가하거나 CDN을 사용하는 것과 유사하게 animate.css가 문서에 링크됩니다 (href 경로는 파일 위치에 따라 다름).

스크립트의 경우 닫는 태그 바로 아래의 HTML 문서 하단에 연결하여 웹 사이트에 WOW.js를 추가 할 수 있습니다. 그 뒤에는 아래와 같이 WOW.js를 활성화하는 태그 :

new WOW (). init ();

요소에 애니메이션 추가

두 파일이 모두 프로젝트에 추가되면 스크롤 할 때 애니메이션을 적용 할 HTML 요소를 선택할 차례입니다. .wow 클래스를 가진 모든 요소는 사용자가 페이지에 도달 할 때까지 숨겨진 상태로 유지됩니다. 이 클래스를 제목, 텍스트, 이미지 또는 웹 사이트의 더 많은 부분에 적용 할 수 있습니다. 꼬리표.

h1 요소와 같이 WOW.js로 애니메이션 할 HTML 요소에 .wow 클래스를 추가합니다.

내 사이트에 오신 것을 환영합니다!

Animate.css에는 선택할 수있는 75 가지 애니메이션 스타일이 있으며, 모두 공식 사이트에서 데모 할 수 있습니다 (위 참조). 사용할 애니메이션을 선택한 후 애니메이션 할 요소에 "wow"클래스와 함께 해당 이름을 CSS 클래스로 추가합니다. 다음은 HTML 문서에서 작동하는 animate.css 및 WOW.js의 몇 가지 예입니다.

내 사이트에 오신 것을 환영합니다!

사용자가 페이지에서 스크롤하면 h1 요소가 오른쪽으로 페이드 인됩니다.

여기를 클릭하세요

에 포함 된 내용 사용자가 페이지에서 스크롤하면 이제 태그가 사이트에 펄싱 효과를 만듭니다.

WOW.js 애니메이션 변경

HTML 문서에서 일부 인라인 편집을 통해 CSS 애니메이션을 약간 조정할 수 있습니다. 다음 네 가지 속성을 추가 할 수 있습니다. 클래스 =“와우” HTML 태그 내에서 결합 할 수도 있습니다. 기본적으로 이러한 단순한 속성은 사용자가 스크롤 애니메이션에 다양성을 추가 할 수있는 훌륭하고 쉬운 방법입니다. 다음은 WOW.js로 HTML 요소를 애니메이션 할 때 변경할 수있는 네 가지 속성에 대한 설명입니다.

• data-wow-delay =“_ s”: 일반적으로 사용자가 해당 위치로 스크롤하면 요소가 자동으로 나타납니다. 이 속성을 사용하면 _ 초 동안 애니메이션을 지연시킬 수 있습니다.
• data-wow-duration =“_ s”: 애니메이션을 _ 초 동안 만들 수 있으며, 이는 요소의 모양을 빠르게하거나 느리게하는 데 유용합니다.
• data-wow-iteration =“_”:이 속성을 사용하면 애니메이션이 페이지에서 정적으로 변하기 전에 _ 번 애니메이션을 반복하거나 반복 할 수 있습니다.
• data-wow-offset =“_”:이 속성을 사용하면 애니메이션이 애니메이션되기 전에 브라우저 가장자리에서 _ 픽셀을 시작합니다.

animate.css 및 WOW.js에 대한 대체 애니메이션 라이브러리

Bounce.js

Bounce.js는 웹 사이트를위한 멋진 CSS3 및 자바 스크립트 애니메이션을 단 몇 분 만에 만들 수있는 사용하기 쉬운 도구입니다. 개발자는 Bounce.js 웹 도구에서 다양한 애니메이션 목록을 실험하여 정적 키 프레임을 생성하고 웹 브라우저에서 직접 애니메이션을 사용자 지정할 수도 있습니다. 애니메이션이 표준을 충족하면 사이트에서 직접 CSS 코드를 내보내고 프로젝트에 붙여 넣을 수 있습니다. 그런 다음 웹 브라우저에서 만든 애니메이션을 사용하여 HTML 문서의 요소에 직접 적용 할 수 있습니다. 웹 도구는 언제든지 편집하려는 경우 새 웹 브라우저에서 애니메이션에 액세스 할 수있는 고유하고 단축 된 URL을 생성합니다.

Javascript로 애니메이션을 만들고 프로젝트에 Bounce.js 라이브러리를 설치하는 방법에 대해 자세히 알아 보려면 Bounce.js 라이브러리를 설치하는 지침을 따르십시오. Github 사이트.

애니메이션.js

또 다른 인기있는 애니메이션 라이브러리는 Anime.js로 CSS 속성, Javascript 개체, SVG 및 DOM 속성을 활용하여 인상적인 애니메이션을 만듭니다. Julian Garnier의 컬렉션에는 자신의 사이트에 직접 추가 할 수있는 수십 개의 매끄러운 애니메이션이 있습니다. Anime.js Codepen 컬렉션에서 Anime.js로 만든 다양한 애니메이션을 볼 수 있습니다. WOW.js와 달리이 애니메이션 라이브러리는 사이트에서 HTML 요소를 애니메이션하는 데 반드시 사용되는 것은 아닙니다. 오히려 Anime.js는 웹 사이트의 시각적 인 매력을 더하기 위해 별도의 애니메이션 "일러스트"를 만드는 데 사용됩니다. 내가 가장 좋아하는 것 중 일부는 Garnier의 선 그리기 애니메이션 그리고 레이어드 애니메이션 데모. Anime.js 라이브러리를 프로젝트에 추가하려면 npm을 통해 설치할 수 있습니다.

Anime.js 사용에 대한 지침 및 설명서를 Github 사이트.

Hover.css

Hover.css는 애니메이션 요소 위로 마우스를 가져 가기 만하면 웹 사이트에서 눈길을 끄는 효과를 생성합니다. 이 애니메이션 라이브러리를 사용하여 버튼, 로고 또는 이미지와 같은 일반적인 2D 요소에 더 멋지게 추가 할 수 있습니다. Hover.css 웹 사이트에서 마우스를 각 버튼 위로 가져가 배경, 2D, 그림자 및 윤곽선 전환과 같은 다양한 애니메이션을 찾아보고 테스트 할 수 있습니다. 하나 또는 몇 개의 Hover.css 애니메이션을 사용하려는 경우 파일을 다운로드하고 특정 애니메이션을 자신의 스타일 시트에 복사 / 붙여 넣기 만하면됩니다. 그러나 많은 Hover.css 애니메이션을 사용하려는 경우 기본적으로 Hover.css 스타일 시트를 설치하고 HTML 문서에 연결하는 동일한 절차를 따를 수 있습니다. 모든 Hover.css 효과에 액세스하여 사이트의 적절한 HTML 요소에 애니메이션을 적용 할 수 있습니다.

Hover.css 설치 및 사용에 대한 특정 지침 및 설명서를 보려면 공식 Github 사이트.

Typed.js

상징적 인 타자기 또는 타이핑 효과를 만들기 위해 웹 개발자에게 인기있는 옵션은 Typed.js를 사용하는 것입니다. 많은 웹 사이트에서이 애니메이션 라이브러리를 사용하여 인기있는 그룹 작업 영역 플랫폼 인 Slack을 포함하여 페이지에 문자열 타이핑 효과를 만듭니다. npm을 통해 Hover.css 라이브러리를 설치하거나 CDN 파일을 HTML 문서에 연결하기 만하면됩니다. 본질적으로 하나 태그를 사용하면 타자기 효과로 HTML 텍스트 태그에 애니메이션을 적용 할 수 있습니다. 충분히 조정하면 웹 사이트에 더 고급 타이핑 효과를 만들어 더욱 놀라운 효과를 얻을 수 있습니다. 예를 들어, 컴퓨터가 입력 할 때 일시 중지하는 효과 나 단어의 문자를 삭제하는 효과를 만들 수 있습니다.

공식 Github 사이트 개인 취향에 맞게 타이핑 애니메이션을 사용자 정의 할 수있는 방법에 대한 모든 소스 코드와 자세한 문서가 포함되어 있습니다.

CSShake

제목에서 알 수 있듯이이 CSS 라이브러리는 웹 사이트의 모든 HTML 요소를 "흔드는"애니메이션 모음입니다. 이 기발한 애니메이션은 웹 사이트의 특정 이미지 나 섹션에 관심을 끌고 싶은 경우에 적합합니다. 또한 웹 사이트의 요소를보다 상호 작용 적으로 만들어 항상 프런트 엔드 개발에 도움이됩니다. CSShake 웹 사이트에서 페이지의 여러 요소 위로 마우스를 가져 가서 다양한 흔들림 애니메이션을 실험 할 수 있습니다. CSShake Github의 소스 코드에는 사용자 지정 흔들기 애니메이션을 만드는 방법을 설명하는 자세한 문서도 포함되어 있습니다. 문서를 읽고 jQuery 속성을 이해하고 조정하는 방법을 배워야합니다.

자신의 프로젝트에 CSShake를 설치할 준비가 되었으면 다음의 설치 지침을 따르십시오. Github 사이트.

CSS flexbox 및 고급 CSS 선택기 소개

CSS Flexbox (또는 Flexible Box Layout)은 특히 여러 장치 크기 및 반응 형 웹 디자인으로 작업 할 때 웹 페이지의 많은 레이아웃 문제를 해결하기 위해 CSS3 사양에 최근에 추가되었습니다. 최근 CSS는 grid 속성은 복잡한 그리드 기반 레이아웃을 만들 수 있습니다. flexbox 일반적으로 사용할 때보 다 훨씬 적은 코드로 더 큰 레이아웃 내에 작은 구성 요소 그룹을 배치하는 데 더 나은 선택입니다. grid. 이 게시물은 일반적인 레이아웃 문제에 대한 flexbox 속성 사용에 대한 간단한 소개를 제공합니다.

display: flex

flexbox를 만드는 첫 번째 단계는 display: flex 속성을 그 안에있는 모든 플렉스 항목의 컨테이너 역할을하는 부모 요소에 추가합니다.

대부분의 레이아웃에는 추가 속성을 사용해야합니다. 이 속성 만 사용하여 간단한 2 열 레이아웃을 만들 수 있습니다.

예를 들어, 우리는 2 div 요소를 서로 겹쳐 쌓은 다음 요소를 추가하여 2 열 레이아웃으로 변환합니다. display: flex 재산:

원래 코드:

HTML

 

CSS:

#컨테이너 {
    높이 : 600px;
    폭 : 800px;
}
# column1 {
    배경색 : 파란색;
    높이 : 300px;
    폭 : 400px;
}
# column2 {
    배경색 : 녹색;
    폭 : 400px;
    높이 : 300px;
}

 

Flexbox가있는 CSS:

#컨테이너 {
    높이 : 600px;
    폭 : 800px;
    디스플레이 : 플렉스;
}
# column1 {
    배경색 : 파란색;
    높이 : 300px;
    폭 : 400px;
}
# column2 {
    배경색 : 녹색;
    폭 : 400px;
    높이 : 300px;
}

 

flex-direction

플렉스 컨테이너의 요소 흐름에 대한 추가 제어를 추가 할 수 있습니다. flex-direction 특성. 기본적으로 플렉스 컨테이너 내의 모든 요소는 row 이 속성을 다음 값으로 설정할 수도 있지만 왼쪽에서 오른쪽으로 column, row-reverse or column-reverse.

간격 및 정렬 조정 justify-content

종종 컨테이너 안에있는 요소가 차지하는 공간보다 더 많은 공간이 있으므로 특정 방식으로 요소의 간격을 정당화하고 싶을 것입니다. 기본적으로 플렉스 컨테이너 내의 모든 요소는 컨테이너의 맨 처음에 정렬됩니다 ( flex-start)하지만 다른 다양한 옵션이 있습니다. 실제 위치는 설정에 따라 달라질 수 있습니다. flex-direction: 방향이 다음과 같이 설정된 경우 row 그때 flex-start 컨테이너의 왼쪽 끝까지 표시하고 column 컨테이너의 맨 위를 나타냅니다. flex-start.

원래 코드 예제로 돌아가서 width 우리 컨테이너의 다른 부분을 더 잘 보여주기 위해 justify-content 설정.

justify-content: center 모든 요소를 ​​열 중앙에 직접 배치합니다.

 

#컨테이너 {
    높이 : 600px;
    폭 : 1000px;
    디스플레이 : 플렉스;
    정당화 내용 : 센터;
}
# column1 {
    배경색 : 파란색;
    높이 : 300px;
    폭 : 400px;
}
# column2 {
    배경색 : 녹색;
    폭 : 400px;
    높이 : 300px;
}

 

justify-content: flex-end 반대입니다 justify-content: flex-start, 컨테이너의 맨 끝에 요소를 배치합니다.

justify-content: space-between 컨테이너의 각 끝에 모든 요소를 ​​배치하고 컨테이너 중앙에 남아있는 공간을 남겨두고 내부의 추가 요소 주변에 남겨 둡니다 (요소가 3 개 이상인 컨테이너의 경우).

justify-content: space-around 마치 spae-between, 컨테이너 맨 끝에 추가 공간이 있지만 :

그러나 더 높은 수준의 특이성을 가진 요소를 대상으로하기위한 다른 많은 고급 선택기가 있습니다. 작업에 적합한 선택기에 익숙해지는 것은 CSS 학습의 가장 중요한 측면 중 하나입니다. 이 게시물에서는 요소를 타겟팅하는 데 가장 유용한 고급 선택기를 강조합니다.

자식 선택자

자식 선택기는 서로 중첩 된 요소를 대상으로하는 데 사용됩니다. 하위 선택기에는 하위 선택기와 직접 하위 선택기의 두 가지 종류가 있습니다.

하위 선택자

하위 선택자는 상위 요소의 중첩 위치에 관계없이 지정된 요소 (또는 요소 그룹)를 대상으로 지정하는 데 사용됩니다. 예를 들면 :

.컨테이너 p

 

두 인스턴스를 모두 타겟팅합니다. p 다음 HTML의 요소 :

이것은 단락입니다 이것은 더 아래에 중첩 된 또 다른 단락입니다.

 

직접 자식 선택자

상위 요소에서 다음 수준 아래에있는 요소 만 대상으로 지정하려는 경우 Direct Child 선택기가 사용할 수 있습니다.

.container> p

 

첫 번째 만 선택합니다 p 다음 HTML의 요소 :

Direct Child 선택기가 대상으로하는 단락입니다. 이것은 Direct Child 선택기의 대상이 아닌 또 다른 단락입니다.

 

형제 선택자

일반 형제 선택자

일반 형제 선택자는 첫 번째 형제 다음에 나타나는 동일한 중첩 수준에있는 모든 요소를 ​​선택합니다. 예를 들면 :

h1~div

 

언급 된 2 개를 타겟팅합니다. div 뒤에 나타나는 요소 h1, 그러나 그 이전의 것 또는 추가 레벨에 중첩 될 수있는 것은 아닙니다.

단락 제목 이 div가 타겟팅됩니다. 다른 단락 이 div도 타겟팅됩니다.

 

인접한 형제 선택자

인접 형제 선택기는 표시되는 요소를 대상으로하는 데 사용됩니다. 직접 주어진 요소 뒤에. 예를 들면 :

h1 + 피

 

대상은 p 요소 바로 뒤에 h1:

... ... 이 단락은 대상이됩니다. ... ...

 

의사 클래스

이전 CSS 선택기 게시물에서 우리는 :hover 선택자. 그러나 다음과 같은 많은 다른 의사 클래스가 있습니다. :link, :visited, :active 등을 포함합니다.

스타일을 a 아직 방문하지 않은 링크는 :link 선택자:

a : link {색상 : 녹색; }

 

stlye하려면 a 방문한 링크를 사용하려면 :visited 선택자:

a : 방문한 {color : blue; }

 

:active 선택자는 사용자가 요소를 클릭하는 것과 같이 요소에 참여할 때마다 사용할 수 있습니다.

.click-me : active {테두리 반경 : 50 %; }

 

:focus 사용자가 마우스 또는 키보드 클릭을 통해 입력 한 양식 요소와 같이 요소에 "포커스"가있을 때마다 사용됩니다.

a : focus {높이 : 120 %; }

결론

이 게시물에서 유용한 CSS 트릭을 찾으십니까? 아래에 귀하의 의견을 공유하십시오.