코드공부방

나는 메모나 스케쥴관리를 나름 철저히 한다고 자부한다. 스케쥴은 거창한 것은 아니고 업무/사 적으로 해야할 일이나 아주 사소한 약속 같은 것들을 말한다. 메모하는 습관은 약 15년전 부사관 생활을 할때 사소한 것들을 자꾸 잊어버려 혼나면서 펜과 수첩등을 이용했던 것이 시작이었다. 그때는 펜과 수첩을 항상 주머니에 갖고 다니면서 그때 그때마다 필요한 것을 기록하고 필요하면 수첩을 펼쳐 찾아서 활용하곤 했다. 그렇게 2012년 쯔음까지 수첩에 메모를 하다가 수첩에 메모를 하면 과거 기록을 찾는 것에 한계가 느껴져서 관련 애플리케이션을 찾아보다가 에버노트라는 것을 알게됐다. 에버노트 정말 신세계였다. 윈도우/MAC/iOS/Android 전용 애플리케이션이 존재하고 웹에서도 접속이 가능하여 언제 어디서든 원하면..

정말 오랜만에 블로그에 글을 남긴다. 년 초반에는 거의 1일 1포스팅을 할 정도로 열정이 넘쳤었는데, 조금씩 바쁘다는 핑계로 멀리하다가 이제는 아예 관리를 안하는 수준까지 왔다. (블로그의 존재 자체를 잊은 수준.. ㅠ) 그러다 문득 2020년이 2주 정도밖에 안남았다는 생각에 연말결산 전 다시 마음을 다잡기 위해 글을 남겨보기로 했다. 지난 8월 온라인 강의 플랫폼 "패스트캠퍼스"의 파이썬 올이원 강의를 결제한지 4개월이 다 되어가고 있다. (지난 포스팅은 아래 링크를 확인하면 된다. 링크가 무슨 광고 배너같이 생겼네.. 아래 글 링크는 광고배너가 아닙니다..) 패스트캠퍼스 - 파이썬 (Python) 온라인 강의 결제! 패스트캠퍼스 - 파이썬 (Python) 온라인 강의 결제! 정말 오랫동안 아래와 같..

텍스트(*.txt) 파일 불러와(import) 출력(print)하기 python에서 text파일 읽어와 print 테스트를 하기 위해 샘플 text파일을 생성했다. (파이썬 파일과 동일경로에 생성) 1. 출력하기 방법1 > 내장함수 사용 (open, close, read) # open > 반드시 close 메소드 사용하여 파일을 닫아야 함 data = open('txt_file_sample.txt', 'r', encoding="UTF8") # read함수는 전체 내용 전체를 문자열로 불러온다. contents = data.read() print(contents) data.close() 2. 출력하기 방법2 > with문 사용 # with > close 사용하지 않아도 됨 with open('txt_fil..

패스트캠퍼스 - 파이썬 (Python) 온라인 강의 결제! 정말 오랫동안 아래와 같은 고민을 하다가 결국 오늘 결제를 했다. 1. 온라인 강의 결제를 할까? 말까? 일단 매일 출근해야하는 직장인이며, 일하지 않는 시간에는 육아를 아예 손뗄 수 없기 때문에 오프라인 강의보다는 온라인 강의를 선택해야했고, 끝까지 포기하지 않고 끝까지 완강할 수 있을까란 의심, 하지만 이제 선택이 아닌 필수로 해야할 시기가 온 것 같아서 온라인 강의 결제를 해보기로 결정했다. 필수라고 생각한 이유는 직접 만들어보고 싶은 서비스도 있고, 이제 경력이 많은 웹퍼블리셔는 정말 거의 벼랑 끝에 온 것 같은 느낌이다. (이 생각은 실제로 업계에서 웹퍼블리셔라는 직종이 위기에 처한 상태인가에 대한 것과는 무관하게 지극히 개인적인 느낌이..

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..