본문 바로가기

분류 전체보기273

redirect 로 페이지 이동시 값 전달방법 보상기능을 쓰기 위해 유저가 게시판에 게시물을 쓰면, 지금까지 작성한 게시물 개수를 listBoard 에 뿌려줘야했다.근데 값을 전달할 때는 forward 를 사용해야만 하는줄 알아서 어떻게 해야하나 고민하고 있었는데...!spring 에서는 RedirectAttributes 클래스를 이용해 redirect 로도 값을 전달할 수 있다 !!!!!! (최고) * 사용방법 *1. RedirectAttributes 선언하고2. addAttribute() 로 담은 다음에3. 받는 Controller 에서 @RequestParam 으로 잡고4. View 에 전달하기 위해 model 에 담으면 끝! * 실제 사용방법 *1. Controller - addBoard1234567891011@RequestMapping(va.. 2018. 7. 25.
자식요소 이벤트를 위해 부모요소 이벤트 막는 방법 자식요소 이벤트를 사용하기 위해 부모요소 이벤트를 막는 방법 이처럼 큰 네모박스(article) 을 클릭하면 '일정 상세보기' 페이지로 가게끔 jQuery를 걸어놨지만,큰 네모박스(article) 안에 'X버튼' 또는 '일정 수정하기' 또는 '게시물로 공유하기' 와 같이 자식요소를 클릭하면 그에 맞게 이벤트가 걸려야하는데,jQuery를 잘 잡아도 부모요소의 이벤트인 '일정 상세보기' 페이지로 넘어가더라.이에 대한 해결방법은, 자식요소에 e.stopPropagation(); 사용하기 ! * 사용방법 *1. HTML 내부1234567891011 일정 수정하기 게시물로 공유하기Colored by Color Scriptercs2. jQuery 부분123456789101112131415161718//일정 클릭시 .. 2018. 7. 25.
[jQuery/Bootstrap] 동적으로 생성한 요소에 tooltip 바인딩 시키기 단순하게 아래 코드 적용시켜주면 된다 :) $(document.body).tooltip({ selector: "[data-toggle='tooltip']" }); 출처 : https://code.i-harness.com/ko/q/97f5a9 2018. 7. 23.
[CSS] CSS로 인스타그램 마우스오버 이벤트 적용하기 인스타그램처럼 포스팅 한 게시물에 마우스 올리면 좋아요 개수, 댓글 개수를 알려주고 싶었다. 찾아보니 CSS 로 instagram 처럼 mouseover 시 event effect 를 적용 할 수 있어서 바로 적용함. 참고 : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity * 사용방법 * 1. HTML 태그 ${board.boardTitle} ${board.likeCnt} ${board.commCnt} 2. HTML CSS 부분 article{ display: inline-block; position: relative; } article:hover .thumbImg img { opacity: 0.3; .. 2018. 7. 22.
caret.js 와 atwho.js 이용하여 게시물에서 @로 친구리스트 불러오기 (autocomplete 활용) 페이스북이나 인스타그램처럼, 태그(@) 를 이용하여 친구리스트를 댓글에 불러올 수 있도록 하는 기능을 구현했다 !Friend 테이블에서 FriendId 만을 추출하여 JSON 형식으로 만들고, 댓글폼에서 @를 입력하면 Ajax 로 리스트를 불러와 띄워주는 예제다.해당 기능 사용을 위해 caret.js 와 atwho.js 를 같이 사용하였다.Caret.js Git 주소 : https://github.com/ichord/Caret.jsAtwho.js Git 주소 : https://github.com/ichord/At.js해당 예제는 국내 포스팅도 없고 검색 데이터도 별로없었지만 내가 사용할 textarea 에 적용이 가능하고, 사용방법이 편한 점에서 공부하고 적용했다 (뿌듯) * 사용방법 *1. HTML 상.. 2018. 7. 20.
나중에 활용하면 좋을 사이트 1. easyautocomplete : http://easyautocomplete.com/기존 jquery ui 에서 제공하는 오토컴플릿보다 간단하고 쉬운 것 같음 2. dhtmlx : https://dhtmlx.com/자바스크립트를 활용한 사이트.. 스케줄을 포함해 되게되게 많다. 진짜 유용한 사이트지만, 일부 기능은 유료? 기간제? 이다. 3. 로그인 CSS 테마 : https://dcrazed.net/css-html-login-form-templates/요즘 트렌드에 알맞게 디자인 한 로그인 CSS 테마 모음 사이트 4. 촤르륵 CSS JS 모음 : https://github.hubspot.com/odometer/docs/welcome/촤르륵 CSS 모음 5. 최신 jQuery 트렌드 알 수 있는 .. 2018. 7. 20.