코드공부방

CSS 로딩UI 만들기 #3. 좌우 이동을 반복하는 막대기(bar) 요즘 계속 로딩 UI만 만들고 있다. 재밌어서 그런건 아니고 뭔가 계속 포스팅을 하려다보니 콘텐츠를 짜내는 중(?) 인가보다. 앞서 만든 회전하는 원, 시간차를 두고 스케일 조절을 반복하는 원에 이어 세번째 로딩 UI 제작이다. CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle) CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle) 앞전에 CSS를 사용하여 회전하는 원 로딩 UI을 만든적이 있다. CSS 로딩UI 만들기 #1. 회전하는 원(Circle) CSS 로딩UI 만들기 #1. 회전하.. code-study.tistory.com CSS 로딩UI 만들기 #1. 회전하는 원..

CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle) 앞전에 CSS를 사용하여 회전하는 원 로딩 UI을 만든적이 있다. CSS 로딩UI 만들기 #1. 회전하는 원(Circle) CSS 로딩UI 만들기 #1. 회전하는 원(Circle) 웹사이트에 자주 사용되는 로딩 UI 중, 무한으로 회전하는 원(Circle)을 사용하는 경우가 있다. 이때 돌아가는 원을 GIF이미지로 만들어 사용하는 경우도 있는데 그 경.. code-study.tistory.com 이번에는 세개의 원을 나열해두고 각각 시간차를 두고 일정은 크기로 커졌다 작아졌다 하는 로딩 UI를 만들어보려고 한다. 이미지를 보지 않으면 설명이 어려우니 우선 결과물부터 보자. 먼저 화면 중앙에 레이어를 하나 띄어 그 박스 안..

window resize event 텀을 두고 실행하기 (resize end event) window resize 이벤트안에 어떠한 코드를 넣으면 매 resize시마다 이 코드가 실행된다. 의도적으로 매 resize마다 코드를 실행해야 하는 경우도 있지만, 그렇지 않은 경우라면 이는 매우 비효율적이고 때에 따라서는 브라우저에 과부하를 줄 수도 있다. 윈도우 리사이즈시 console.log을 찍어보자. 아래 코드를 보자. //Javascript window.addEventListener('resize', function(){ console.log('resize event!'); }); //jQuery $(window).on('resize', function(){ console.log('resize even..

inputbox 포커스 효과 (유튜브 댓글 입력 폼) UI Clone 나는 유튜브를 즐겨보는 편인데 영상을 보기만 하지 댓글을 단다거나 추천을 누른다거나 하는 등의 리액션은 잘 안하는 편인데, 어떤 영상을 보다가 너무 영상이 와닿아서 영상에 댓글을 달려고 하는 중 인풋박스(inputbox)에 재밌는 UI를 발견했다. (직업병 ㅠㅠ) 바로 인풋박스에 포커싱이 되면 인풋박스 하단에 라인이 그려지는 애니메이션인데 단순히 좌에서 우로 그려지는 라인이 아닌 가운데서 펼쳐지는 모션이었다. "오 신선한데?" 라는 생각을 하고 나니 갑자기 어디선가 본 것같은 느낌이 들었고 찾아보니 자주 가는 웹사이트의 메뉴에서도 사용되고 있는 효과였다. 우선 폼을 만들어보자. /* CSS */ .box {padding:40px; bo..

window popup 새창(팝업창) 열기, 띄우기 (javascript window.open()) 예전엔 아주 많이 사용했던 윈도우 팝업(window popup)창, 요즘은 보기 힘들다. 주로 내부 시스템, 관리자 같은 곳에 쓰이는 편이다. 가끔 필요할때마다 검색해서 사용하다가 그냥 정리해서 갖고 있으면 좋을 것 같아서 정리해본다. 사용방법은 window객체의 open메소드를 사용하면 된다. //Javascript window.open('경로', '팝업 이름', '옵션'); 아래는 팝업창 함수 사용 예제이다. 팝업창 열기 //javascript function openWindowPop(url, name){ var options = 'top=10, left=10, width=500, height=600,..

페이지 프린트(print)할때 background 안나오는 현상 해결 오프라인에서 사용할 문서를 온라인에서 출력할 수 있는 페이지(팝업창)를 작업해달라는 요청이 와서 작업을 진행했다. 진행할 업무 얘기를 들었을때부터 "아 뭔가 프린트할때 이슈가 생기겠구나" 예상은 하고 우선 보내준 엑셀 파일을 참고하여 UI 작업을 진행했다. 별도 디자인이 없는 상황에서 참고용으로 준 엑셀문서보다는 보기좋게 결과물이 나와야 했기 때문에 여기저기 테이블 스타일을 참고하여 웹페이지 작업은 마무리됐다. 그리고 별 기대없이 해당페이지를 출력해봤다. 결과는? 역시 보란듯이 background-color가 표시되지 않았다. 예상했기에 덤덤하게 관련 키워드로 검색해보니 @media print 안에 -webkit-print-color-..

jQuery 사용, 이제는 정말 그만해야 하는걸까? (2020년 2월) 웹개발의 패러다임이 점차적으로 바뀌면서 예전에 흔히 말하던 웹퍼블리셔의 입지는 점점 설 곳이 좁아지고 있는 것 같은 분위기이다. 그리고 개발자들 사이에서는 jQuery 사용을 지양하려는 시도가 2017년쯤부터 조금씩 있었던 것 같다. 실제로 구글에 jQuery관련 글들에서도 지양, 퇴물, 퇴출 등 부정적인 단어가 섞인 관련 글들을 쉽게 찾아볼 수 있다. 평소 UI개발 시 jQuery를 즐겨 사용하고 있기때문에 많을 글들을 읽어보았고 또 해당글의 댓글란에서 글쓴이와 의견이 다른 사람들과 토론을 나누는 것들도 다 읽어보았다. jQuery를 부정적으로 보는 시각의 의견은 주로 개발 트렌드, 속도(페이지로드, 동작), 잘못된 javascri..

카톡(카카오톡)에서 URL 링크 공유 시 미리보기 썸네일 이미지와 내용 수정하기 (feat.og meta data) 카카오톡을 통해 지인들에게 특정 이벤트나 정보같은 것을 공유하기 위하여 URL링크를 공유한 경험이 한번쯤은 있을 것이다. (난 아주 적극적으로 공유기능을 사용하는 편이다.) 나는 URL만 전달 해줬는데 카카오톡 메세지에 자동으로 해당 페이지의 정보가 이어서 전달된다. 썸네일이미지, 제목, 내용 일부 미리보기가 지원된다. 이게 어떻게 가능한걸까? 이는 http://~ 형태의 URL 메세지가 전달된 경우 카카오톡에서 웹페이지 링크라는 것을 판단하고 미리 해당 웹페이지의 head 태그 내에서 og(Open Graph) meta 정보를 찾고 그 중 "og:title(제목), og:descripti..

지도 이미지맵 온라인에서 쉽게 만들고 코드(좌표) 가져오기 (With.Image Map Generator) 요즘에는 이미지맵(image map)은 잘 쓰이지 않는다. 이미지를 큼지막하게 잘라서(여백포함하여) 웹페이지를 만들던 때엔 이미지맵이 정말 유용하게 사용됐었다. 하지만 분명 이미지맵이 사용되어야 하는 순간이 있다. 아래 이미지는 네이버 부동산 페이지에서 가져온 서울시 지도 일부이다. 예를 들어 위와 같은 이미지에 각 구별로 링크를 걸어달라고 한다면 어떻게 작업할 것인가? 바로 이런 경우에 이미지 맵을 유용하게 사용할 수 있다. 하지만 사각형이 아닌 저런 영역의 이미지 맵을 직접 포토샵을 열어서 꺾어지는 모든 부분의 좌표를 일일이 따서 코드로 표현하기란 쉽지 않은 일이다. 바로 이런 어려움을 해결해 ..

VSCode(비주얼스튜디오코드)에서 SFTP에 직접 붙어 작업하기 (부제 : 안녕, Editplus) 아마 웹개발자라면 누구나 Editplus를 써보았을 것이다. 아니, 지금도 사용하고 있는 웹개발자도 많을 거라 생각된다. FTP에 직접 붙어서 서버에 있는 파일을 직접 열어 작업하고 저장하는데는 Editplus만한 툴이 없다고 생각된다. 허나 나는 FTP에 직접 붙어서 작업할 일도 없어지기도 하고 서버에 직접 붙어서 작업하다보면 다수의 개발자가 존재할 경우 충돌이슈나 버전관리도 안되기때문에 사용한지는 꽤 됐다. 아예 Editplus는 설치도 안되어있다. 최근에는 주로 VSCode나 Eclipse를 주로 사용하는 편인데 얼마전 회사 업무 중 직접 FTP에 붙어서 작업해야하는 이슈가 생겨 VSCode에서 직..