분류 전체보기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. 이전 1 ··· 28 29 30 31 32 33 34 ··· 46 다음
