디블리셔에서 프론트엔드가 되어가는 불쌍한 IT땔감

사실 이 유튜브 영상만 따라해도 바로 알 수 있음. 왠만해선 바로 이해될 것임. 그런데 javascript를 이제 막 공부하기 시작한 주변사람들 중 이게 영어라서 못알아들어 공부가 안되고 이해가 안돼서 결국 구글링해 긁어다 쓰는거랑 다를바가 없다는 사람이 있어 직접 해설을 해보기로. 해설이라기보단 그냥 알기 쉽게 이 유튜버 분의 소스를 설명해보겠음. 쭉 읽고 난 뒤엔 javascript에 대한 가독성이 뭔가 더 좋아졌음을 느낄 수 있을것임. 하코사라던지 여러 커뮤에서 관련분야 질문을 해도, 대체로 친절하고 세세하게는 안알려주고 답변해주는 사람들도 '이정돈 당연히 알고 있겠지' 라고 생각하고 답을 해주니까 그것조차도 모르는 사람들은 결국 원하는 답을 못얻고 헤메는 경우가 많음... 그렇게 답답했던 사람들에..

.click-img 는 내가 클릭할 이미지를 감싸고 있는 div다. .clone-img는 내가 클릭한 이미지를 복사할 곳이다. (적절한 css와 jquery 사용으로, 이 .clone-img를 새창 팝업창이나 모바일 모달팝업으로 만들 수도 있다.) 그렇다면 이제... javascript를 어떻게 작성해 볼까? 클릭 시 벌어지는 이벤트이니까, 클릭 이벤트리스너를 먼저 구성해 보자. $('.click-img').click(function(){ }); .click-img 를 클릭했을 때, 어떠한 펑션을 돌리게 하겠다. 어떠한 것을 돌릴까? .clone-img에 내가 클릭한 이미지를 복사해 가고 싶다. 작성해 보자. $('.click-img').click(function(){ $(this).clone().app..

현재 어느 모바일 웹 퍼블리싱을 작업중에 있는데, 한가지 새로이 알게 된 이슈가 있어 기록. 전체 wrap을 주고 그 안에서 와 , 그리고 컨텐츠 내용이 들어갈 을 구성했다. 와 는 position: fixed로 고정 포지션을 주었다. 즉, wrap의 width를 100vw, height를 100vh로 설정하면 간단하게 디바이스의 가로 세로로 꽉 차는 모바일 페이지를 만들 수 있는 것이다. 그런데, 크롬에서는 괜찮았는데 iOS의 사파리에서 확인해 보니, 영역에서 생각지도 못하게 세로 스크롤이 생기는 것이다. 에 height를 주지도 않았는데도... 이걸로 한 1시간을 헤멘 것 같은데, 답을 찾고 나니 의외로 간단했다. 과 에서 width: 100%와 height: 100%를 주고 자식요소인 에도 동일하게..