순식간에 간단한 CSS 애니메이션 효과! Shortcodes Ultimate 플러그인.

워드프레스를 하다보면 아무것도 몰랐을때는 기본적으로 제공하고 있는 기능들을 사용하다가 조금씩 아는 영역을 늘려나가면서부터는 홈페이지를 자신의 스타일로 바꾸고 나가고 싶어질 것입니다.

기본적으로 CSS 커스텀을 하는데 사용되는 플러그인들이 많지만 전 html JS와 함께 커스텀이 가능한 Custom CSS & JS를 사용하고 있습니다.

CSS 코드를 잘 안다면야 구상하고 코드를 찾고 고치고 하면서 뚝딱 되겠지만, 코드를 잘 모른다면 기능 하나하나 찾으면서 구현하려면, 또 검색해도 자신이 원하는 기능들이 잘 나오지 않는다면 시간이 무척 많이 걸릴것입니다.

그리고 그중에서 애니메이션 효과는 특히나 구현하기가 더 까다로울것입니다. 하지만 클릭 몇번만으로 애니메이션 기능들과 그 외도 무척이나 다양한 CSS기능들을 사용할 수 있는 Shortcodes Ultimate 플러그인은 아주 유용하게 쓰일것입니다.

간단한 기능들은 아래에서 소개해드리겠습니다.

플러그인 설치

플러그인 -> 새로추가 -> 검색(Shortcodes Ultimate) -> 설치 click -> 활성화 click 을 합니다.

활성화 버튼을 클릭하면 위와같은 화면이 나옵니다. 그러면 허용 및 계속을 클릭해 줍니다.

소제목 CSS 수정

페이지 추가 글쓰기 등으로 들어가면 저는 마크다운 플러그인을 사용하기 때문에 위와 같은 화면이 나오는데, 일반적으로 글쓰시는 분들은 기본편집기에서 []Insert shortcode를 찾으실 수 있으실 겁니다. 버튼을 클릭하면, 아래와 같은 화면이 나옵니다.

저는 글의 소제목부터 꾸며보겠습니다. 소제목 CSS인 Heading을 클릭합니다.

위의 글자 크기 스타일등 다양한 옵션을 선택하고 Live preview를 클릭하면 Preview에 어떤 스타일로 나오는지 미리 볼 수 있습니다.

애니메이션 CSS 적용

이번에는 []Insert shortcode를 클릭하고 Animation을 클릭합니다.

그러면 위와 같이 다양한 옵션들을 볼 수 있습니다. 애니메이션이 나와서 끝날때까지의 효과시간 설정등도 할 수 있고, 몇번의 클릭만으로 순식간에 애니메이션 CSS가 적용됩니다. 저는 boouchln 효과를 적용해 봤습니다.

그럼 아래와 같이 코드가 즉시 적용되는것을 미리보기로 확인하실 수 있습니다.

마무리

어떠셨나요? 굉장히 간단하게 CSS 애니메이션이 적용되지 않았나요? 워드프레스 Shortcodes Ultimate플러그인을 이용하여 CSS 애니메이션 적용하는 방법이었습니다. 이 외에도 위에서 봤다시피 다양한 메뉴들이 있습니다. 이를 이용하여 나만의 개성이 살아있는 워드프레스 글을 써보시기 바랍니다.