본문 바로가기

TOOL31

제플린 Zeplin 제플린(Zeplin)은 디자이너 및 개발자를 위한 공동 작업 응용 프로그램입니다. 제플린은 스케치 또는 포토샵과 연동하여 자동으로 작업한 결과물을 이미지 파일 Asset과 디자인 가이드로 생성해 줍니다. https://zeplin.io/ Zeplin Connected space for product teams. Handoff designs and styleguides with accurate specs, assets, code snippets—automatically. zeplin.io 1. 다운 및 설치 아래 사이트에서 본인의 운영체계와 맞는 설치 프로그램을 다운 받아 설치하고 로그인 합니다. https://support.zeplin.io/en/articles/244698-downloadi.. 2020. 11. 10.
VSCode ftp-simple gangnam-americano.tistory.com/26 [VSC] Visual Studio Code에서 FTP로 remote(원격)서버 연동하기 [VSC] Visual Studio Code에서 FTP로 remote(원격)서버 연동하기 오늘은 Visual Studio Code로 Reactjs를 개발하는데 있어 remote서버에 FTP로 연동하여 바로 코딩하는 방법에 대해 알아보겠다. 우선, Visual Stu.. gangnam-americano.tistory.com 오늘은 Visual Studio Code로 Reactjs를 개발하는데 있어 remote서버에 FTP로 연동하여 바로 코딩하는 방법에 대해 알아보겠다. 우선, Visual Studio Code를 켜고 좌측 메뉴중 제일 밑에있는 확장버턴을 눌러.. 2020. 9. 16.
VSCode : OSX Finder에서 열기 https://gist.github.com/tonysneed/f9f09bfa28bcf98e8d8306f9b21f99e2 Add a command to Finder services in Mac OSX to open a folder in VS Code Add a command to Finder services in Mac OSX to open a folder in VS Code - Mac OS X: Open in Visual Studio Code gist.github.com 1. Automater를 시작합니다 2. 파일메뉴에서 신규를 선택합니다. 3. 서비스를 선택합니다. 4. "서비스가 받는 선택 항목: 파일 또는 폴더", "선택 항목 위치: Finder"를 선택합니다. 5. 왼쪽 화면에서 "셸 스크립트 .. 2020. 9. 11.
macOS, 파이썬 API 마인크래프트 서버 설치 맥을 기준으로 한 설치 및 설정입니다. 1.마인크래프트설치 -http://minecraft.net 에서 구입하여 설치합니다. 2.파이썬 3.5.6 설치 및 설정 -brew설치 $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)” -파이썬 설치 및 확인 $ brew install python3 $ python3 —version 3.JDK SE설치 -http://www.oracle.com/technetwork/java/javase/downloads/index.html 접속 후 1.8 이상 다운로드 및 설치 -자바 설치 확인 $ java -version 4.마인크래프트 파이썬 API,.. 2020. 8. 15.
홈브루 설치하기 설치하는 방법 먼저 홈브루를 내 컴퓨터에 설치했는지 터미널에 brew --version을 입력해 확인한다. -bash: brew: command not found가 나와 없다는 것을 확인한다. 터미널에 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"를 입력하고 엔터를 누른다. 엔터를 누른다. 내 컴퓨터의 비밀번호를 입력한다. 설치가 끝났다. 참고 https://brew.sh/index_ko 2020. 8. 15.
emmet 설정 변경 Emmet Cheat Sheet docs.emmet.io/cheat-sheet/ Cheat Sheet Download cheat sheet as printable PDF A5 docs.emmet.io https://code.visualstudio.com/docs/editor/emmet#_using-custom-emmet-snippets Emmet in Visual Studio Code Using Emmet abbreviations inside Visual Studio Code. code.visualstudio.com Visual Studio Code의 Emmet Emmet 스 니펫 및 확장에 대한 지원은 Visual Studio Code에 내장되어 있으며 확장이 필요하지 않습니다 . Emmet 2.0 은.. 2020. 8. 14.
macOS 게이트키퍼 비활성화 방법 https://extrememanual.net/33681 macOS 게이트키퍼 비활성화 방법 - 익스트림 매뉴얼 맥/맥북의 운영체제인 macOS는 인터넷에서 다운로드 받은 외부 프로그램을 설치할 때 '확인되지 않은 개발자가 배포한 앱' 또는 '~~은(는) 손상되었기 때문에 열 수 없습니다. 해당 항목을 휴지통�� extrememanual.net 2020. 8. 14.
emmet 사용하기 html,css 등을 작성할때, 시간을 단축시켜주는 확장옵션입니다. https://emmet.io/ 해당에디터 : vscode, atom, notepad++ 외 다수 그외에도 emmet 플러그인만 설치돼있으면 가능합니다. https://docs.emmet.io/cheat-sheet/ Cheat Sheet Download cheat sheet as printable PDF A5 docs.emmet.io 2020. 8. 13.
git clone(복제) 후 다시 git push(올리기) 1. git 설치하기 - 많은 선택지가 나오는데 그냥 무조건 next를 누르세요~ https://git-scm.com/downloads Git - Downloads Downloads Mac OS X Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific git-scm.com 2. 내 컴퓨터에 새폴더를 만들고 Git 저장소 받아오기(clone).. 2020. 7. 31.
Line Awesome 사용하기 코드만 넣으면 아이콘이 뽕!!! 엄청나게 편한 Line Awesome의 사용방법에 대해 알아봅시다. https://icons8.com/line-awesome Download free icons, music, stock photos, vectors Designers, download the design stuff for free — icons, photos, UX illustrations, and music for your videos. icons8.com 사이트에 접속해서 코드만 복사해오면 사용이 가능하다. 그 전에 css를 설치해야 한다. 1. 설치하기 Getting Started 버튼을 눌러 설치 페이지로 이동한다. 1. CDN에서로드 Font Awesome이 이미 설치되어있는 경우 간단히 Line .. 2020. 7. 30.
크롬 시크릿모드 1. 시크릿 모드 실행방법 컴퓨터에서 Chrome을 엽니다. 오른쪽 상단에서 더보기 > 새 시크릿 창 을 클릭합니다. 3. 시크릿 아이콘이 생성됩니다. 다음과 같이 키보드 단축키로 시크릿 창을 열 수도 있습니다. Windows, Linux, Chrome OS: Ctrl + Shift + n을 누릅니다. Mac: ⌘ + Shift + n을 누릅니다. 시크릿 창과 일반 Chrome 창 간에 전환할 수 있습니다. 시크릿 창을 사용할 때만 비공개로 탐색합니다. 2. 시크릿 작업표시줄에 고정하기 1. 바탕화면에 바로가기를 만듭니다. 2. 아이콘 마우스 오른쪽 클릭 후 속성 선택합니다. 3. 속성 > 바로 가기 > 대상(T) 의 exe"뒤에 한칸 떼고 --incognito라고 입력하고 적용을 누르고 확인을 눌러줍니다. 2020. 7. 28.
유용한 10가지 어도비 XD 플러그인 Adobe XD 의 8 월 릴리스 에서 XD는 새로운 플러그인 패널을 도입했습니다. 플러그인 패널은 플러그인 개발자가 플러그인을 표시하는 데 사용할 수있는 디자인 캔버스와 함께 새로운 표면입니다. 사용자가 디자인 작업을하는 동안 플러그인을 열어두면 디자이너에게는 큰 이점이 있습니다. XD 플러그인은 디자인 캔버스에서 사용자의 선택을 읽고 실시간으로 반응 할 수 있습니다. 새로운 플러그인 패널을 사용하는 유능한 개발자 커뮤니티에서 빌드 한 플러그인이 이미 많이 있습니다. 지난주에 시도한 10 가지 플러그인은 다음과 같습니다. 각 플러그인 사용 경험을 공유합니다. UI Faces by Mighty Alex 사용자 인터페이스 디자이너 인 경우 디자인 모형에서 아바타를 더 사실적으로 보이게 추가하는 빈도를 알고.. 2020. 7. 24.
XD 플러그인 추천 https://mariedays.tistory.com/36 어도비 XD 추천 플러그인 워크플로우의 가속화 및 자동화를 구현하는 강력한 플러그인 Artboard Plus 아트보드 재정렬 ​ Lorem Ipsum 더미 텍스트 생성기 ​ ***** ​ UI Faces 아바다를 생성 원하는 타입으로 ​ User Profile 아바타 생성 랜덤 ​ ***** ​ Unsplash Random Image Unsplash에 있는 무료 이미지를 랜덤으로 가져오는건데 ​ PhotoSplash Unsplash에 있는 무료 이미지를 랜덤으로 가져오는건데 선택할 수 있음 ​ ***** ​ Web Export 아트보드를 HTML, CSS로 내보낼 수 있다 ​ Icondrop by Iconscout 아이콘을 바로 사용할 수 있는 .. 2020. 7. 24.
Adobe XD 단축키 Adobe XD에서 사용할 수 있는 모든 키보드 단축키의 목록입니다. XD는 문서 작업을 신속하게 진행하는 데 유용한 단축키를 제공합니다. 대부분 메뉴의 명령 이름 옆에 키보드 단축키가 표시됩니다. 다운로드가 가능한 버전의 키보드 단축키 인쇄에 최적화된 버전의 이들 키보드 단축키를 다운로드하고 인쇄할 수 있습니다. 클릭하여 다운로드 XD에서 모든 키보드 단축키를 볼 수 있는 새로운 플러그인이 도입되었습니다. 플러그인을 설치하려면 플러그인 > 키보드 단축키 > 설치로 이동하십시오. 플러그인을 설치한 후 다음 단축키를 사용하여 키보드 단축키에 액세스합니다. Mac: Shift + ⌘ + f Windows: Shift + Ctrl + f 일반 단축키 결과macOS 키보드 단축키Windows 키보드 단축키 종료.. 2020. 7. 22.
Adobe XD 설치하기 Adobe XD 다운로드 https://www.adobe.com/kr/products/xd.html 탁월한 협업 앱으로 웹 사이트, 모바일 앱, 음성 인터페이스, 게임 등의 디자인 제작 및 공유 프로그램 새로운 기능 소개 XD는 정기적으로 추가되는 새로운 기능을 통해 지속적으로 향상되고 있습니다. 업데이트된 최신 기능 중 일부를 소개합니다. 새로운 기능 모두 보기 공동 편집(베타) 동일한 문서를 동시에 여러 팀원과 작업하여 보다 신속하게 디자인할 수 있습니다. 디자인 토큰 색상과 문자 스타일에 사용자 정의 이름을 추가하여 최신 파일로 디자이너와 개발자 간의 협업을 원활하게 진행할 수 있습니다. 스택 오브젝트 간의 간격을 설정해 두면 그룹의 오브젝트 크기가 바뀌거나 새로운 오브젝트가 그룹에 추가되더라도 일.. 2020. 7. 20.
[펌] VS Code ftp-simple https://gangnam-americano.tistory.com/26 [VSC] Visual Studio Code에서 FTP로 remote(원격)서버 연동하기 [VSC] Visual Studio Code에서 FTP로 remote(원격)서버 연동하기 오늘은 Visual Studio Code로 Reactjs를 개발하는데 있어 remote서버에 FTP로 연동하여 바로 코딩하는 방법에 대해 알아보겠다. 우선, Visual Stu.. gangnam-americano.tistory.com [VSC] Visual Studio Code에서 FTP로 remote(원격)서버 연동하기 오늘은 Visual Studio Code로 Reactjs를 개발하는데 있어 remote서버에 FTP로 연동하여 바로 코딩하는 방법에 대해.. 2020. 4. 21.
Mac 키보드 단축키 Mac 키보드 단축키 보통은 마우스, 트랙패드 또는 기타 입력 기기가 있어야 가능한 작업을 특정 키 조합을 눌러 수행할 수 있습니다. 키보드 단축키를 사용하려면 하나 이상의 조합 키를 누른 상태에서 단축키의 마지막 키를 누릅니다. 예를 들어 command-C(복사)를 사용하려면 command 키를 누른 상태에서 C 키를 누른 다음 두 키를 놓습니다. Mac 메뉴와 키보드에서는 다음과 같이 조합 키를 비롯하여 특정 키가 기호로 표시되기도 합니다. command(또는 cmd) ⌘ shift ⇧ option(또는 alt) ⌥ control(또는 ctrl) ⌃ caps lock ⇪ fn Windows PC용 키보드에서는 option 대신 Alt 키, command 대신 Windows 로고 키를 사용합니다. 일부.. 2020. 4. 10.
Git 무료 웹호스팅 사용하기 gitHub에 무료로 기본 웹사이트를 만들어서 올려놓을 수 있는 웹호스팅 또는 미디어 호스팅을 만들 수 있습니다. gitHub도 트래픽 제한과 용량 제한이 있긴 합니다. 저장소 제한 용량은 1GB 입니다. 제한 트래픽은 100GB/월 1. Settings 페이지로 이동 2. 화면을 쭉 내리면 GitHub Pages 섹션이 나옵니다. Choose a theme 클릭합니다. 3. 테마를 선택합니다. (어느 것이든 상관 없습니다.) 4. 완료하면 기본 사이트가 만들어졌습니다. 웹브라우저로 https://아이디.github.io/프로젝트(저장소)이름/ 접속해보세요. https://아이디.github.io/프로젝트(저장소)이름/ https://eehd80.github.io/Oct/ 2020. 3. 26.
Git 저장소의 데이터 복제하기 1. git 설치하기 - 많은 선택지가 나오는데 그냥 무조건 next를 누르세요~ https://git-scm.com/downloads Git - Downloads Downloads Mac OS X Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific git-scm.com git을 사용하려면 nodejs가 깔려있어야 합니다. 없으신 분은 깔.. 2020. 3. 18.
Git 저장소에 코드 올리기 Git 저장소의 간단 구조 1. Git 사이트 회원 가입 후 리포지토리 생성하기 아래 사이트에서 회원가입을 해주세요~ https://github.com/ Build software better, together GitHub is where people build software. More than 40 million people use GitHub to discover, fork, and contribute to over 100 million projects. github.com 저장소 생성을 위해 Repositories를 생성합니다. README파일은 내 컴퓨터에서 생성하려하니 여기에선 만들지 않습니다. Initialize this repository with a README를 체크하지 마세요 2. 프.. 2020. 3. 11.
hexo와 github로 blog 구축하기 hexo와 github로 블로그 구축하기 개발(합니다)/시나브로(이슈) 2018. 12. 7. 15:40 블로그 시작 전부터 하는 갈등 이전부터 개발자스럽게 직접 구축해서 블로그를 운영해보고 싶었습니다. 정적페이지를 운영해보고 싶어서 찾아본 결과 일반 블로그 1. 네이버 2. 티스토리 플랫폼 제공형 일반 블로그는 두 가지가 우리나라에서는 대표적이었습니다. 카페24 같은 호스팅 업체에서는 블로그 보다 쇼핑몰 정적페이지 제공을 합니다. 구축형 블로그 1. 워드프레스 2. git hub 3. git lab 4. 손수 개발 이런 저런 고민 끝에 티스토리로 정했습니다. 장점 1. HTML 작성이라는 일말의 자유 2. 초대장 형태(지금은 없어짐) 3. 플러그인 지원 4. 깔끔한 스킨 5. 파일 데이터의 여유와 안전.. 2020. 3. 3.
GitHub 자주 사용하는 명령어 정리 GitHub 명령어 요약 git init : git 생성하기 git clone git_path : 코드가져오기 git checkout branch_name : 브랜치 선택하기 git checkout -t remote_path/branch_name : 원격 브랜치 선택하기 git branch branch_name : 브랜치 생성하기 git branch -r : 원격 브랜치 목록보기 git branch -a : 로컬 브랜치 목록보기 git branch -m branch_name change_branch_name : 브랜치 이름 바꾸기 git branch -d branch_name : 브랜치 삭제하기 git push remote_name — delete branch_name : 원격 브랜치 삭제하기 ( git.. 2020. 3. 2.
git 설치 및 가입 GitHub 란 무엇입니까? GitHub는 버전 제어 및 협업을위한 코드 호스팅 플랫폼입니다. 그것은 당신과 다른 사람들이 어디서나 프로젝트에 협력 할 수 있습니다. 이 튜토리얼에서는 리포지토리 , 브랜치 , 커밋 및 풀 요청 과 같은 GitHub 필수 사항에 대해 설명 합니다 . 자신 만의 Hello World 리포지토리를 만들고 코드를 만들고 검토하는 일반적인 방법 인 GitHub의 풀 요청 워크 플로를 배우게됩니다. 코딩 불필요 이 튜토리얼을 완료하려면 GitHub.com 계정 과 인터넷 액세스 가 필요합니다 . 코딩, 명령 줄 사용 또는 Git (버전 제어 소프트웨어 GitHub가 내장 된)을 설치하는 방법을 몰라도됩니다. 팁 : 이 안내서를 별도의 브라우저 창 (또는 탭)에서 열면 자습서의 단계.. 2020. 3. 2.
VS Code 설치 및 셋팅하기 VS Code 란? (Visual Studio Code) MS에서 제공하는 크로스 플랫폼 에디터로 다양한 언어를 서포트 하며, IntelliSense와 Git 기능, 그리고 Extension 을 이용한 확장 기능을 제공하고 있다. Atom, Brackets 등과 유사. 설치방법 Windows https://code.visualstudio.com 에 접속하여 다운로드 후 설치 Ubuntu Visual Studio Code 설치 Visual Studio Code 다운로드 링크 에서 Linux .deb 파일 다운로드 $ sudo dpkg -i code_1.23.1-1525968403_amd64.deb 만약 Package libconf-24 is not installed. 에러가 발생한다면 $ sudo apt-.. 2020. 2. 28.
맥북 단축키 - command + shift + f : 크롬 창 탭, 즐겨찾기 보이기 - command + control + f : 창 최대화 + 오른쪽 패널로 화면이동 - fn + F11 또는 command + F3 : 바탕화면 바로가기 - fn + up : page up - fn + down : page down - command + up : home - command + down : end - command + m : 최소화 ( 휴지통 옆 닥에 아이콘화됨 ) - command + , : 환경설정 ( preference ) - command + shift + 4 : 부분 스크린샷 ( 마우스로 드래그 한 부분이 스크린샷 된다. ) - command + shift + 4 + space + click : 현재창 스크린.. 2020. 2. 28.
VS code sass compile https://bbol-world.tistory.com/80 VSCODE sass compile 하기 2018/05/24 - [Programing] - VSCODE 에디터 설치 및 세팅 compile 하기 위한 방법은 여러가지가 있지만, VSCODE를 이용하여 간편하게 compile 하는 방법이 있으니 그 방법을 추천한다. 시작하기에 앞서 sass를 더.. bbol-world.tistory.com 2020. 2. 26.
와이어프레임/프로토타입 제작에 유용한 라이브러리 Kakao Oven Web / Free 다음 카카오에서 제작한 웹 기반 프로토타이핑 툴로 기본으로 제공되는 디자인 요소들이 편리한 사용을 도와주며, 직관적인 인터페이스를 갖추고 있어 초보 기획자에게 유용한 툴이다. 페이지 혹은 요소마다 링크를 걸어 웹 테스트 화면을 만들 수 있으며 아이디어 단계나 초기 기획 회의 단계에서 간편하게 사용이 가능하다. 모든 기능은 무료로 사용이 가능하다. https://ovenapp.io/ OvenApp.io Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공) ovenapp.io Sketch Mac/Purchase Mac 기반의 와이어프레임, 프로토타이핑, 디자인 툴이다. 이미 많은 사용자가 사용하고 있는 주요 디자인 툴로 대부분의 웹/앱.. 2020. 2. 6.
FileZilla 설치하기 1. 파일질라 홈피 접속 https://filezilla-project.org/ FileZilla - The free FTP solution Overview Welcome to the homepage of FileZilla®, the free FTP solution. The FileZilla Client not only supports FTP, but also FTP over TLS (FTPS) and SFTP. It is open source software distributed free of charge under the terms of the GNU General Public Licens filezilla-project.org 2. Download FileZilla Client 다운로드 3. 일반 .. 2020. 2. 6.
닷홈 무료웹호스팅 가입하기 https://www.dothome.co.kr/web/free/index.php 닷홈 - 호스팅은 닷홈 닷홈은 무제한 웹호스팅, 무료호스팅, 도메인, 홈페이지빌더, 무제한메일, SSL보안인증서, 서버호스팅, 코로케이션 서비스를 제공하고 있습니다. www.dothome.co.kr 아래 주소에서 국내 최대 규모의 무료호스팅 배너를 눌러 호스팅을 신청하세요. 2020. 2. 6.
웹디자인, 웹퍼블리싱 준비할 것들 1. 네이버카페 가입 https://cafe.naver.com/mocoding 인터랙티브웹 / 웹디자인기능사 / H... : 네이버 카페 웹과 모바일의 디자인과 코딩을 배우는 곳 cafe.naver.com 2. 프로그램 설치 디자인 편집 Adobe Photoshop https://www.adobe.com/kr/products/photoshop.html Adobe XD https://www.adobe.com/kr/products/xd.html sketch (MAC) https://www.sketch.com/ The digital design toolkit www.sketch.com 브라우저 https://www.google.com/intl/ko/chrome/ Chrome 웹브라우저 더욱 스마트해진 Goog.. 2020. 2. 6.