본문 바로가기

전체 글273

화면 내리면 최상단으로 이동할 아이콘 뜨고, 맨 위에 있으면 아이콘 사라지게 하기 jquery 에서 제공해주는 스크롤 이벤트인 아래 두개로 구현이 가능하다 !!1. $(document).scroll() //스크롤이 변경될 때마다 이벤트를 발생시킴2. $("body").scrollTop() //브라우저의 스크롤 위치 값 //최상단이면 0을 반환함 * 구현방법 *1. Body 내에 아이콘부터 선언 12cs2. Head 내에 자바스크립트 선언123456789101112131415161718$(function(){ //*스크롤감지 $("body").scroll(function(){ var scrollLocation = $("body").scrollTop(); //브라우저의 스크롤 값 if(scrollLocation!=0){ //화면을 내리면 gotoTop 뜨게하고 $(".gotoTop").f.. 2018. 7. 13.
2018 BLOCKCHAIN FAIR 방문기 2018 BLOCKCHAIN FAIR국내최초 블록체인 채용박람회가 2018년 7월 8일 진행되어 다녀왔다.사실 블록체인기술에 관심이 있다거나 취업을 위해 다녀온게 아니라,'이런 기술도 있구나', '이 분야에선 이런 직무들이 있고 어떤 사람들이 있구나', '이 분야의 기업들의 이미지가 분위기는 이렇구나' 하는..정말 글자 그대로 다녀왔다는 표현이 어울리는 것 같다. 지하로 내려가 부스에서 기웃기웃 거리기도 해보고, 실제로 개발분야쪽 상담도 받아보고,지상으로 올라와 각 기업 대표님들이 말씀하시는 것도 들어보고, 설문조사도 참여했다!더운 날 역삼까지 가느라 힘들었지만 이것도 또 하나의 경험이라 생각하는 마음으로 가벼운 마음으로, 즐겁게 다녀왔다. 블록체인 이라는 말자체를 처음 들어보는게 아니지만 그 동안은 단.. 2018. 7. 13.
페이지 최상단으로 이동시키는 스크립트 현재 보고있는 페이지에서 특정 버튼클릭시 맨 위로 이동되게끔 구현할 땐, 아래 구문을 쓰자 !1$("body").scrollTop(0);cs 2018. 7. 13.
20180713 개발일지 * 게시물 상세보기 *1. 유저프로필 클릭시 유저정보 확인할 수 있는 모달창 띄우기=> 화면의 정중앙에 뜨도록 설정, 안에 input 태그는 inline-block 되도록 별도의 css 제작2. 신고기능 구현한 예지언니랑 유저신고 기능 맞춰보기, 성공!3. 현재 로그인 한 유저가 게시물 작성한 유저인지 확인하여 "게시물수정/게시물삭제" 메뉴 보여주거나 숨기기 * 게시물 작성 *1. 임시저장 기능이 본문내용만 저장되는거였는데, 제목도 저장하여 불러올 수 있도록 수정2. 임시저장 기능을 제목+내용만 저장했었는데, 첨부한 이미지도 저장될 수 있도록 수정3. 이미지 첨부하면 이미지가 미리보여지는데, 이미지 삭제기능이 없어서 이미지 삭제기능 추가 * 게시물 목록 *1. 화면을 아래로 내리면 최상단으로 이동시킬 아.. 2018. 7. 13.
position 활용하여 더보기 버튼 클릭하면 더보기 메뉴 뜨게 만들기 이런식으로 우측에 있는 더보기버튼을 클릭하면, 회색박스에 있는 더보기 메뉴가 뜨는걸 구현하고 싶었다. 그래서 간단하게 jQuery 나 bootstrap 에서 제공하는걸 사용하려고 찾아봤지만,클릭시 노출되는 리스트는 data-content="" 여기안에 넣어야해서 네비게이션이나 각 기능들을 넣어야 하는 나로선 사용하기가 어려웠다.(data-content 안에서는 html 태그도 안먹음...) 그래서 CSS를 찾아 직접 구현해보았다.1. 더보기 버튼의 이미지 우측값, 하단값을 가져와서 리스트의 css top, right에 적용시킨다.2. 리스트는 float 되는 형식으로 떠야하므로 z-index=10 값을 준다.3. 더보기 버튼의 position은 relative / 리스트의 position은 absoult.. 2018. 7. 12.
@media와 flex 활용하여 화면 줄였을 때 보여지는 정렬순서 바꾸기 원래는 한 화면 기준으로, 좌측에는 게시물정보 / 우측에는 유저와 댓글정보가 보여졌다. 근데 이게 화면을 줄였을 때 (모바일 웹 또는 앱으로 볼 생각에)유저정보가 맨 밑으로 내려가서 마음에 안들었고, 이걸 수정하는 방법을 찾았다. 바로 CSS의 @media 와 flex 태그 이용하기.123456@media only screen and (max-width: 600px) { .container{ display: flex; flex-direction: column-reverse; }}Colored by Color Scriptercs@media 태그로 화면의 가로사이즈가 600px 이하로 떨어지면 flex 기능을 활성화 하고, 나열되는 컬럼을 역순으로 보여주겠다는 소스. container 안에 좌측 / 우측 정.. 2018. 7. 12.
CSS의 flex활용하여 인스타그램, 페이스북처럼 유저정보 만들기 * 변경 전 * * 변경 후 * 원래 아래처럼 한 줄을 div로 묶고, 그 안에서 span 을 3개로 나눠 정렬한 뒤 두번째 span에서 위아래로 나누고 싶었는데..막상 작업해보니 정말 span / div 태그에 대한 아무런 지식도 없이 그저 생각일 뿐이었다..그래서 인터넷 찾고 공부해보니 아래처럼 div 안에 div 로 3개를 나눈 뒤, CSS에서 제공하는 flex 를 적용시켜파란 div엔 flex-direction:row (가로로 정렬), 두번째 div엔 fiex-direction:column (세로로 정렬) 을 먹혀야 하더라.공부할 때 참고한 사이트 : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Con.. 2018. 7. 12.
JSP에서 fmt:formatDate 활용하여 날짜 포맷 변경하기 * 전제조건 *1. 테이블의 컬럼 중 DATETIME 타입이 있다.2. View 단에 출력할 땐 나노초는 필요없다. * 사용방법 *1. VO객체에 데이터타입을 Timestamp 로 지정2. mapper에서 해당 컬럼의 jdbcType을 Date로 지정3. View 에서 JSTL에서 제공해주는 fmt 기능을 쓰기 위해 아래 태그 head에 선언4. View 에서 실제 포멧을 설정하고 뿌려질 방법, body에서 활용****** ***** ***** **** ${} 2018. 7. 12.
20180712 개발일지 * 게시물 상세보기 *1. 게시물 이미지를 개수에 알맞게 외부 플러그인 (flexslider) 에 뿌려주기=> 포스팅 : 2018/07/12 - [JAVA/JSTL] - JSP에서 c:forTokens 활용하여 게시물에 이미지를 개수만큼 뿌려주는 방법2. SNS처럼 유저정보 css의 flex 활용하여 정리=> 포스팅 : 2018/07/12 - [JAVA/CSS] - CSS의 flex활용하여 인스타그램, 페이스북처럼 유저정보 만들기3. 현재 접속한 유저가 좋아요를 눌렀는지 안눌렀는지를 판별해서 빈하트, 꽉찬하트 보여주기4. 좋아요기능 (좋아요 추가, 좋아요 취소) Ajax 활용하여 구현=> 좋아요가 변경될 시 좋아요 개수도 즉시 변경되게 Ajax 활용하여 구현..할랬는데Ajax 안에 success로 Aja.. 2018. 7. 12.

티스토리툴바