CSS 썸네일형 리스트형 [jQuery] 헤더, 푸터 고정/오버레이 클릭 시 사라지는 모달 헤더 및 푸터는 고정이며 그 안의 컨텐츠만 스크롤이 생기는 모달이다. onclick="modalControl('o', '#modal1', '600')" //modalControl(타입 - 여는버튼은 o 닫는버튼은 c, 모달id, 모달 가로 사이즈) 의 방식으로 사용할 수 있다. 모달을 중앙에 정렬하기 위해 여러 가지 방법을 사용해 보았지만 부모 요소에 display:table을 걸고 display:table-cell로 지정하는 방법이 가장 깔끔한 것 같다. 단계가 좀 깊어지긴 하지만 다른 방법들의 단점이 너무 치명적이다. top:50%;left:50%;transform(-50%,-50%)의 방법이 간단해 보이지만 위치가 퍼센트로 계산되기 때문에 크롬에서는 border/ie에서는 글자 등이 흐리게 보이는 .. 더보기 [jQuery] 무한슬라이드 만들기 슬라이드는 흔히 사용하는 플러그인이 가장 간단하지만, 제이쿼리 실력을 늘려보려면 실제로 만들어 보는 것이 좋다. 방식은 여러 가지가 있으니 곰곰히 생각해 보고 자신이 더 좋다고 생각하는 방식으로 제작하면 된다. 여기서는 prependTo 와 appendTo를 이용하고 css의 opacity 속성을 이용하여 fadeIn fadeOut 효과를 냈다. 슬라이드들을 position absolute로 한 곳에 몰아두고 opacity를 0으로 하여 보이지 않게 처리한다. 처음 로드시 첫 슬라이드의 opacity를 1로 animate한다. 그리고 이전, 이후 버튼을 클릭하면 해당 슬라이드의 opacity를 0으로 animate한 후 나타나게 할 슬라이드의 opacity를 1로 animate한다. setInterval.. 더보기 [jQuery] 스크롤시 색상이 변하는 헤더 스크롤시 특정 구간에 들어갔을 때 색상이 변하는 헤더입니다. 헤더 색상을 제이쿼리 animate로 변경할 수도 있지만, css로 해결하는 편이 성능 면에서 훨씬 유리합니다. 헤더 색상이 변했으면 하는 부분에 "page-start" 클래스를 추가한 후 그 부분에 스크롤이 갈 때 헤더에 "down" 클래스를 추가하게 합니다. down 클래스는 transition을 이용해서 자연스럽게 색상이 변할 수 있도록 합니다. transition을 이용하는 것이기 때문에 꼭 background-color가 아니더라도 opacity, width, height 등을 이용하여 다양하게 변형시킬 수 있습니다. (opacity:0 -> 1 로 해서 헤더가 나타나게 한다든지, height:100px -> 50px 로 해서 헤더 높.. 더보기 이전 1 다음
