본문 바로가기

퍼블리싱/javascript&jQuery

 (22)
제이쿼리 .attr()를 이용해 이미지변경 및 갤러리 만들기 사이트에서 사진들이 모여 있는 갤러리를 보면 작은 썸네일을 클릭하면 큰이미지가 변경되는 형식이 종종 보인다. 모달창은 아닌데.. 이거 이름을 뭐라고 하는지 모르겠다. 무튼 그걸 만들어보려고 한다! 우선 완성샷입니다. 작은 썸네일을 눌러보세용.작은 썸네일을 클릭하면 확대된 이미지가 변경됩니다. 이 갤러리는 제이쿼리 메서드는 '.attr()' 를 이용해서 만들었어요. 메서드 .attr()에 대해 간략하게 설명하자면! attr 는 attribute의 약자로 속성을 제어할때 사용합니다. 쓰는 방법- .attr(attributeName) -속성이름 : 속성값을 얻는다. - .attr(attributeName,value) -속성이름, 속성값 : 속성값을 변경한다. - .attr(attributeName,functi..
핀터레스트 레이아웃 MASONRY 사용하기 핀터레스트 레이아웃 masorny 만들기갤러리 이미지들이 모두 사이즈가 동일하면 좋겠지만 비율과 사이즈가 너무 다를때 꽤나 지저분 해보입니다. 그런데 masonry 레이아웃을 사용하면 간편하게 정리됩니다. 핀터레스트처럼.핀터레스트의 레이아웃은 이렇게 생겼어요. 핀터레스트 캡쳐사진이예요. 내 관심사가 너무 적날히 드러나서 괜히 민망. 방법을 간단히 설명하면 MASONRY 플러그인을 사용합니다.ㅎㅎㅎ제이쿼리를 이용해서 HTML에 태그를 다 적지 않고 이미지를 가지고 왔고, 이미지를 가지고 오다보니 이미지가 다 로드 된 다음 레이아웃이 실행되도록 했어요.처음에 그냥 연결하다 보니 처음 열렸을때 버그가 생기더라고요. html부터 만들어 보아요. HTML 1 cs 지난번에 올린글에서처럼 제이쿼리로 이미지를 불러올..
제이쿼리로 이미지 불러오기 오랜만에 제이쿼리를 다시 연습해보았어요.사실 오랜만에 하려니까 엄두가 안나서 간단한 것부터 해보려고 해요. 그래서 해본 '제이쿼리로 이미지 가져오기' 이럴때 활용할 수 있을것 같음1. 이미지가 많은데 하나씩 html에 적지 않고 제이쿼리로 불러오고 싶을때2. 이미지들이 네임이 넘버링을 구분이 되어있을때 (ex. picture01, picture02.... ) 먼저 완성된 모습 (작년에 벗꽃 구경가서 찍은 사진들히히) 이미지가 더 많으면 밑으로 쭉나올거예요. *중요한건 이미지의 이름이 넘버링으로 구분할것 (ex. picture01, picture02.... ) 그럼 html 부터 적어봅니당.HTML 무진장 심플함 CSS .alll_wrap{margin: 0 auto;} .alll_wrap img{margi..
게시판 Q&A등 아코디언 메뉴만들기 아코디언 메뉴만들기게시판, Q&A에 많이 쓰는 형태다! 먼저 완성된 모습! F&Q F 카테고리1 아코디언 메뉴는 어떻게 만드나요? A 그러게요.. 그거 어떻게 만드는건가요.. 그냥 갖다 쓰면 안되나요? 내가 굳이 만들어야 하나요? 휴.. 그래도 배웠으니 연습해야지ㅜ F 카테고리1 아코디언 메뉴는 어떻게 만드나요? A 그러게요.. 그거 어떻게 만드는건가요.. 그냥 갖다 쓰면 안되나요? 내가 굳이 만들어야 하나요? 휴.. 그래도 배웠으니 연습해야지ㅜ F 카테고리1 아코디언 메뉴는 어떻게 만드나요? A 그러게요.. 그거 어떻게 만드는건가요.. 그냥 갖다 쓰면 안되나요? 내가 굳이 만들어야 하나요? 휴.. 그래도 배웠으니 연습해야지ㅜ 우선 HTML을 짜보아용. 게시판은 순서대로 아래로 쭉내려와 있으니 ul에 l..
제이쿼리를 이용해 타이머만들기 카운트 업을 이용해 이미지 슬라이드 만드는 방법! 감기가 걸려, 코맹맹이가 되었다. 끙끙거리며 블로그를 써본다. 제이쿼리에서 반복적으로 동작이 발생할때 많이 쓰는 방법이다. 먼저 카운트 업 타이머를 만들어 보자. 1. 카운트 업 타이머를 만들 html 마크업과 css 설정을 해준다. 123456 .countUp{font-size: 50px;text-align: center;} 0 Colored by Color Scriptercs 2. 스크립트를 열어 제이쿼리를 만들어본다. - 변수를 하나 지정해주고 - 함수를 호출해, 증가변수(n++)를 넣어준다. - 숫자가 들어갈 p.countUp를 불러 메소드 text로 숫자를 넣어준다. 12345678910 $(function(){ var n = 0 // 변수를 지..
제이쿼리(jQuery) CDN연결 방법 처음 써보는 티스토리 한번 완전 날리고 다시 쓰는거라 무척 짜증난다. 처음 사용하는 티스토리 어색하고 어렵다. 무튼 티스토리를 가입하게 된 계기는 jQuery 와 javascript를 복습하기 위해서다. 예전에 가볍게 훑었던 것이 있는데 제대로 공부하지 않는 덕분에 이렇게 다시 공부를 하게 되었다. 이번에는 제대로 기억하기 위해 블로그에 차근차근 적어볼 생각이다. 그래서 올리게 되는 글들은 완벽하게 알고 올리는 거라기 보다는 공부하면서 이해한 것들을 적는 것이여서오류가 있을 수 있다. 그렇다면 살포시 알려주세용:)ㅋㅋㅋㅋ 처음으로 제이쿼리는 무엇인가?jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.The pur..

티스토리툴바