본문 바로가기

분류 전체보기273

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.
JSP에서 c:forTokens 활용하여 게시물에 이미지를 개수만큼 뿌려주는 방법 해당 방법을 구현하기 위해서,1. View 단에서 태그를 이용하여 For 문으로 구현2. Controller 에서 split 후 Model 에 ArrayList로 담아서 View 에서 c:set / c:forEach 문으로 구현해보았지만 ... 제대로 작동하지 않아서 더 검색해본 결과 방법을 찾았다. JSTL 에서 제공해주는 c:forTokens 문으로 쉽게 구현가능!!123 Colored by Color Scriptercs 2018. 7. 12.
20180711 개발일지 * 게시물 상세보기 *1. 슬라이더를 외부 플러그인로 찾아 적용=> 인스타그램처럼 좌우넘기는게 마우스오버시 나타나고, 아래 네비게이터는 사진 밖에 있게 하고싶었는데 딱 찾았다!근데 이 플러그인을 분석해서 이해하고 커스텀하는게 생각보다 오래걸렸다 ㅠㅠ (출처 : http://www.woothemes.com/flexslider/) * GitHub 초기화 *1. 형상관리로 GitHub를 쓰는데 Fetch하고 Merge해보니까 히스토리 그림이 완전 이상하더라..나중에 언젠가 백퍼 꼬일 것 같아서 기본 뼈대를 다시 만들고 Repository도 새로 구성함!=> 말이 쉽지 직접 해보니 3시간 정도 잡아먹은듯 ㅠㅠ.. 2018. 7. 12.
20180710 개발일지 * localStorage 를 활용한 임시저장 기능 구현 *1. JSP에서 현재 시스템 날짜와 시간 원하는 포맷으로 알맞게 데이터 가져오기2. 게시물내용을 현재 시스템 날짜로 localStorage에 저장3. 현재 시스템 날짜를 임시저장 횟수로 localStorage에 저장4. 임시저장된 목록 최신순으로 소팅5. 각 임시저장된 항목 클릭시 게시물내용에 덮어씌우기6. 각 임시저장된 항목 삭제 구현=> 이게 생각보다 따져야 할 조건들이 많아서 오래걸렸다ㅠ=> 삭제하니 작성중인 내용도 삭제돼서 다른 function까지 추가함..7. 부하방지&관리를 위해 임시저장 횟수 최대 6회까지만 허용 * 이미지 업로드 *1. 업로드 개수 최대 5개로 제한2. 업로드시 이미지 미리보기 구현=> 여기도 개수 제한걸기=> 참고.. 2018. 7. 10.