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




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


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


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


    


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


    


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

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


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


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


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


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




포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee




  크로스 브라우징을 신경써서 웹페이지를 만들때, 


클라이언트의 브라우저가 어떤 것 인지 알아 내는 것은 무척 중요한 일이다.


제이쿼리 에서는 아래 메서드로 알아낸다.


$.browser.mise     :    익스플로러인 경우, true를 반환

$.browser.mozilla  :    파이어폭스인 경우, true를 반환

$.browser.safari    :    사파리, 크롬 인 경우, true를 반환

$.browser.opera    :    오페라인 경우, true를 반환


하지만, 이상하게 IE11(익스플로러) 버전에서는 위의 메서드가 실행이 되질 않는다..


스택오버플로우의 검색을 통해 IE의 반환값을 얻는 방법을 찾았다.


즉, $.browser.mise 가 null로 리턴 될때는, 아래의 코드로 반환하도록 코딩해야 겠다.


var ie = !!navigator.userAgent.match(/Trident.*rv\:11\./);




포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee


오늘 포스팅 할 내용은 인덱스를 이용한 요소 찾기다. 


포스팅 하기 앞서 이러한 요소 찾기가 왜 필요한지 알아보자.


css로 정의하면 하나의 class명으로도 여러 태그들을 자신이 설정한 스타일로 맞출 수 있는 장점이 있다.


하지만 태그들을 각각 따로 어떠한 처리를 하고 싶다고 가정할 때,


어떻게 해야 할지 여간 난감한게 아니다. 하나의 방법으로는 id를 각각 써줘서 가져오는 방법도 있겠지만,


귀찮기도 하고 좋은 방법이 아니다.


그럴땐 .eq(index)란 요소찾기 메서드를 쓰면 된다.


아래 예시를 보자.



1
2
3
4

1,2,3,4 각각 같은 class인 태그다. 이러한 태그들을 다루고 싶을땐,





이와 같이 인덱스를 이용해 가져 올 수 있다.


위에서 언급한 id로 일일이 가져오는 방법 보다는 


후자와 같은 방법이 객체를 배열로 다 룰수 있어 활용성이 더 좋다.





포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee



- JavaScript







위의 코드를 <head> 내부안에 작성하면 되겠다.


실행되는 해당 플랫폼은 <body>안에 아래와 같이 작성한다.


<button id="btn1" onclick="button_click();">Button!!</button>




- JQuery




    


위의 코드를 역시 <head> 내부안에 작성하면 된다.


실행되는 해당 플랫폼은 <body>안에 아래와 같이 작성한다.


<button id="btn1">Button!!</button>

예시를 버튼으로 했지만, 어떠한 태그든 클릭이벤트를 넣을 수 있다.


제이쿼리의 #은 javascript의 getElementById를 의미하므로 id값을 가져온다.




포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee

+ Recent posts