주의: 본 튜토리얼을 진행하려면 기초적인 HTML 및 CSS에 대한 이해가 필요합니다. 제공되는 도움말과 소스 코드 이외의 추가적인 기술지원은 제공하지 않습니다.
브라우저 화면을 꽉 채우는 비주얼섹션에 움직이는 애니메이션 아이콘을 추가하여, 방문자로 하여금 페이지 하단에 추가 콘텐츠가 있음을 알릴 수 있습니다. 이 튜토리얼에서는 코드를 사용해 애니메이션 스크롤 다운 아이콘을 제작하는 방법을 소개합니다.
이 튜토리얼을 진행하려면, 스크롤 다운 알림 아이콘으로 사용할 이미지가 필요합니다. 웹디자인에 사용할 커스텀 이미지는 게시판을 활용할 수 있습니다. 게시판에 커스텀 디자인 아이콘을 올리고, 해당 아이콘의 이미지 주소를 획득하는 방법은 아래 도움말을 참고해 주세요.
비주얼섹션을 추가하고 꾸며줍니다.
디자인 모드에 접속합니다.
왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭하고, 비주얼섹션을 추가할 메뉴로 이동하거나, 새로 생성합니다.
왼쪽 상단 위젯 추가 ＋ 아이콘을 클릭합니다.
비주얼섹션을 클릭하고, 비주얼섹션을 꾸며줍니다. 비주얼섹션 활용방법
비주얼섹션 바로 아래 새로운 빈 섹션을 추가합니다.
비주얼섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 빈 섹션추가를 클릭합니다.
추가한 섹션의 섹션ID 값을 확인 후 복사합니다. 섹션ID 확인방법참고: 섹션ID는 아래 4단계에서 아이콘 클릭 시 이동할 링크 삽입에 사용됩니다.
빈 섹션의 정중앙에 위치한 위젯 추가 ＋ 아이콘을 클릭합니다.
코드 위젯을 클릭합니다.
코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.
아래의 코드를 복사합니다
HTML위에서 복사한 코드를 코드 설정 빈 칸에 붙여넣습니다.
다음 도움말을 참조하여, 붙여넣은 코드를 내 사이트에 맞게 수정합니다.
아이콘은 위, 아래로 움직이도록 제작되었습니다. animation-duration 속성을 변경해, 아이콘의 상하 이동속도를 조절할 수 있습니다.
이 코드는 아이콘이 1회 이동하는 데 소요되는 시간이 1초(1s)로 지정되어 있습니다.
더 빠르게, 또는 느리게 설정하려는 경우 animation-duration 속성을 초(s) 단위로 변경해 주세요.
아이콘은 프레임 단위로 움직입니다. @keyframe scrlDwnIndc 항목에서 % 단위로 이동할 위치를 픽셀(px) 단위로 지정해 주세요.
0%는 아이콘 이동 시작점을 가리키며, 100%는 끝나는 종료점을 가리킵니다. 삽입하신 비주얼섹션의 높이에 따라 숫자를 변경합니다.
의도하지 않은 이상 자연스러운 반복 애니메이션을 위해 시작점(0%)과 종료점(100%)은 같은 값으로 지정하실 것을 권장드립니다.
남은 프레임 구간은 자유롭게 지정해 주세요.
아이콘 클릭 시 비주얼섹션 바로 아래 위치한 섹션으로 이동하도록 섹션 링크(앵커)를 삽입할 수 있습니다.
참고: 만약 링크를 추가하지 않는 경우 따옴표("") 사이에 javascript:; 를 입력해 주세요. 링크가 작동하지 않게 됩니다.
href 속성에 /메뉴URL#섹션ID를 삭제합니다.
/를 입력하고, 현재 메뉴URL을 입력합니다. 이후 띄어쓰기 없이, 위 2단계에서 복사한 섹션ID 값을 붙여넣습니다. 메뉴URL 확인방법
섹션 링크 입력을 완료하면 다음처럼 코드가 입력됩니다.참고: 아래 주소는 예시입니다. 메뉴URL 및 섹션ID는 작업 중인 사이트마다 다릅니다.
코드에 작성된 이미지주소를 삭제하고, 삽입할 이미지 주소를 입력합니다.
삽입한 아이콘의 크기를 조절할 수 있습니다. 가로크기를 삭제하고, 원하는 크기를 픽셀(px) 단위로 입력합니다. 가로 크기만 입력하면, 세로 크기는 이미지 비율에 따라 자동으로 조절됩니다.
참고: 이미지 크기를 있는 그대로 사용하려면 가로크기 한글만 삭제하고 빈 칸으로 두면 됩니다.
수정을 완료하면 코드 설정 창 오른쪽 하단의 저장 버튼을 클릭해 적용합니다.
디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
스크롤 다운 알림 아이콘이 정상적으로 동작하는지 확인합니다.
문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.