윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 72강 - 이미지 슬라이더[2] > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 72강 - 이미지 슬라이더[2]

페이지 정보

조회: 1,150

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

윤인성님의 javascript강의 청각장애인을 위한 자막

그럼 이 정강이 이어서 한번 이미지 슬라이더 의 코 부분을 구현해 보도록

하겠습니다
일단 이미지 태그를 쭉 입력을 하도록 할 텐데요 이미지 태그를
지난번에 2점 jpg 라던지 하는 식으로 a 부터 아이까지 입력을
했었거든요 그래서 그 녀석들을 쭉 추가 해 주도록 하겠습니다 이렇게 a
부터 h 까지 확 입력을 했는데요
이렇게 입력을 하고 코드를 실행하게 되면 지금 화면처럼 이미지들이 쭉
들어가는 모습을 확인할 수 있습니다
이어서 실제 제일제당 사이트 같은 경우에는 이 녀석들이 a 태그로 감싸져
있죠
a 태그 a7x 를 샵으로 주고
녀석들을 한번 감싸 주도록 하겠습니다
참고적으로 이 얼어 줄 선택은 이전의 또 설명을 했는데 계속해서 메일로
문의를 주시더라구요
i 특히 를 누르고 드래그 를 하신 다음에 쭉 입력을 해주시면 지금
화면과 같이 여러 줄이 한꺼번에 입력되는 모습을 확인할 수 있습니다
추가적으로 이 녀석들이 목록을 나타내는 것이기 때문에
ul 태그 와 li 태그로 감싸져 도록 하겠는데요
사실 항상 이걸 감쌀 때 보면은 왜 이런 짓을 해야 하냐 라고 생각하실
분이 있는데 일단 첫번째 이유는 이렇게 하는게 이해하기 쉽기 때문이고 요
두 번째는 html 표준적으로
뭐 옷들이 쉽게 인식할 수 있게 이 녀석들은 목록 으로 구성된 것이다
라고 표현할 해주는 거라고 생각을 해 주시면 좋겠습니다
어쨌거나 이 상태로 요 밖에 있는 녀석을 클래스 이름 뷰포트 라는
이름으로 div 태그를 만들어 감싸도록 하겠습니다
이렇게 용 감싸 주면 되겠죠 이 상태에서 실행을 하게 되면
ul 태그 와 li 태그로 감싸진 상태로 요 녀석들이 출력되는 모습을 볼
수 있습니다
현재 맞은 제로와 패딩 제로가 먹었는데요 요녀석을 제거하게 되면 앞쪽에
리스트 마크도 함께 붙는 모습을 볼 수 있습니다
따라서 li 에
리스트 스타일도 논으로 지정을 해서 리스트 마크도 제거 되게 만들도록
하겠습니다
어쨌거나 요 상태로 저장하고 실행하면 지금 화면과 같이 이미지가 쪽
출력되는 모습을 확인할 수 있습니다
그럼 이제 이 녀석들을 가로로 배치해서 화면에 한 거대한 띠를 하나
만들도록 하겠습니다
티를 스타일에서 지정해서 만들 수도 있겠지만 이 안에 있는 개수를 동적
으로 변할 수 있게 예를 들어서 요새 게 필요 없다라고 제거를 하면 이
크기에 맞춰서 이미지 슬라이더 가 만들어지게 모든 녀석들을 한번 제이쿼리
를 사용해서 표현해 보도록 하겠습니다
일단 좀 뷰포트 라는 녀석 아래에 있는 li 태그 개수를 확인하도록
하겠는데요
이점 뷰포트 데라 이라는 선택자를 잡고 이 녀석의 랭스 를 사용하게 되면
내부에 있는 li 태그의 개수를 알아낼 수 있습니다
그리고 추가적으로 이 하나하나에 이미 지낸
높이가 980 픽셀 되겠고 용
너비 강 음 너비가
980 이고 높이가 380 입니다 그래서 이렇게 입력을 하도록 하겠구요
이녀석을 사용해서 저 내부에 있는 녀석들의 크기를 잡아 주도록 하겠습니다
일단
점 뷰포트 아래에 있는 ul 태그의 css 를 조 섬 너비 래
너비 곱하기 5
랭스 를 해서
그 길이만큼 잡아 주도록 하겠고 0 두번째로
좀 뷰포트 아래에 있는 li 태그 들의 css 메서드를 사용해서
너비를 너비만큼 주고 높이를 높이만큼 주도록 하겠습니다
추가적으로 안에 있는 li 태그 들의 솔로 속성을
레프트 를 지정을 해서 왼쪽으로 부쩍 지정을 해 보도록 하겠습니다
이렇게 지정을 하고 실행을 해 주시게 되면 이미지가 거대한 뛰 로
만들어져서 요렇게 보이는 모습을 확인할 수 있습니다
따라서 이제 화면에 출력할 부분만 딱 남기고 나머지 부분을 안 보이게
만들어 주면 되겠습니다
듀 포터라는 클래스 이름을 가진 div 태그를 잡아주시면 되겠구요
이녀석 ncs 를 사용해서 너비를 마찬가지로 너비만큼 그리고 너 피를
높이를 높이만큼 주고 그리고
오버 플로우를 시즌 으로 적어보도록 하겠습니다
요러한 형태로 코드를 주게 되면 참고적으로 다른 녀석들은 객체로 지정을
했는데 요 녀석만 문자열로 지정을 해서 이상하니까 변경 해 주도록 할게요
요렇게 입력을 하고 실행을 해 주게 되면 화면에서 요 부분만 출력되는
것을 볼 수 있습니다
실제로 내부에는 거대한 띠가 만들어져 있는데 오버플로우 넘치는 부분을
히든 으로 좋기 때문에 그 부분이 가려져서 이외 각 부분이 보이지 않게
됩니다
그럼 기본적인 초기 지정은 요렇게 해주면 되겠고 용
현재의 동영상 강의 나서 한 화면에 다 담기 힘드니까 요 녀석들을 일렬로
적어서 조금 다른 코드를 같이 볼 수 있도록 하겠습니다
이어서 지정할 거센 우리가 함수를 하나 만드는 건데요 이 함수의 이름은
무브 트라고 지정을 하도록 하겠습니다 뭐 부터 에는 매개 변수로 인덱스를
넣게 되구요
예를 들어서 무 부토 제로 라고 하면 제로 위치로 이동을 하게 되고
우분투 일 이라고 입력하면 첫 번째 위치로 우분투 라고 하면 두 번째
위치로 이동하게 만들도록 하겠습니다
여기서 사실 굉장히 간단한 수학적 공식이 사용이 되는데요
일단 간단하게 코드를 입력을 해 보고 어떠한 식으로 진행이 되는지 보도록
하겠습니다
일단 내부에 있는 쭉 포트 아래
ur 텐 ul 태그의 css 에 성
마진 레스트 를 - 100 이라고 입력해 보도록 하겠습니다
사실 실제 cj 제일제당 쌓인 스트 는 트랜스폼 이라는 속성을 사용을
했는데요
트랜스 폼 속성 을 사용하게 되면 굉장히 예전 브라우저에서 이녀석이
동작하지 않게 되어 애가 인터넷 익스플로러 에이스에서 그래서 우리는 좀
범용적으로 사용할 수 있는 마신 레스트 를 알아보도록 하겠습니다
어쨌거나 맞은 넥스트를 - 백이라고 지정을 하고 실행을 하게 되면 -
100 만큼 왼쪽으로 땅 겨진 모습을 확인할 수 있습니다
추가적으로 뭐 - 300 이라고 입력을 하게 되면 조금 더 당겨 지겠죠
그래서 이 녀석을 얼만큼 당겨야 g 다음 페이지로 이동할 수 있는지를
생각해야 되는 데요
현재 이미지의 너비가 982 니까 - 너비만큼 지정을 해야지 하나가
옮겨지게 됩니다
마찬가지로 뭐 여기에 곱하기 2를 하게 되면 또 다음 페이지가 나오게
있구요
3 을 고 파게 되면 또 다음 페이지가 나오게 될 것입니다
따라서 이제 뭐 다 끝났죠 우분투 라는 녀석의
애니메이트 를 실행을 하게 되고 이 애니메이트 는 - 언어 b 곱하기
인덱스를 지정을 하면 되겠습니다
참고적으로 인덱스를 지정하지 않으면 인덱스의 아무 값도 들어오지 않아서
언 디파인 드가 지정이 될 텐데요
어떠한 수적 곱하기 언 디파인 들을 하게 되면 나러 넘버 나니 나오기
때문에 잠시 옆에서
인덱스가 만약에 지정되어 있지 않으면 인덱스가 없으면
인덱스를 1로 초기화 하는 부분을 넣어 주도록 하겠습니다
참고적으로 이전에 강의를 잘 드셨던 분이라면 걸
요러한 형태의 짧은 조건문 으로도 사용할 수 있다는 걸 알 수 있을
겁니다
어쨌거나 이러한 형태로 매개 변수를
뭐 안하도록 하겠구요 모형으로 지정 하도록 할게요
그리고 이외의 경우에는 애니메이션을 적용을 해서
이동하게 만들도록 하겠습니다
그리고 간단한 테스트를 위해 성
윈도우 객체의 무브 투 라는 녀석의 뭐 붙은 이미 있으니까
무 부 슬라이더 라는 녀석의 무 부추 를 한번 넣어 보도록 하겠습니다
따라서 무브 슬라이더 라는 이름으로도 우분투 함수를 호출할 수 있게 될
텐데요
이러한 형태로 입력을 하게 되면
예를 들어서 크롬 개발자 도구 를 띄운 상태로
검사 를 사용했을때 콘솔에 성
무브 슬라이더로 이를 입력을 하게 되면 첫 번째 위치로 이동을 하고 3월
입력을 하면 세 번째 위치로 이동을 하고 뭐 6 을 입력하게 되면 6번째
위치 등으로 이동하는 모습을 확인할 수 있습니다
뭐 추가적으로 뭐 여기에서 다양한 보안 을 생각해 보실 수 있는데요
뭐 인덱스를 인덱스
나머지 랭스 로 지정을 하게 되면 길이만큼 나머지가 들어가서 10 을
입력하고 한 모 30 을 입력해도 이미지에 맞게 뭐 적당하게 이동 하게
되겠죠
그래서 이러한 식으로 구현을 하기만 하면 이미지 슬라이더 의 기본적인
코어 부분이 다 완성 된다고 생각을 해 주시면 됩니다
어쨌거나 그냥 보시게 되면 버튼을 누르면 이동을 하게 되어 이점
그래서 이 버튼을 한번 만들어 보도록 하겠습니다 뭐 디자인은 다음
강의에서 얻도록 하고요
가장 기본적인 코어 부분만 넣도록 하겠습니다
일단 뭐 버튼을 위쪽에 다가 요러한 식으로 하나하나 만들어도 되겠는데요
현재 이 개수의
마음대로 변경함에 따라 서 버튼에 출력해 써도 자동으로 변하게 하고
싶으면 당연히 자바스크립트로 구현을 해야 합니다
그래서 일단 소 반복문을 돌려서 랭스 만큼 반복하게 하겠구요
여기에서 제이쿼리 를 사용해서
버튼 태그를 만든 다음에 이 내부의 텍스트를
아이로 입력하도록 하겠구요
요걸 클릭을 하게되면
내부에 성
뭐 부토 i 로 이동을 하게 하겠습니다
참고적으로 이전에 클로저 라는걸 들으셨던 분이라면 어 저러면 안 될 텐데
라는 생각을 하실 수 있는데요
왜 그런지 잠시 기의 살펴 보도록 하겠 구요 이어서 펜디 툴을 사용해서
간단하게 바디 태그 뒤쪽에 다가 이 녀석을 붙여 보도록 하겠습니다
코드를 저장을 하고 실행을 하게 되면 아래쪽에 0 1 2 3 5 6
7 8 이라는 버튼이 나오게 되겠구요
버튼을 누르면 아무 변화가 없는 것을 확인할 수 있습니다
왜 이런 문제가 생기지 할 때는 그냥 경고 참 같은걸로 한번씩 문제의
원인이 될 것 같은 부분에 출력을 해보면 됩니다
일단 얼얼 쳐 아이를 사용을 해서 아이를 출력해 보도록 하겠는데요
이렇게 코드를 작성을 하고 다시 실행해 본 뒤 클릭을 하면 어떤 녀석을
클릭해도 모두 9 라는 값이 나오는 것을 확인할 수 있습니다
9번째 로 이동을 하게 되면 우리 감
나머지 연산자 로렌스 만큼 나누기 때문에 9 나머지 구가 되서 결국
0번째 위치로 이동을 하기 때문에 아무 변화가 보이지 않는 것입니다
이 문제는 이전에 언급했던 클로저 때문인데요 이 문제를 해결하고 싶을
경우에는 이 변수를 목재를 해야 됩니다
뭐 복지 하는 방법은 이 녀석을 레 수로 소정을 하면 되겠고요
일단 가장 간단한 방법이죠
변경을 하고 실행을 하게 되면 버튼을 누를 때 해당 위치로
뿅뿅 움직이는 모습을 볼수 있구요 레티 워드 를 사용할 수 없는 곳에서
이거를 적용을 하고 싶으시면 함수를 하나 만드시고 이 함수를 과로로 감싸
신 다음에 자기 호출 함수로 만들어서 아이를 넣고 아이를 받은 뒤에 이걸
이 내부의 옮겨 주시면 됩니다
이러한 식으로 코드를 작성할 한뒤에 다시 실행을 해 보게 되면 이전과
마찬가지로 클릭을 했을때 이동하는 모습을 확인할 수 있습니다
어쨌거나 이미지 슬라이더 구현 완료 됐죠 그래서 요런 식으로 구현을
한다.고 생각을 해 주시면 되겠구요
추가적으로 제일제당 사이트에 있는 것처럼 데이터 타이틀이라는 속성을
넣어서 도 한번 진행을 해보도록 하겠습니다
일단 각각의 녀석에게
데이터 타이틀이라는 속성을 주도록 하겠구요 2 데이터 타이틀 속성 내부에
가 나 다 라 마 바 사 가 나 다 라 마 바
가 나 다 라 마 바 사 자 차 같아
하하하 가 나 다 라 마 바 상
아 자 창
카 타 파 5
라는 간단한 테스트용 글자를 넣어 보도록 하겠습니다
그리고 글자 출력을 위한 h1 태그도 하나 만들어 주도록 하겠구요
그리고 제일제당 사이트에서는
보시면 알겠지만 위쪽에 현재 클릭한 녀석이 몇 번째 인지 1부터 시작하는
인덱스로 도 표현이 되어 있습니다
그래서 인덱스를 출력할 수 있는 h2 태그도 하나 만들어 주고 있구요
위쪽에 있는 녀석은 인덱스 레이블이 라는 이름을 죽였고 아래쪽에 있는
녀석은 타이틀 레이블이 라는 id 속성을 부여해 주도록 하겠습니다
일단 간단하게 클릭을 하면 몇 번째 있는 li 태그를 추출한 다음에 그
안에 있는 데이터 타이틀 속성을 빼서 h1 에다가 놓고 인덱스 자체는
h2 에만 넣으면 됩니다
그래서 그럼 간단하게 점 점 뷰포트 내부에 있는 li 태그를 모두 찝 은
다음의 예슬 사용을 해서 몇 번째 걸 뽑을 지 아이를 통해서 뽑아주시면
되겠구요
이렇게 뽑은 아이의
htr 함수를 사용해서 뽑아 주시면 되는데요 이렇게 개다 이나 아니면
and xi 를 사용해서 뽑게 되면 이 녀석은 제이쿼리 객체가 아니라
그냥 자바스크립트 문서 객체 가 됩니다
따라서 이 녀석을 다시 한번 과로로 감싸줘서
제이쿼리 객체로 만들어 준 다음에 attr 함수를 사용해서 데이터 타이틀
속성을 뽑아 주도록 하겠습니다
일단 요 부분이 조금 미묘한 포인트 부분이라고 생각을 해 주시면
되겠습니다
이렇게 뽑으면 타이틀이 나오겠죠 이렇게 만들어진 타이틀을 h1 태그
안에다가
뭐 html 이다 던지 텍스트로 넣어 주면 될 겁니다
추가적으로 h2 태그에는 인덱스를 넣어주면 되겠는데요 이는 0 부터
시작하게 되죠 그래서 0닌
플러스 일을 해서 일부터 출력되게 만들어 주면 되겠습니다
추가적으로 이 앞에 문자열 0 을 더해서 패딩 할 주도록 하겠구요 요렇게
코드를 저장을 한 다음에
실행을 하게 되면 각각의 버튼을 클릭을 했을때
뭐 요 녀석을 클릭을 하게되면 가 나 다 가 출력이 되고 두 번째는 라
마 바
세번째는 사자 등의 내용들이 함께 출력되는 모습을 확인할 수 있습니다
뭐 사실 다 끝났는데 추가적으로 한 가지를 더 구현을 한다. 그러면 쉐딩
터 벌을 사용해서 현재
제일제당이 몇 초마다 실행이 되는지는 잘 모르겠지만 대충 1.5 초 마다
자동적으로 실행이 되도록 하겠습니다
천고 파기 1.5 를 하면 1.5 초 라는 1.5 초 마다 이 함수를
실행하게 될 거구요
커 렌트 인덱스 라는걸 일단 0으로 조성
커 렌트 인덱스를 1.5 초 마다 플러스 이러라고 무 v2 커 렌트
인덱스를 해서 현재 위치를 이동하도록 하겠습니다
추가적으로 e 동안 녀석도 클릭을 했을 때 아이를 변경을 하게 해서 그
다음 위치로 변경되게 하겠는데요
이러한 식으로 코드를 쪽 작성을 해주시면 참고적으로 보기가 힘들 거 기
때문에 지스트 에 함께 올려보도록 할게요
이런식으로 작성을 하게 되면 코드를 실행을 했을 때 일자 뭐 초마다
자동적으로 이동되는 모습을 확인할 수 있습니다
참고적으로 1.5 초 가 굉장히 빠르고 추가적으로 요 타이틀 변경 하는
부분도
여기보다는 사실 요 무 부트 함수 내부에 넣는 게 조금 더 좋겠네요
그래서 내부의 다 변경을 하고 아이 라는 녀석을
인덱스로 수정을 해서 사용을 해주면 됩니다
뭐 코렌 틴트 부분은 여기에다 넣어 주도록 하겠구요
아니지 위의 단어 또 뭐 상관 없겠네요
어쨌거나 요러한 축으로 코드를 구현을 하면 실행을 했을 때 여러가지
출력이 될 거구요
가장 마지막 부분에서 무 v20 일단 처음에 한번 호출해서 타이틀 등을
넣도록 하겠습니다
뭐 어렵지 않죠 읽어보시면 그래서 코드를 실행을 하면 0 1 가 나 다
가 나오구요
1.5 초 마다 화면 대 이동이 되고 내가 뭔가 눌렀을때 이동도 하는
모습을 확인할 수 있습니다
사실 1.5 쪽 너무 빠르기 때문에 5초로 주도록 할게요
5초로 주고 뭐 누르게 되면 다양한 형태로 이미지 슬라이더 가 이동하는
모습을 볼 수 있습니다
따라서 이렇게 코드를 작성을 해주시면 좋겠구요
참고적으로 아까 언급했던 게 왜 랭스 를 사용해서 자바스크립트 구로
구현을 하는 되용
만약에 필요에 따라서 요소가 없어지거나 요소가 더 추가되거나 하는 경우가
있을 거에요
요럴때 자바스크립트로 구현을 하게 되면 동쪽으로 이제 수가 변하기 때문에
실행했을 때 버튼이 두 개만 출력 되거나 하는 모습을 확인할 수 있습니다
따라서 조금 더 변화의 유동적으로 대처할 수 있다라고 생각을 해 주시면
되겠습니다
어쨌거나 굉장히 간단한 코드로 이미지 슬라이더 를 구현해 봤는데요
다음 강의에서는 이전에 짧았던 녀석들을 사용을 해서 이 앞뒤에 붙임으로써
디자인을 조금 더 예쁘게 해 보도록 하겠습니다