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

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

페이지 정보

조회: 1,016

본문

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

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

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

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

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 임 먼 3판 73 당

되겠고요 이번 강의에서는 지난번 에서 만들더니 녀석이 제 스타일을 조금
더 추가적으로 입혀 보도록 하겠습니다
일단 버튼과 관련된 디자인 부터 살펴보도록 할텐데요
지난번에 실제 2 에서 따옴 맛 은 이미지를 보시게 되면 지금 화면과
같이 이미지가 나와 있을 것입니다
책에서 같이 살펴보는 이미지 슬라이더 도 이와 같은 형태로 되어
있을텐데요
이와 같은 형태의 이미지로 어떻게 버튼을 만드는지 간단하게 살펴보도록
하겠습니다
일단 cj 제일제당 홈페이지에 가서 검사를 눌러서 요 버튼을 보시게 되면
지금 화면과 같이 a 태그가 나오게 되는데요
일단 a 태그에 백그라운드 포지션 이라는 속성과 백그라운드 이미지 속성이
지정되어 있는 걸 볼 수 있습니다
백그라운드 이미지를 보시게 되면 방금 보았던 백그라운드 점 슬라이드
내비게이션 점 png 라는게 들어있구요 백그라운드로 포지션 이라는게 누를
때마다 변하는 모습을 볼 수 있습니다
예를 들어서 지금 누르게 되면 백그라운드 포지션이 - 60 픽셀 영어로
변 했구요
만약에 눌린 상태가 아닐 경우에는 - 40 픽셀 콤마 0으로 출력되는
모습을 확인할 수 있습니다
이렇게 이미지를 화면에 놓고 너비와 높이를 정한 다음에 그 밖을 안보이게
하고 이 뒤에 있는 이미지를 옮기면서 외부의 출력되는 형태를 변환을 하는
것인데요
간단하게 무슨 말인지 함께 살펴보도록 하겠습니다
일단 지난번에 버튼을 만들던 부분에 css 까지 주도록 하겠는데요
잠시 코드를
보기좋게 수정하도록 하겠습니다
이어서 요 내부의 다가 css 메서드를 사용해서 객체를 지정을 해서
이미지를 넣도록 하겠습니다 일단 백그라운드로 응
이미지 속성을 지정 을 하겠구요 유아 레리 나는 녀석을 사용해서 이미지의
유아 레를 넣도록 하겠습니다
그리고 현재 너비는 12 픽셀 높이는 12 픽셀이 인데요
저러한 이미지의 너비와 높이를 어떻게 아냐고 물으실 수 있는데 그건 주는
디자이너에게 물어 보셔야 됩니다
물론 소스로 저런 이미지를 만들 때는 저런 이미지의 크기를 스스로 정해서
만드니까 당연히 알고 있겠죠
어쨌거나 요란 상태로 아까 백그라운드로 포지션이
- 40 픽셀 0 이었으니까
요런 형태로 한번 넣어 보도록 하겠습니다 추가적으로 내부에 있는 버튼
같은 경우에는 기본을 버튼 적인 그런 형태가 들어가기 때문에
녀석을 div 태그로 한번 변경을 해 보겠 고요
추가적으로 현재 안에 있는 텍스트는 텍스트로 넣지 말고 at kr
속성으로 데이터 인덱스 라는 이름으로 넣어 주도록 하겠습니다
이렇게 코드를 저장을 하고 실행을 하게 되면
아무것도 안 보이게 되는데요 이는 버튼을 생성 때문입니다
일단 그냥 간단하게 바디 태그 에다가 css 로 백그라운드로 을
그레이 같은 색으로 조서 배경 색상을 조성 차이를 보도록 하겠는데요
실행해 보면 버튼들이 지금 요렇게 나오는 모습을 볼 수 있습니다
클릭하면 그 쪽으로 이동하는 모습도 확인할 수 있구요
어쨌거나 이렇게 되어 있는 상태에서 뭐 어플로 네스트 를 주구
마진 레스트 를 한 십정 돌 조성 1호 정도 주는게 나오잖아요
조성 지금 화면과 같이 구성을 할 수 있습니다
뭐 사실 라 있을 주는게 조금 더 나을 것 같네요
요런 스타일 지정과 증정은 사실 자바스크립트 문제보다는 css 를 얼마나
잘 적용을 해야 겠죠 그래서 그러한 부분도 함께 공부를 해 주시면
좋겠습니다
버튼의 스타일을 변경할 때는 뭐 여기에다가 - 60 으로 이동을 하면
체크된 모양이 나오게 됩니다
- 다시 픽셀 일때는 요녀석이 보이게 되는 거구요
신생 6 이요 그리고
- 60 을 해서 20 픽셀 더 오른쪽으로 옮기게 되면 요 검은 색
모양이 화면에 보이게 되는 것입니다
그래서 요 녀석만 추가를 해주면 되겠는데요 추가할 위치는 무 부트
부분으로 적용하도록 하겠습니다
우분투를 할 때 인덱스가 넘어 오게 되는데요
div 태그 중에 데이터 인덱스가
인덱스 이 녀석을 추출 하도록 하겠고
이녀석에게 css 를 적용을 해성
백그라운드로 포지션을 - 60 픽셀 0 으로 지정을 하도록 하겠습니다
이렇게 하면 모양이 바뀌게 점 그리고 기존에 있던 다른 녀석들의 스타일을
해제하기 위해서 데이터 인덱스 라는 속성이 있는 녀석들을 전부 css 를
걸어서 백그라운드 포지션을 원래 상태로 돌려 주도록 하겠습니다
사실 이전에 인덱스가 차피 녀석만 바뀌면 되는데 전체를 바뀌는 게 약간
비율 저 라고 생각하시는 분은 뭐 그렇게 코드를 또 설정을 해 주시면
좋겠죠
어쨌거나 이렇게 두 줄의 코드만 추가를 하게 되면 코드를 실행을 했을 때
자동으로 이렇게 색상이 잡히게 되구요
뭐 클릭을 해서 이동을 하게 되면 그 녀석들에게 도 색상이 잡히는 모습을
확인할 수 있습니다
그래서 버튼 클릭감이 지 모두 구현한 상태라고 보면 되겠습니다
사실 기본적으로 사용되는 내용은 모두 살펴 보았기 때문에 여기에서 끝내도
문제는 없겠지만 약간 혼자서 공부할 때는 디자인도 꾸미고 하면 스타일
공부도 되고 조금 결과물이 잘 나온다는데 에서 약간 기분이 좋을 것이라고
생각을 합니다 그래서 간단하게 한번 타일을 적용을 해 보도록 할게요
스타일을 그냥 마구잡이로 넣었는데요 이렇게 마구잡이로 넣고 라도 구성을
하게 되면 지금 화면과 같이 구성되는 모습을 볼 수 있습니다
어쨌거나 뭐 그럴 듯하게 나오고 내가 요 부분을 만들었다는 식으로 스스로
뭐 박수 쳐도 되게 점 어쨌거나 요러한 형태로 만들다보면 은 이 사이트의
기능을 하나하나 전부다 구현해 보실 수 있을 겁니다
그렇게 한 한달에 사이트 하나 모방 요란 식으로 연습을 계속해서 반복 을
해 보시다 보면 다양한 요소들을 직접 만들 수 있게 되실 거라고 생각을
합니다
어쨌건 오늘 강의는 여기까지 되게 구형 다음 강의에서 뵙도록 하겠습니다
감사합니다