코드공부방

텍스트(*.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..

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