Youna

슬라이드이펙트 07 - 버튼과 썸네일 만들어보기 슬라이드 이펙트 저번 시간에 이어서 버튼과 썸네일을 만들어서 움직일 수 있는 슬라이드 이펙트를 만들어 보았습니다. 버튼과 썸네일을 누를때마다 변하는 슬라이드 효과를 만들었습니다! HTML & CSS Javascript sliderEffect07 슬라이드 이펙트 : 썸네일 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next jeongyouna_@naver.com HTML&CSS HTML의 구조에서는 전체 main안ㅇ세 slider__wrap을 만들어 준 후 그 안에 img 와 thumb를 만들어 줍니다. 그리고 btn을 만들어서 그 안에 넘어갈 수 있는 버튼이 생길 수 있도록 이전버튼 prev와 다음버튼 next를 만들어 준 후 footer에..

슬라이드 이펙트06 -버튼과 닷메뉴를 사용해서 슬라이드를 움직여보기! 이번 슬라이드 이펙트는 버튼과 닷메뉴를 사용해서 슬라이드 왼쪽으로 움직여 볼 수 있도록 하겠습니다. HTML&CSS Javascript sliderEffect06 슬라이드 이펙트 : 좌로 움직이기(버튼, 닷메뉴) 1 2 3 4 5 6 7 HTML& CSS HTML구조에서 slider__btn 과 slider__dot을 추가해 줍니다. slider__btn안에 prev이전이미지와 next다음이미지로 넘어갈 수 있도록 구조를 만들어 줍니다. CSS로 넘어와서 btn과 dot에 필요한 속성들을 부여해서 btn은 양 사이드 가운데로 올 수 있으며 클릭할 때 바뀔 수 있도록 설정해 줍니다. dot은 동그랗게 만들어 준 후 가운데로 올 수 있도록..

슬라이드 이펙트 05 - 아래에서 위로 연속적으로 움직이는 효과! 저번 시간에 이어서 슬라이드가 아래에서 위로 연속적으로 움직일 수 있는 효과를 만들어 보았습니다! 저번에 만들었던 3번 효과를 참고하여서 함께 만들어 보도록 하겠습니다! https://younajeong.tistory.com/67 슬라이드 이펙트 03 - 아래에서 위로 올라오는 슬라이드 효과! 슬라이드 이펙트 03 아래에서 위로 올라오는 슬라이드 효과! 1,2번을 토대로 이번에는 아래에서 위로 올라는 슬라이드 효과를 주겠습니다! 이펙트 03번 같은 경우에는 02번의 HTML그대로 가져와서 C younajeong.tistory.com HTML& CSS Javascript sliderEffect05 슬라이드 이펙트 : 아래에서 위로 움직이기(..

슬라이드 이펙트 04 "왼쪽으로 연속적으로 움직이는 이미지 슬라이드 만들기" 슬라이드 이펙트 04번은 왼쪽으로 연속적으로 움지이는 이미지 슬라이드를 만들어 보았습니다. 저번에 만들었던 왼쪽으로 움직이는 슬라이드 이펙트 02번을 참고해서 이번에는 연속적으로 움직일 수 있는 슬라이드 이펙트를 사용해 보았습니다. 슬라이드 이펙트 02 참고하기 https://younajeong.tistory.com/66 슬라이드 이펙트02 - 좌에서 우로 넘어가는 이미지 슬라이드효과! 슬라이드 이펙트 02 - 왼쪽에서 오른쪽으로 넘어가는 슬라이드효과 슬라이드 이펙트 01번과 다른느낌으로 이번에는 왼쪽에서 오른쪽으로 넘어가는 슬라이드 효과를 만들어 보았습니다! 슬라이 younajeong.tistory.com HTML & CSS ..

슬라이드 이펙트 03 아래에서 위로 올라오는 슬라이드 효과! 1,2번을 토대로 이번에는 아래에서 위로 올라는 슬라이드 효과를 주겠습니다! 이펙트 03번 같은 경우에는 02번의 HTML그대로 가져와서 CSS부분과 JAVASCRIT 부분을 조금씩 수정해주면 완성이 됩니다! 슬라이드 이펙트 02 보러가기 https://younajeong.tistory.com/66 슬라이드 이펙트02 - 좌에서 우로 넘어가는 이미지 슬라이드효과! 슬라이드 이펙트 02 - 왼쪽에서 오른쪽으로 넘어가는 슬라이드효과 슬라이드 이펙트 01번과 다른느낌으로 이번에는 왼쪽에서 오른쪽으로 넘어가는 슬라이드 효과를 만들어 보았습니다! 슬라이 younajeong.tistory.com HTML & CSS Javascript sliderEffec..

슬라이드 이펙트 02 - 왼쪽에서 오른쪽으로 넘어가는 슬라이드효과 슬라이드 이펙트 01번과 다른느낌으로 이번에는 왼쪽에서 오른쪽으로 넘어가는 슬라이드 효과를 만들어 보았습니다! 슬라이드 이펙트01 참고하기 https://younajeong.tistory.com/65 슬라이드 이펙트 01 - 이미지를 하나씩 보이는 트렌지션 효과를 줬어요! 슬라이드 이펙트 01 : 트렌지션 효과 이미지 여러장을 하나씩 보일 수 있는 트렌지션 효과를 만들어 봤습니다! reset /* reset */ @import url('https://webfontworld.github.io/hallym/Hallym.css'); @import url('https://webfon younajeong.tistory.com HTML & CSS J..

슬라이드 이펙트 01 : 트렌지션 효과 이미지 여러장을 하나씩 보일 수 있는 트렌지션 효과를 만들어 봤습니다! reset /* reset */ @import url('https://webfontworld.github.io/hallym/Hallym.css'); @import url('https://webfontworld.github.io/suncheon/Suncheon.css'); @import url('https://webfontworld.github.io/Poppins/Poppins.css'); @import url('https://webfontworld.github.io/kt/YUniverse.css'); @import url('https://webfontworld.github.io/TheJamsil..