본문 바로가기

분류 전체보기168

워드프레스 다운로드 및 설치하기 1. 워드프레스 다운 받기 아래 링크를 눌러 워드프레스 zip 파일을 다운 받은 후 압축을 풀어줍니다. https://ko.wordpress.org/download/ Download Download WordPress today, and get started on creating your website with one of the most powerful, popular, and customizable platforms in the world. ko.wordpress.org 2. FTP 접속 후 업로드 본인 계정에 접속하여 다운 받은 워드프레스 파일을 /html 폴더에 업로드합니다. 설치는 끝났습니다. 참 쉽죠? 이제 wp 설정만 하면 됩니다. 3. 내 사이트 주소로 접속합니다. 내 닷홈 주소로 접속합니다.. 2020. 6. 26.
[펌] 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.
Wordpress 망보드 설치하기 https://www.mangboard.com/manual/start/ 매뉴얼 | 워드프레스 게시판 망보드 망보드 소개, 버젼별 특징, 설치방법, 게시판 추가방법 www.mangboard.com 망보드 게시판 설치하기 플러그인 자동 설치방법 망보드는 워드프레스 공식 플러그인으로 등록되어 있기 때문에 워드프레스 관리자 > 플러그인 > 새로추가 페이지에서 "mangboard"로 검색해서 클릭만으로 설치가 가능합니다. 망보드 플러그인: https://wordpress.org/plugins/mangboard/ 1. 워드프레스 관리자 > 플러그인 > 새로추가 페이지에서 "mangboard" 키워드를 검색합니다. 2. 망보드 플러그인이 검색되면 "지금 설치" 버튼을 클릭합니다. 3. 망보드 플러그인 설치가 완료되면.. 2020. 4. 21.
input password에 텍스트가 보이지 않을 경우 input[type=password] { font-family: 'Malgun Gothic'; } 2020. 4. 19.
미디어쿼리 @media screen and (min-width:1280px) and (max-width:1599px) { } @media screen and (min-width:1024px) and (max-width:1279px) { } @media screen and (min-width:780px) and (max-width:1023px) { } @media screen and (min-width:640px) and (max-width:779px) { } @media screen and (min-width:480px) and (max-width:639px) { } @media screen and (max-width:479px){ } 2020. 4. 10.
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.
유용한 라이브러리 모음 이미지 갤러리 fancyapps.com/fancybox/3/ fancybox - Touch enabled, responsive and fully customizable jQuery lightbox script Combination of jQuery, CSS transitions to spice up the way modal window opens. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor nibh eu nibh scelerisque malesuada. Morbi mollis eleifend turpis. Mauris consequat convallis volutpa fancyapps.com http://fan.. 2020. 4. 9.
연산자 연산자는 프로그래밍 언어에서 특정 연산을 하도록 하는 문자입니다. 대입 연산자 JavaScript에서 등호 ( =)는 "같음"연산자가 아니라 "대입"연산자입니다. let x = 10; x = x + 5; // x += 5; console.log(x); JavaScript에서는 x + 5의 값을 x에 할당합니다.. (x + 5의 값을 계산하고 결과를 x에 넣습니다. x의 값은 5 씩 증가합니다.) "같음"연산자는 == JavaScript 와 같이 작성 됩니다. 산술 연산사 산술 연산자는 사칙연산과 같은 작업을 하는 연산자를 의미합니다. var x = 5; var y = 2; var z = x + y; // 7 var x = 5; var y = 2; var z = x * y; // 10 연산자 설명 예 실행.. 2020. 4. 1.
변수와 상수 변수와 상수는, 하나의 데이터를 저장하는 그릇이고 특정 이름에 특정 값을 담을 때 사용합니다. let x = 1; console.log(x); // 1 let y = 2; console.log(y); // 2 let z = x + y; console.log(z); //3 x는 값 5를 저장합니다 y는 값 6을 저장합니다 z는 값 11을 저장합니다 변수 변수는 바뀔 수 있는 값을 말하고 한번 값을 선언하고 바꿀 수 있습니다. var 지금까지 많이 사용해온 var 변수 선언 방식은 큰 단점이 있다. var name = 'Html' console.log(name) // Html var name = 'javascript' console.log(name) // javascript 변수를 한 번 더 선언했음에도 불.. 2020. 4. 1.
유용한 css js 라이브러리 WAW.js https://wowjs.uk/ wow.js — Reveal Animations When Scrolling wowjs.uk CSS3Animate https://jackonthe.net/css3animateit/ CSS3 Animate It Examples - Animate Elements on Scroll Sequencing If you want to have a set of animations start one after the other then you can set a sequence time in ms using "data-sequence" then define the order with "data-id". It Works! This animation will start 500ms a.. 2020. 3. 31.
Bootstrap 시작하기 부트 스트랩 세계에서 가장 인기있는 프론트 엔드 컴포넌트 라이브러리를 사용하여 웹에서 반응 형 모바일 우선 프로젝트를 빌드하십시오. 부트 스트랩은 HTML, CSS 및 JS로 개발하기위한 오픈 소스 툴킷입니다. Sass 변수 및 믹스 인, 반응 형 그리드 시스템, 광범위한 사전 빌드 된 구성 요소 및 jQuery를 기반으로하는 강력한 플러그인으로 아이디어를 신속하게 프로토 타입하거나 전체 앱을 빌드하십시오. 다운로드 https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com https://www.w3schools.com/bootstrap/bootstrap_ver.asp.. 2020. 3. 31.
SASS 기본 sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com 중첩 HTML 을 작성할 때 분명히 중첩되고 시각적인 계층 구조가 있음을 알게 될 것입니다. 반면에 CSS 는 그렇지 않습니다. Sass를 사용하면 HTML 의 동일한 시각적 계층 구조를 따르는 방식으로 CSS 선택기 를 중첩시킬 수 있습니다 . 지나치게 중첩 된 규칙은 유지하기 어려울 수 있고 일반적으로 나쁜 관행으로 간주 될 수있는 CSS 를 초과하게됩니다 . 이를 염두에두고 다음은 사이트 탐색을위.. 2020. 3. 30.
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.
SASS(SCSS) 컴파일 하는 방법 sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com SASS(SCSS)를 컴파일하기 위해선 node-sass를 설치해야 하고 node-sass를 설치하려면 node.js가 필요합니다. 아래 순서로 설치해주세요~ 1. node.js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 안정적, 신뢰도.. 2020. 3. 18.
03- 웹디자인기능사 설치 프로그램 1. EDIT 프로그램 - Brackets 시험장에 설치되어 있는 Brackets을 사용해 공부해보겠습니다. 아래 사이트에서 Brackets을 설치해주세요. http://brackets.io/ A modern, open source code editor that understands web design Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like gettin.. 2020. 3. 18.
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.
Hello JavaScript! 크롬브라우저를 열어 개발자모드를 엽니다. 개발자 도구는 윈도우 Ctrl + Shift + I 또는 macOS Command + Option + I 키를 눌러서 열 수 있습니다. 크롬 개발자 도구에서 Console 탭을 열고 입력창에 아래 코드를 입력하세요. console.log 는 콘솔에 특정 내용을 출력하라는 것을 의미합니다. console.log('Hello JavaScript!'); 이번에는 다음 코드를 입력해보세요. console.log(1 + 2 + 3); 우리는 Javascritp를 통해 연산을 할 수도 있습니다. 지금부터는 CodeSandbox 사이트에서 코드를 작성해보겠습니다. https://codesandbox.io/ CodeSandbox: Online IDE for Rapid Web D.. 2020. 3. 14.
JavaScript 입문 JavaScript 는 뭔가요? JavaScript 는 웹 브라우저에서 사용하기 위하여 만들어진 HTML과 웹의 프로그래밍 언어입니다. 왜 JavaScript를 공부해야합니까? JavaScript는 모든 웹 개발자 가 배워야 하는 3 가지 언어 중 하나입니다 . 1. 웹 페이지의 내용을 정의하는 HTML 2. 웹 페이지의 레이아웃을 지정하는 CSS 3. 웹 페이지의 동작을 프로그래밍하는 JavaScript JavaScript가 사용되는 곳은 웹 페이지뿐이 아닙니다. 많은 데스크탑 및 서버 프로그램이 JavaScript를 사용합니다. Node.js가 가장 잘 알려져 있습니다. MongoDB 및 CouchDB와 같은 일부 데이터베이스도 프로그래밍 언어로 JavaScript를 사용합니다. 이 언어는 90년대부.. 2020. 3. 14.
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.
05- [웹디자인기능사] HTML 제작하기 작업 전 프로그램 설치가 필요합니다. 설치를 위해 아래 페이지를 참고하세요. https://oddcode.tistory.com/69?category=836326 웹디자인기능사 설치 프로그램 1. EDIT 프로그램 - Brackets 시험장에 설치되어 있는 Brackets을 사용해 공부해보겠습니다. 아래 사이트에서 Brackets을 설치해주세요. http://brackets.io/ A modern, open source code editor that understands.. oddcode.tistory.com HTML 코딩 시 중요(★★★★★) 체크포인트 웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 하며, HTML 유효성검사 (W3C validator)에서 오류(‘ERROR’)가 없도록 코딩하여야.. 2020. 3. 10.
99.5% 선정되는 맛깔나는 제안서(사업계획서)작성팁 게시자: MR.K 이번 포스팅은 좀 자극적인 구문으로 제목을 정해보았다. 나는 제안서를 대학생때부터 작성을 했었다. 시기적으로는 9년 넘게 작성을 했었고, 수많은 공모전에서 시작해서 창업 지원사업 최대 1억5천까지 지원서를 작성하였다. 그이상의 고퀄리티 제안서는 아직 내공이 부족함을 알려둔다. 그러기에 본 내용은 정말 초보, 창업 기업이 참조 했으면 하는 내용으로 그리고 기본적 사항 및 일반 기업에서도 알려주지 않는 전략적 팁 위주로 작성하겠다. 1장. 제안서의 승폐는 제목에서 결정된다 (약 80%) 제목 그대로 제안서(사업계획서)는 제목에서 80%정도 승폐가 결정된다고 해도 과언이 아니다. 내가 처음 공모전 제안서를 작성했을때 제목은 대부분 아이템 명칭이었다. 초경량리모컨, 고열효율난로, 좋은피부관리기.. 2020. 3. 8.
02- [웹디자인기능사] 실기 자료 https://space.malangmalang.com/open?fileId=m:0:696672933&lang=ko 웹디자인기능사 실기 한컴스페이스로 공유함 space.malangmalang.com 웹디자인기능사 실기자료입니다. JUST 쇼핑몰 메인을 HTML5, CSS, jQuery를 이용해 4시간 안에 제작하여 제출하면 됩니다. HTML 1시간 / CSS 1시간30분 / JS 1시간으로 시간 분배해서 연습하시면 좋을 듯합니다. 아래 기획서를 보고 중요한 부분을 체크하고 시작하세요. 중요(★★★★★) 체크 포인트 시험시간 내에 웹페이지를 제작 후 5MB 용량이 초과되지 않게 저장 후 제출한다. images(폴더) / script(폴더) / css(폴더)를 만들어 index.html, css, js 파일.. 2020. 3. 6.
01- [웹디자인기능사] 필기, 실기 기출문제 웹디자인 기능사 필기 2014년 ~ 2016년도까지의 기출문제 입니다. 기출문제 위주로 문제를 외워가시면 됩니다. 아래 링크를 열어보세요~ 필기자료 https://space.malangmalang.com/open?fileId=m:0:696670187&lang=ko 웹디자인기능사 한컴스페이스로 공유함 space.malangmalang.com 실기자료 https://space.malangmalang.com/open?fileId=m:0:696672933&lang=ko 웹디자인기능사 실기 한컴스페이스로 공유함 space.malangmalang.com 2020. 3. 6.
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.
CSS Transitions CSS 전환을 사용하면 지정된 기간 동안 속성 값을 부드럽게 변경할 수 있습니다. CSS 전환 효과를 보려면 아래 요소 위로 마우스를 이동하십시오. CSS 이 장에서는 다음과 같은 속성에 대해 설명합니다. transition transition-delay transition-duration transition-property transition-timing-function 2020. 2. 28.
CSS 3D Transforms 3D Transforms CSS는 3D 변환도 지원합니다. 아래 요소 위로 마우스를 이동하여 2D와 3D 변환의 차이점을 확인하십시오. 2D 회전 3D 회전 CSS 3D 변환 방법 CSS transform속성을 사용하면 다음 3D 변형 방법을 사용할 수 있습니다. rotateX() rotateY() rotateZ() rotateX () 메서드 이 rotateX()방법은 주어진 각도에서 X 축을 중심으로 요소를 회전시킵니다. #myDiv { transform: rotateX(150deg); } rotateY () 메서드 이 rotateY()방법은 주어진 각도에서 Y 축을 중심으로 요소를 회전시킵니다. #myDiv { transform: rotateY(130deg); } rotateZ () 메서드 이 rot.. 2020. 2. 26.