Portfolio 03. Slider Design

01. Slider 만들기

샘플 페이지

지환아, 샘플을 보면서 하자. 이 사람들이 샘플로 만들어놓은 걸 열어놓고, 같이 만들면 돼.
샘플 확인

Step 1. 템플릿 다운로드

1. ‘그림1’의 1번 ‘Slider Revolution’을 클릭한 뒤,

2. ‘그림2’의 3번 ‘New Module from Template‘을 클릭한다.

3. 그런 뒤, ‘그림3’ 화면이 나오면, 마음에 드는 slide를 골라본다.

4. 그 가운데 아빠는 아래 3개가 마음에 든다.

  1) Distortion AddOn

  2) Parallax Zoom Slices

  3) Space Opera

5. 그러면, 일단 ‘그림3’의 4번 ‘Search Module Templates‘ 입력란에 ‘Distortion Addon’을 입력하면,

6. ‘그림4’의 5번 처럼 검색된다.

7. 이때, 5번 위에 마우스 커서를 갖다 대면,

8. ‘그림5’ 처럼 변하는데, 6번 ‘+’ 기호를 클릭하면,

9. ‘그림6’처럼, 아래에 7번 처럼 ‘Search Modules…’ 밑에 추가한 모듈이 보인다.

Step 2. 슬라이드 만들기

[편집기 열기]

1. ‘그림1’의 1번 ‘이미지’ 위에 마우스 커서를 갖다 대면,

2. ‘그림2’ 처럼 되는데, 여기에서 2번 ‘연필’ 모양 즉, ‘Open in Editor(편집기 열기)’를 클릭한다.

3. 그러면, ‘그림3’과 같은 화면이 보인다. 

[글씨 위치 변경]

4. 여기에서, 3번 글씨 부분에 마우스 포인터를 갖다 대면, 

5. ‘그림4’의 4번 처럼 마우스의 포인터가 ‘+’ 모양으로 변한다.

6. 계속 마우스를 누른 채로 원하는 위치로 옮긴다.

[글씨 크기 조절]

7. ‘그림5’ 처럼 위치를 바꾼 뒤에 글씨 크기가 너무 크면, 5번 가장자리 부분을 마우스 포인터로 누른 채로 크기를 조절하면 된다.

[내용 변경]

8. 내용을 변경하려면, ‘그림7’의 1번 처럼 글씨 위에 마우스 포인터를 갖다 대면 ‘+‘ 기호로 변하는데, 이때 마우스 우(오른쪽)클릭하면, 

9. 오른쪽 아래에 추가 편집 메뉴가 팝업되는데, 여기에서 8번 ‘Duplicate(복제)’를 클릭한다. 

10. 이때, 복제하면 바로 그 위에 복제되기 때문에 그 글씨 윗부분을 다시 마우스 포인터로 갖다 대고 누른 채로 글씨를 이동하면, 복제한 게 나타난다. 

11. 이때 복제한 내용은 설명으로 내용을 많이 입력해야 되기 때문에 

12. 다시 글씨 부분에 포인터를 갖다 대면, 오른쪽에 ‘그림8’과 같이 ‘Font & Icon’ 설정 항목이 뜬다.

13. 여기에서 3번을 클릭하면, 오른쪽 아래에 폰트 크기 리스트가 나타난다.

14. 이때 4번 ‘300Light’을 선택한다.

15. 역시, 내용을 변경하려면, 글씨 위에서 더블클릭한다. 

16. 그러면, 또 오른쪽에 ‘그림9’ 처럼 입력란이 보인다. 여기에서 내용을 수정/추가하면 된다.

17. 내용을 입력하면, 줄바꿈이 안되어서, 3줄 마다 <p></p>를 삽입했다.

18. 될 수 있으면, 인터넷 화면에 내용을 보여줄 때는 3줄 마다 한 줄씩 띄어쓰기를 해줘야 가독률이 높아진다.

19. 그렇지 않으면, 내용이 많아 보여서 아무도 안 읽는다. 

20. 수정작업 하면서, 오른쪽 설정 메뉴에서 ‘그림7’의 1번 ‘Save’와 ‘Preview’를 수시로 눌러가면서 작업해야 된다.

21. 그래야 작업한 게, 날라가지 않는다. 

22. 일단 Save 하고 빠져 나온다.

23. ‘그림8’의 2번 ‘Portfolio’에서 ‘Add New’를 클릭 한 뒤,

24. 3번 ‘+’ 기호를 클릭하면, 

25. ‘그림9’ 선택 창이 나오는데, 여기에서 5번 ‘Slider Revolution’을 클릭한다.

26. 그러면, ‘그림10’처럼 조금 전 작업했던 슬라이드가 보인다.

27. 이 슬라이드 위에 마우스를 갖다 대면, ‘+’ 기호가 보이는데 클릭하면, Portfolio에 입력된다. 

About The Author

회원님이 좋아하실 내용 You might be interested in

평가 글을 남겨주세요

error: Content is protected !! 이 내용은 저작권법에 따라 무단복제 및 배포 허용이 불가합니다.