혀래이의 개발이야기 혀래이의 개발이야기

- 웹사이트를 돌아다니다 보면 버튼이 있고 누를 때 마다 사진이 변경되는 기능이 있다. 예를 들면 네이버 메인페이지의 우측에 쇼핑 탭이 그러한데 이런식으로 되어있다. - 버튼을 눌렀을 때, 다음 사진 or 이전 사진을 보여주는 기능을 만들어보자. - HTML로 틀을 만들어주는데, 사진을 미리 모두 넣어두고 CSS에서 hidden으로 숨겨놓았다가 버튼을 클릭하면 순서를 바꿔가며 사진을 보여주게 끔 만들었다. - 사진을 순서대로 보여주기 위한 Jquery의 insertBefore() , insertAfter() 함수, CSS의 overflow(고정된 틀 이상을 넘치는 사진들을 hidden으로 지정) 등등을 활용했다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19..

- 상위 메뉴가 보이고 메뉴를 눌렀을 때, 하위 메뉴가 출력되게끔 하는 메뉴판을 만들어보자. - display:none 옵션으로 메뉴 구조를 숨겨놓고 클릭 시 display: block 옵션을 켜주게 끔 Jquery의 toggleClass 함수를 사용했다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 Insert title h..