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

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

페이지 정보

조회: 1,109

본문

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

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

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

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

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 먼 3단 71 강기의

고형 이번 강의의 부터는 잠시 몇가지 연습을 해보도록 하겠습니다
일단 우리가 모방을 해볼 사이트는 cj 제일제당 에 사이트 되겠는데요
cj 제일제당 사이트에 들어가서 cj 제일제당 메인에 보시면 여러가지
요소가 있는 것을 확인할 수 있습니다
굉장히 다양한 요소들이 있는데 몇가지 살펴보도록 하겠습니다
일단 위쪽을 보시게 되면 브랜드 제품 이벤트 레시피 등이 있는데요
각각의 요소에 마우스를 올리게 되면 여러가지 소개가 나오는 모습을 볼 수
있습니다
이어서 아래쪽을 보시게 되면 이미지 슬라이더 가 있는데요
이렇게 이미지가 슬라이드 되는 녀석을 이미지 슬라이더 라고 부르게 됩니다
그래서 뭐 자주 보셨을 거에요 위쪽에 있는 뷰온 버튼을 누르면 이동을
하고 글자도 변경되고 하는 모습 인력 이어서 아래쪽을 보시게 되면 뭐
이미지 슬라이더 가 또 있는데 위의 이미지 슬라이더 는 이렇게 슬라이드가
되는 방식이라면 요 아래 쪽에 이미지 슬라이더 는
흐려졌다 가 다시 나타나는 형태의 이미지 슬라이더 라고 볼 수 있겠습니다
그리고 이 오른쪽을 보면 마찬가지로 이미지 슬라이더 가 또 있는데요 이
이미지 슬라이더 는 약간 애니메이션을 더 적용을 해서 각각이 제품들의
크기까지 변경되면서 나오는 형태의 이미지 슬라이드 라고 볼 수 있겠습니다
마찬가지로 아래쪽을 보시게 되면 또 이미지 슬라이더 가 있구요
뭐 여러가지 요소들이 굉장히 다양하게 사용 된 모습을 볼 수 있습니다
이어서 위쪽에 있는 브랜드 페이지를 한번 살펴보도록 하겠는데요
브랜드 페이지에 넘어 가시면 다양한 요소들이 요렇게 세로로 뒤죽박죽
배치되어 있는 모습을 볼 수 있습니다
핀터레스트 스타일이 라고 부르는데요 핀터레스트 라는 사이트에 들어가
보시게 되면 요러한 형태의 것들을 굉장히 많이 보실 수 있을 거에요
간단하게
인터넷에 핀터레스트 라고 쳐서 들어가보도록 하겠습니다
핀터레스트 사이트에 들어 가시게 되면 지금 화면과 같이 그리드의 그림들이
배치되는 모습을 볼 수 있는데요
화면의 크기를 변경하면 이 녀석들이 알아서 위치를 잡아 가면서 타입이
퍼지는 모습을 볼 수 있습니다
이러한 것을 우리가 맨션 이라고 부르게 되는데요 이와 관련된 내용은
이후에 플러그인으로 살펴보도록 하겠습니다
어쨌거나 요러한 기능들이 사용이 되서 화면에 요소들을 출력한 다는 것도
볼 수 있겠구요 사업 소개 쪽에 들어가게 되면 요러한 탭 틀의 마우스를
올렸을때 아래쪽에 또 추가적인 메뉴가 뜨거나 하는 모습들을 볼 수
있습니다
어쨌거나 요러한 다양한 요소들을 직접 구현을 해 보시면서 다양한 공부를
해보시면 굉장히 좋을 거라고 생각을 하고요
실제 cj 사이트 이외에도 굉장히 다양한 사이트가 있겠죠
그런 다양한 사이트에 있는 요소들을 뭐 매주 하나씩 복제를 해본다 던지
하는 연습을 하면 굉장히 좋을 것이라고 생각을 합니다
어쨌거나 그러면 이번에는 복제하는 연습으로 요 위에 있는 이미지 슬라이더
를 함께 복제 보도록 하겠습니다
일단 이미지 슬라이더를 복지 할 것이기 때문에 위쪽에 있는 내용과
아래쪽에 있는 내용은 스크린샷을 찍어서 대충 그럴듯하게 만들 것이구요
오른쪽에 있는 퀵메뉴 같은 경우도 그냥 스크린샷을 찍어서 오른쪽 아래쪽에
다가 붙여 주도록 하겠습니다
이 이외에 버튼을 누르게 되면 위쪽에 있는 글자가 바뀌는 내용이 라던가
이미지가 슬라이드 드는 내용만 일단 살펴보도록 하겠습니다
일단 지난번에 언급했던 애플리케이션 확장 프로그램을 사용해서 스크린샷을
쭉 찍도록 하겠구요
이 스크린샷을 찍은 다음에 이 녀석을 포토샵 으로 옮겼습니다
이어서 지난번에 언급했던 소프틀리 툴을 사용해서 이 녀석을 적당하게 분할
하도록 하겠습니다
일단 스플리트 를 사용하기 전에 컨트롤로 요 룰러 를 켜 주신 다음에
룰러 로 대충 위치를 잡고 서 사용하면 조금 더 편리하게 스플릿 할 수
있습니다
일단 뭐 그럴 듯하게 만들기 위해서 가장 위쪽에 있는 녀석 자르고 그
아래쪽에 있는 녀석 자르고 그 아래쪽에 있는 녀석을
자료 도록 하겠습니다 뭐요 자료는 수준은 내가 어느 정도로 구현을 하고
싶은지 로 모 평가를 해 주시면 되겠구요
이어서 아래쪽에 있는 내용 안
여기 정도만 짜르고 래쪽에 있는 내용을 모두 그림으로 활용하도록
하겠습니다
이어서 분할 하도록 하겠는데요 분할 도구를 사용해서
각각의 영역을 적절하게 드래그를 해주시면 되고 5층 간 부분 건너 뛰면서
하나하나 드레이크를 해 주셔도 상관없습니다
이렇게 하나하나 건너뛰어서 드래그를 해 주시게 되면 각각의 위치에 색이
안들어 올 텐데요
마우스 오른쪽 클릭하고 사용자 분할 영역으로 승격을 눌러주시면 승격 이
돼서 요녀석이 따로 추출이 되니까
이러한 형태로 빠르게 추출을 해주시면 되겠습니다
이어서 파일에서 내보내기 웹용으로 저장 을 눌러 주시면 되겠구요
웹용으로 저장 해서 조금 작게 보신 뒤 모든 녀석이 선택되어 있는지 확인
한번 해주시고 선택 쪽 한 뒤에 저장을 눌러주시면 되겠습니다
추가적으로 주도가 길을 쭉 돌려서 원래 상태로 돌린 다음에 이 오른쪽에
있는 퀵메뉴 또 한번 잘라 보도록 할게 용 적당하게 클릭해 주시고
잘라 주시고 잘라주시고
짤라 주신 다음에 그냥 스플리트 일로 적당하게
선택을 해서 잘라 주신 뒤에 마찬가지로 내보내기로 웹용 으로 저장을
눌러주시면 되겠습니다
사실 하나하나 다 저장하는 게 가장 좋기는 하겠지만 시간 여건상 그런
것들이 잘 되지는 않을 거예요 그래서
별도의 요렇게 스크린샷을 찍어서 비슷하게 구현하도록 하겠습니다
추가적으로 이렇게 분할이 완료가 되었으면 분할이 완료된 폴더가 이전과
마찬가지로 이미지 폴더 에 들어오게 될 텐데요
적당하게 이녀석들을 섞어서 화면을 구성을 해 주시면 되겠습니다
이어서 우리가 구현하고 싶은 이미지 슬라이더 의 이미지도 한 번 구해
보도록 하겠는데요
이때는 그냥 검사 를 눌러서 내부의 내용을 확인해 주신 다음에 이 안에
있는 이미지 태그를 긁어 오시면 됩니다
뭐 내부의 당연히 이미지 태그가 있기 때문에 이미지가 출력되는 거겠죠
그래서 요 주소를 붙여 넣어 주시게 되면 하나하나 이미지를 확인할 수
있게 됩니다
그래서 이런 이미지를 활용해 서 연습을 해보시면 조금 더 그럴듯한 느낌의
포트폴리오를 제작하실 수 있게 됩니다
추가로 이미지가 이미지 태그 가 아니라 백그라운드 이미지로 바뀌어 있는
경우도 있는데요 어떤 경우에 그렇게 백그라운드 이미지로 많이 박는 지
같은 것도 살펴보시면 좋을 것이라고 생각을 합니다
어쨌거나
요 버튼 경우는 버튼과 같은 경우는 일반적으로 백그라운드 이미지를 많이
사용하기 때문에 백그라운드 이미지로 사용을 해주시면 좋겠습니다
뭐 요 주소를 잘 붙였는지 못하겠다면 마우스 오른쪽 클릭하고 오픈 인유
탭의 들으시면 요렇게 버튼이 나오기 때문에 이러한 것을 활용해 주시면
되겠습니다
어쨌거나 요러한 방법을 사용해서 지금 화면에 있는 것처럼 이미지들
15개를 모아보았습니다
그럼 이제 실제로 한번 구현해 보도록 하겠는데요
일단 이미지 슬라이더 의 간단한 구현 방법에 대해서 먼저 설명하고
진행하도록 하겠습니다
이미지 슬라이더 같은 경우는 책의 18 다시 유괴 있는 그림처럼 길게
띠를 만들어서 이미지들을 나열한 다음에 이 녀석을 좌우로 움직이는 게
전부인 되요
이 좌우로 움직일 때 화면에 사용자에게 보이는 영역만 뚫어 두고 나머지를
안 보이게 만드는 것 뿐입니다
따라서 이렇게 만들게 되면 이미지 슬라이더 의 버튼을 클릭을 했을때
요렇게 옮겨 가는 모습을 볼 수 있습니다
이 이미지들이 하나하나 길게 가로로 쭉 나열이 되어 있는 거고요
이 나열이 되어 있는 것에서 현재 u 화면 부분만 보이게 하고 여기 이
외의 부분은 보이지 않게 만든 다음에 이동만 찍혀 주면 되는 간단한 6
이라고 할 수 있겠습니다
현재 cj 제일제당 사이트에 요소 검사 를 사용해서 슬라이더 부분을 보게
되면 메인 비쥬얼 이라는 이름의 트리 있구요
이 안에 뷰포트 라는 녀석이 있고 그 안에 ul 태그 가 있고 너비가
2002 100% 가 증가된 상태로 트랜지션 주 레이 션을 0점 누그러
주고 트랜스폼 속성을 계속 변경을 하면서 화면에 있는 내용이 이동하는
것을 볼 수 있습니다
요러한 형태로 한번 같이 구현해 보도록 하겠 구요
여기를 보시게 되면 데이터 타이틀이 라는 것이 있는데 html 에서
데이터 라는 이름으로 시작하는 속성들은 사용자 지정 속성 이라고 부르게
되고요
개발자가 그냥 원하는 대로 지정을 해서 입력을 하게 됩니다
현재 데이터 타이틀 속성을 보면 뭐 햇반 밥에 맛 삼행시 백일장 쪽 표
이벤트
b 보고 일품요리 신제품 체험 등 있어 있는데요
각각의 요소를 클릭을 했을 때 요 데이터 타이틀에 있는 속성이 위쪽에
출력되는 모습을 볼 수 있습니다
이렇게 만든 이유는 이후에 요 html 만 추정을 하게 되면 화면에 있는
이미지 슬라이더 를 쉽게 변경 하기 위함이라고 할 수 있습니다
따라서 개발자는 이미지 슬라이드 만 제대로 구현을 하면 나중에
디자이너들이 요 html 만 조금씩 만지면서 이미지 슬라이더 에 있는
내용들을 변경을 해서 사용할 수 있게 되는 겁니다 그럼 욕을 한번 쭉
살펴보시면 좋을 거라고 생각을 하고요
어떠한 식으로 제이쿼리 쪽에서 변경이 이루어지는 지도
함께 살펴보시면 좋을 거라고 생각을 합니다 어쨌건 오늘 강의는 여기까지
진행을 하고 곧바로 이어지는 강의에서 요 이미지 슬라이더 코어 부분을
한번 함께 구현해 보도록 하겠습니다