제이쿼리로 만드는 이미지 슬라이더(Image-Slider) (1)

제이쿼리로 이미지 슬라이더를 만들어보자. 완성 결과물은 아래 동영상과 같다.

디자인은 신경쓰지 않았다, 원형 이미지가 왼쪽,오른쪽 버튼을 누를 시 이동하며 커지는 형식의 슬라이더이다. 

간단한 네비게이션도 제공하게끔 만들었다.(이미지 아래의 원형 index와 해당 이미지의 title)

이미지 슬라이더를 만들기 앞서, css와 html부터 살펴보자.

body 태그는 아래의 내용을 작성한다.

위의 태그까지 빠짐 없이 적었다면, 헤더(빨간색), 내용이 들어갈 컨테이너(파란색),

푸터(노란색), 푸터안에있는 네비게이션 공간(초록) 이렇게 4개로 공간이 분할된 걸 볼 수 있다.

태그를 동적으로 사용하기 위해 <div> 태그로 분할을 하였으며, 앞으로도 

동적 태그는 div태그만을 쓸 예정이다. css를 설명하자면, body 태그안에 있는 div 태그들의 class이름

에 맞춰 스타일을 정의 한 것이다. class이름을 쓸때는 css에 .(클래스이름) id이름을 쓸때는 #(id이름) 이렇게

접근하면 되겠다. 다음 포스팅에서 계속 이어 나가겠다.