본문 바로가기

업무이야기

 (46)
FTP 없이 파일 다운로드 받기 ( 구글 확장프로그램 이용 ) ** 크롬 확장프로그램이기 때문에 크롬에서 가능한 방법입니다. 크롬에서 확장프로그램 "Save All Resources" 설치 1. 크롬에서 2. 구글 검색창에 "크롬 확장프로그램" 검색 3. "Chrome 웹 스토어 - 확장프로그램" click 4. 좌측에 스토어 검색에서 "save all resurces" 검색 5. 우측에 검색된 "Save All Resources" click 설치 후 확장프로그램 Save All Resources 사용하기 설치를 했다면 주소 표시줄 우측에 해당아이콘이 나타나게 됩니다. 1. 크롬을 한번 껐다가 킵니다. 2. 소스를 다운받고 싶은 사이트로 들어갑니다. 3. 키보드에서 'F12'를 눌러 크롬 개발자 도구를 켭니다. 4. 개발자 도구에서 >> 버튼을 클릭해서 "Resou..
버티컬 마우스 로지텍 MX Vertical 일주일 사용 후기 / 버튼설명 약 2주 전쯤에 남자친구가 천일 선물로 버티컬 마우스에서 유명한 로지텍의 'MX Vertical'을 선물해주었습니다. : ) 서로 갖고 싶었던 것들을 알아뒀다가 선물해 주었는데요, 회사에서 공급해주는 고무 부분이 다 뜯어져 나간 마우스를 사용하고 있던 중이라 선물 받고 기쁜 마음으로 2주 정도 사용하다 후기를 남깁니다. 저는 손목도 튼튼하고 안좋은 마우스를 써도 기능적인 부분에서 무난하게 썼던 터라 MX * 마우스 버튼들의 기본 값 * MX Vertical 마우스의 장점 - 컴퓨터 연결 방법 ( 3가지 ) * 실사용 후기 이 순서대로 포스팅을 해볼게요. 포스팅하기에 앞서 마우스의 옵션들은 아래 페이지에서 .exe를 다운받아 변경하실 수 있습니다. https://www.logitech.com/ko-kr/p..
jQuery 슬라이드 변형, li 삭제, 추가해서 실시간 현황 UI 만들기 이번에 받은 일 중에 실시간 현황 리스트를 만들게 되었습니다. 해당 UI는 li 개수는 정해져 있지만 실시간 현황처럼 li가 하나씩 위로 올라가는 animation 입니다. 기존 슬라이드 만들던 방식을 생각하면 고정 div-container가 overflow:hidden을 가지고 있고 ul 태그가 위로 올라가는 것처럼 보입니다. 하지만 위 gif파일에서는 확인이 안되지만 가장 첫번째 li가 복제된 후 사라지고 그 복제된 li를 ul 가장 끝부분에 붙혀 넣어 주고 끊임없이 무한반복 되도록 첫번째 li가 마지막 li가 되도록 돌아가는 구조입니다. UI 마크업 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 ..
vscode에 XAMPP 설치해서 php 파일 로컬에서 보기 외 크롬확장프로그램 소개 XAMPP 파일 다운로드하기 1. 아래 페이지에서 XAMPP 을 다운로드 받습니다. https://www.apachefriends.org/index.html XAMPP Installers and Downloads for Apache Friends What is XAMPP? XAMPP is the most popular PHP development environment XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to us www..
닷홈 무료호스팅 이용하고 파일 업로드하기 닷홈 무료 호스팅 계정 만들기 1. 닷홈에 접속해서 회원가입을 합니다. https://www.dothome.co.kr/ 닷홈 - 호스팅은 닷홈 닷홈은 무제한 웹호스팅, 무료호스팅, 도메인, 홈페이지빌더, 무제한메일, SSL보안인증서, 서버호스팅, 코로케이션 서비스를 제공하고 있습니다. www.dothome.co.kr 2. 네비게이션에서 [웹호스팅 - 무료호스팅] 을 클릭해서 무료호스팅 페이지로 이동합니다. 디스크, 트래픽(일), DB 모두 200MB 사용이 가능합니다. 담당자 정보, 계약자 정보에 모두 제 정보를 기입했습니다. FTP 아이디는 곧 도메인 주소가 되며 후에 파일을 업로드 할 때 사용됩니다. 내가설정한FTP아이디.dothome.co.kr 무료 호스팅의 경우 dothome이 항상 들어가고 다른..
Gulp 설치하고 시작하기 Gulp 설치하기 gulp를 사용하기 위해서는 node.js 를 다운로드 받으셔야 합니다. window + R 키를 함께 눌러 cmd를 입력한 뒤 cmd 창에서 아래와 같이 노드와 npm 버전을 확인하는 명령어를 입력 합니다. node --v npm --v 해당 명령어로 node와 npm이 제대로 설치되었는지 확인합니다. 해당 명령어는 node와 npm의 버전을 확인하는 명령어로 제대로 설치가 되었다면 해당 명령어 입력 후 엔터를 누르시면 파일의 버전이 나옵니다. [gulp 전역설치] 어디에서나 gulp명령어를 사용할 수 있도록 전역에 설치합니다. npm install gulp -g gulp -v 버전이 제대로 설치되었는지 확인한다. [gulp local 설치] 전역에 설치했더라도 해당 local(폴더)..
css 선택자 nth-child 및 nth-of-type 괄호에 플러스, 마이너스, 곱하기 수식사용 저번 포스팅에서는 선택자 nth-child와 nth-of-type에 대해서 썼었습니다. 각각의 선택자의 공통점과 궁금했었던 class와 사용시 어떻게 동작하는지 정리를 해보았습니다. css 선택자 :nth-child, :nth-of-type css 선택자의 다양한 선택자를 알아보자1 :nth-child, :nth-of-type 사용 방법과 class와 같이 사용할 때의 다른 사람들이 사용하는 코드를 보면 다양한 선택자를 적재적소에 잘 사용하는 사람들이 있습니다. 그때마다 많이 배우게 되는것 같습니다. 이번 포스팅에서는 제가 자주 사용하지 않았었지만 worker-k.tistory.com nth-child와 nth-of-type를 사용할 때에는 보통 nth-child(1), nth-of-type(1)과 같이..
자바스크립트로 클릭하면 타겟이 있는 화면으로 스크롤 이동하게 하기 모바일에서는 화면이 작아서 컨테츠로인한 스크롤이 어쩔 수 없이 많이 생기게 됩니다. 그렇기 때문에 '약관 동의'와 같은 중요한 컨텐츠들이 밑에 있을때 그 내용을 확인을 위해서 체크 박스를 클릭하면 아래의 컨텐츠가 화면에 딱 보일 수 있도록 해달라는 오더를 받았습니다. 저는 'scorllIntoView'라는 자바스크립트 내장함수로 간단하게 해결할 수 있었지만 다른 방법들에 대해서도 공부차원에서 살펴보려고 합니다. 타겟을 화면 가운데로 오게 하는 방법은 여러가지가 있습니다. 1. a태그의 속성 href와 타겟의 id를 이용하는 방법입니다. 1 2 3 4 go target block target cs 이미지 왼쪽 1col, 2col은 마지막 div가 주석처리 됐을 때의 모습이고 오른쪽은 마지막 div 주석처리..

티스토리툴바