2016년 5월 27일 금요일

SVG 파일 만들기

SVG 파일 만들기
SVG (Scalable Vector Graphics)


환경: illustrator CS6 / Windows 7
SVG 사용 목적: .css 에서 height 속성 auto로 줘서 자동 확대/축소 기능

참고 사이트

1. 일러스트레이터 CS6 에서 New -> 원하는 사이즈로 생성
File -> New (Ctrl + N)
  























2. 이미지 작업















3. 저장

3-1. File -> Save As -> 파일 형식: SVG

File -> Save As







3-2. 옵션 설정(web에서 사용할 최적화 설정)



































4. 파일 수정
저장된 .svg 파일을 editor로 열어서, width와 height를 삭제
-> 이 부분을 삭제 해주지 않으면 auto가 제대로 작동하지 않으므로 해줌

2016년 5월 23일 월요일

Git and GitHub

Git & GitHub

Git 공식사이트: https://git-scm.com/


Git 이란?
버전 관리 시스템
사용언어: UNIX

다운로드 & 설치
Git 공식사이트에서 다운로드 한 후 설치하고,
Git bash 로 들어가서,git --version 라고 치면, 해당 git의 버젼정보가 나온다

Git 사용하기전 기본으로 알아야 할 사항들
1. git의 구조 - 로컬영역
-작업 영역 (Working directory) - 실제 작업하는 곳
-준비 영역 (staging environment / index) - git이 지켜보도록 작업 영역의 파일들을 집어넣는곳
-최종 버전의 저장소(commit / HEAD) - 모든것이 완벽히 끝났을때 최종 버전을 만드는 곳

2. git의 구조 - 원격 서버
- 브랜치 (Branch)
  - master: 저장소의 기본 브랜치
  - 사용자 지정 브랜치: 여러개를 만들어서, 개발 후 나중에 master에 병합
    (기본 브랜치의 내용을 복사해와서 개별적으로 개발)

< 사용방법 - 로컬영역: 나만 볼수 있음>
-설치한 git bash 실행 > git을 적용한 폴더로 이동 (cd ~/디렉토리)

[1] 새 프로젝트에 Git 적용하기

0. 폴더 만들기 (pc에 새폴더 만들기)
    실습: 바탕화면에 폴더명 project으로 새폴더 생성함.

1. 저장소 만들기 (Initializing)
  < 명령어: git init >
    실습: git bash에서 새폴더로 이동해서 거기서 명령어씀
    cd ~/Desktop/project (엔터) > git init (엔터)
    -> desktop/project/.git 폴더가 생성됨

2. 준비영역에 파일 추가하기 (adding)
  < 명령어: git add 파일명>
    실습: project 폴더안에 index.html 파일을 저장후
    git bash에서 git add index.html (혹은 git add . 모든 파일 추가)
    -> git add명령어로 작업영역의 파일을 준비영영으로 추가해주므로써,
       git이 index.html 을 추적하기 시작하므로 모든 변화를 감지하게 됨.
 
3. 최종 확정짓기 (committing)
  < 명령어: git commit -m "이 최종 버전에 대한 메세지" >
    실습: git commit -m "add index.html"
    -> git commit을 통해, 준비 영역의 파일을 최종 버전으로 만들어 줌

  < 명령어: git log >
    -> 마지막으로 commit한 정보를 보여줌

*상태확인하기 (status)
  <명령어: git status>
  - 파일이 수정되었을 경우 : modified: 파일명 이라고 메세지가 뜸


--------------------------------------------------------------------
[2] 준비 영역에서 파일 수정

  준비영역에서 git이 추적 중인 파일을 수정 했을 때,
    실습: index.html 파일에 <h1>수정함</h1> 을 추가한다.

  경우1. 이 수정한 파일을 수정 전 상태로 되돌리겠다.
  <명령어 git checkout 파일명>
    실습: git bash 에서 git checkout index.html 치고 파일로 돌아가보면,
    수정하기전으로 돌아가 있음을 확인 가능 (결과: <h1>수정함</h1>이 없음)


  경우2. 수정한 사항을 그대로 준비영역에 저장하겠다.
  <명령어 git add 파일명 >
    실습: git add index.html (or git add .) 라고 치고 git status 를 해보면,
    준비 영역에 수정된 index.html이 추가 되어 commit 대기 중인것을 알수 있다.
    (결과: <h1>수정함</h1> 이 있음)

  경우3. 수정된 파일이 준비영역에 들어있지만, (수정1)
  그 파일을 재 수정하면 이 파일은 작업영역에 있는데 (수정2)
  수정2를 준비영역에 있는 수정1에 덮어 씌우고 싶은경우
  <명령어 git reset HEAD 파일명>
    실습: 경우2를 마친후(수정1), <h1>재수정함</h1>으로 변경하고 저장(수정2)
    git bash에서 git reset HEAD index.html을 한다
    (결과: 파일내용엔 <h1>재수정함</h1>이 있고,
    git status 해보면 이 파일이 준비영역에서 commit 대기중인것을 확인가능)
    -> 수정함이 사라지고 재수정함이 존재함

<checkout vs. git reset HEAD 파일명 차이>
checkout은 준비영역에서 그대로이고,
reset Head는 준비영역에서 빠짐 (upstaging)

<준비 영역에서의 모든 수정사항을 한번에 커밋하기>
git add --all


--------------------------------------------------------------------
[3] 파일 삭제하기

  준비영역에서 git이 추적 중인 파일을 삭제 했을 때,
    실습: index.html 파일을 삭제한다.

  방법1. <명령어 git rm 파일명> - 방법2를 한번에 적용함.
    실습: git rm index.html
    (결과: index.html 파일이 폴더에서 삭제되고, 준비영역에서 삭제된것을 기록됨)

  방법2. 폴더에서 delete 키로 index.html을 삭제한 후 >
  git add index.html 을 해줌으로써 준비영역에 삭제 내용을 기록함.

삭제된 파일 되돌리기
  방법 1. <명령어 git checkout 파일명>
    실습: 폴더에서 직접 파일을 삭제한 후
    git bash에서 git status 치면 deleted: 파일명이 나타나고
    git checkout index.html 치면 삭제된 파일이 다시 폴더에 생성됨을 확인 가능

  방법 2. <명령어: git reset HEAD 파일명>
    실습: git bash에서 git rm index.html 로 파일을 삭제후,
    git checkout index.html 로 파일을 재 생성되고 준비영역에서도 추적함

--------------------------------------------------------------------
[4] 원격 서버로 최종 버전의 저장소(commit / HEAD)의 내용을 전송하기
  <명령어: git push origin master or 다른 브랜치명>

다른 원격 서버로 내용 전송하기
<명령어: git remote add origin 원격 서버 주소>



< 사용방법 - 원격 서버 영역: 공동 작업구역으로 여러사람이 볼수 있음>
-브랜치 사용방법
[1] 사용자 브랜치 생성하기
  <명령어: git branch 브랜치명>: 현위치에서 새로운 브랜치 생성하기 (이동은 안함)
  <명령어: git checkout -b 브랜치명> : 브랜치 생성과 동시에 이동하기

[참고]로컬 저장소의 master 브랜치에서 버전(commit한것들)중 하나를 브랜치로 만들기
  방법: 마스터에서 git log 로 버전정보를 확인한다 (이제껏 commit한 내용들)
  그 중 원하는 버전으로 이동하기 위하여, commit 다음의 해쉬태그(긴 이름)을 복사한후
  git checkout 복사한 이름 > 엔터를 치면,
  HEAD is now at 복사한 이름이 나오고 이동된것을 확인 할 수 있다.
  에디터에서 파일을 열어보면, 내용이 바뀌어있는것을 확인가능하고
  수정과 add commit 모두 할 수 있고 여기에서 또 새로운 버전이 생성될 수 있다.
  but, git log를 쳐보면 이 버전에 해당하는 HEAD내용만 나오고
  이는 마스터에서는 보이지 않는다.
  이 버전에 긴 이름대신 브랜치명을 주어 브랜치로 만든다.
  <명령어: git branch 원하는 이름 긴이름>
  원래 최신 버전으로 돌아가기 위해서는 git checkout master이라고 쳐주면 된다.


[2] 브랜치 이름 변경하기
  < 명령어: git branch -m 변경할브랜치명 새로운브랜치명>

[3] 원하는 브랜치로 이동하기
  <명령어: git checkout 브랜치명>

[4] 브랜치 삭제하기
  < 명령어: git branch -d 브랜치명>

[5] 브랜치 위치 확인하기
  <명령어: git branch >
  -> *붙어 있는 곳이 현재위치


[6] 브랜치 합치기
  <명령어: git merge 마스터에 덮어씌울 브랜치명>
  ->마스터에서 이 명령어 실행



2016년 5월 20일 금요일

Bootstrap 3 + Less

Bootstrap 3

Bootstrap 3 공식사이트: http://getbootstrap.com/
jQuery 공식 사이트: https://jquery.com/
Less 컴파일러: https://prepros.io/

다운로드 및 구성:
1. Text editor 준비 (Sublime Text 3 사용)
2. Bootstrap 다운로드 (Bootstrap v.3.3.6 사용
    http://getbootstrap.com/getting-started/
    3가지 버젼중 Source code 로 다운로드 (Less 사용) 
    압축 풀고 dist와 less폴더안에 내용을 복사한 후
    내 프로젝트에 붙여넣기

3. jQuery 다운로드 (jQuery v.1.12.4 사용)
    Download the compressed, production jQuery 1.12.4
    오른쪽 버튼 -> save as link -> 위치: Boostrap 안에 js에 저장

4.Less 컴파일러 설치 (Prepos App 5.10.2 사용)
    설치 후 프로젝트 폴더를 끌어다 놓기하면 설정 완료
    수정후 저장하면 자동으로 커파일 되게하는 방법: 원하는 파일 Auto Compile 선택

<< 기본 폴더 구성 >>
.
├── bootstrap
|   ├── css
|   |    └── bootstrap.min.css
|   ├── fonts
|   ├── img
|   ├── js
|   |    └── bootstrap.min.js
|   |    └──jquery-1.12.4.min.js
|   └── less
└── index.html



부트스트랩을 내가 원하는데로 바꾸기 (Bootstrap customizing):
공식 사이트: http://getbootstrap.com/customize/


LESS 수정하기 - 1. custom.less 추가하기
1. less폴더안에 custom.less 파일만들기
2. bootstrap.less 수정
  마지막 줄에 @import "custom.less"; 추가
3. bootstrap.css & bootstrap.min.css 에 자동으로
   custom.less 내용이 추가됨

LESS 수정하기 - 2.variables.less 수정하기
- variables.less : 기본 변수 값이 저장된 곳 (색,글씨체, 폼, 버튼 등..)
1. less 폴더 안에 variables.less 열기
2. 수정 원하는 곳을 수정하고 저장
3. 자동으로 prepros pro에서 컴파일해 줌
* bootstrap.css 가 수정되어 저장됨



bower

Cmd

명령어: npm install -g bower

버전확인: bower -v

bower로 jquery 설치하기
1. 원하는 폴더로 이동 (cd ..)
2. bower install jquery

2016년 5월 16일 월요일

윈도우7 복구/관리

유용한 사이트
http://kd3302.tistory.com/134


IDE - Aptana

Aptana studio 3


Aptana studio 공식 사이트: http://www.aptana.com/products/studio3/download

준비과정:
공식 사이트 들어가서 다운로드후, 설치

사용환경: 윈도우 7, aptana studio 3

사용방법:
1. 새 프로젝트 만들기
File -> New -> Web Project -> Default Project 선택 -> Next -> 프로젝트 이름, 위치 설정 -> Finish

Project Exploerer에 해당 폴더가 생성됨.

2. 테마 바꾸기 + 글씨 크기 바꾸기
Window -> Preferences -> Aptana Studio -> Themes -> 테마 선택후 -> Apply

3. 자동완성 기능 설정하기
Window -> Preferences -> Aptana Studio -> Editors -> Enable word wrap체크 -> Apply

4.브라우저 리스트 설정하기 ()
Run -> Run Configurations -> Web Browser -> 오른쪽 버튼 -> New -> 원하는 브라우저 선택 -> Apply

예) 크롬 설정하기
1. Name: Chrome
2. Browser executable -> Browse .. -> 선택 -> apply


* 소스코드 한줄로 보기 (Word Wrap)
: 소스 코드 위에서 오른쪽 클릭 Word Wrap 체크 해제


유용한 단축키:
Ctrl + Shift + L : 모든 단축키 보기
Ctrl + Shift + F : 코드 자동정렬
Ctrl + Shift + Enter : 현재줄 위에 한줄 추가
Ctrl + D : 한줄 삭제
Ctrl + L : 줄 번호로 이동
Alt + ↑ or ↓ : 현재 줄 선택후 위/아래 이동
Ctrl + K : 현재 선택된 문자열과 동일한 문자열 찾기
Ctrl + Shift + P : 해당 코드가 속하는 괄호로 이동
Ctrl + Q : 마지막으로 편집한 곳으로 이동

Ctrl + F11 : 웹브라우저로 열기

Ctrl + / : 한줄 주석처리
Ctrl + Shift + / : 여러줄 주석처리

Ctrl + Shift + X : 대문자로 변환
Ctrl + Shift + Y: 소문자로 변환


Ctrl + PageUp / PageDown : 열려있는 탭 사이를 이동
Ctrl + T : 파일 찾기
Ctrl + Shift + F4 : 열린 파일 모두 닫기

* 빈줄 지우기
1. 찾기/바꾸기(Ctlr+F)
2. (*) Regular Expression 선택
3. 찾을 문자열: \n+ 입력
4. 바꿀 문자열: \n 입력 


< aptana 에러메세지 해결 방법 >
메세지:
"Failed to correctly acquire installer_nodejs_windows.msi file: CRC error."
해결방법: 파일 설치후 재 실행
go & download -> http://go.aptana.com/installer_nodejs_windows




2016년 5월 2일 월요일

Grunt


Grunt
| The JavaScript Task Runner
프로젝트 자동화를 도와주는 패키지 관리자
  -> 프로젝트 관련 내용을 모두 모니터함

Grunt (그런트) 공식 사이트: http://gruntjs.com/
참고 사이트:

<순서>
0. Node.js Grunt 설치
1. 프로젝트 폴더에 package.json Gruntfile.js 생성 (같은 곳에 있어야함)
  - package.js 생성방법 1. 직접 만들기, 2. 커맨드라인에서 npm init 사용하기
2. package.json 설정 + 모듈 추가
  - 플러그인 설정 (html, css, javascript, watch )
3.Gruntfile.js 설정

< package.json 생성하기 - 1. 파일만들기 >
- package.json 파일은 npm 으로 퍼블리싱할때 사용하는 메타데이터 저장 파일로 모듈에 대한 내용과 프로젝트 환경설정 내용이 있음

실행(윈도우키+R) > cmd 에서
1. 프로젝트 폴더로 이동
  - 명령어: cd 프로젝트 폴더명
    e.g. cd C:\wamp\www\wordpressandsass 

2. 프로젝트 폴더 안에 package.json 만들기
  - 명령어: npm init > 엔터 > package.json 내용 설정 부분이 나옴
    e.g. npm init > 엔터 >
    name: (wordpressandsass) <엔터>
    version: (1.0.0) <엔터>
    description: grunt testing <입력 후 엔터>
    entry point: (Gruntfile.js) index.html <입력 후 엔터>
    test command:<엔터>
    git repository:<엔터>
    keywords:<엔터>
    author: Julyee <입력 후 엔터>
    license: (ISC) <엔터>
    About to write to C:\wamp\www\wordpressandsass\package.json:
    {
      "name": "wordpressandsass",
      "version": "0.0.0",
      "description": "grunt testing",
      "main": "index.html",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "Julyee",
      "license": "BSD"
    }
    Is this ok? (yes) <엔터>

3. package.json 내용 수정 
  - 방법: 에디터에서 프로젝트 폴더에 생성된 package.json파일을 열어서
  scripts부분, license 부분과 마지막 (,)삭제한 후 저장


< package.json 생성하기 - 2. 모듈 추가하기 >
추가할 모듈
1. sass 모듈 
2. watch 모듈

실행(윈도우키+R) > cmd 에서

1. package.json 파일에 SASS 모듈 추가하기
  - scss 폴더로 이동 > npm install grunt-contrib-sass --save-dev > 엔터

2. package.json 파일에 watch 모듈 추가하기
  - scss 폴더로 이동 > npm install grunt-contrib-watch --save-dev > 엔터


결과:
    - 프로젝트 폴더안에 node_modules 폴더가 생기고
     그 안에 grunt, grunt-contrib-sass, grunt-contrib-watch 폴더가 생성됨
    - package.json 으로 가보면 아래 코드가 자동 삽입되어있음
      "devDependencies": {
        "grunt": "~1.0.1",
        "grunt-contrib-sass": "~1.0.0"
        "grunt-contrib-watch": "~1.0.0"
      }

< Gruntfile.js 설정하기 >
- Gruntfile.js grunt가 할일을 지시하는 파일로 할일을 적어주면 됨.
1. 프로젝트 폴더안에 Gruntfile.js 파일생성
  - Gruntfile.js 의 기본 구조
    module.exports = function(grunt) {
      // 프로젝트 환경설정.
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        // 모듈(플러그인)설정
      });
      // 플러그인 로드
      // Task 실행
    };


2. 설치한 모듈(플러그인)에 대한 내용을 확인 후 알맞은 옵션으로 설정한다.
  e.g. Sass Watch 설정하기

    module.exports = function(grunt) {
      // 프로젝트 환경설정.
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        /* Sass */
        sass: {
          dev:{
            options: {
              style: 'expanded', //사람이 읽을수 있게 해라
              sourcemap: 'none', // map 없게
            },
            files: {
              'style.css': 'scss/style.scss' //dev가 정상이면, style.css로 컴파일됨
            }
          }
        },
        /* Watch */
        watch: {
          css:{
            files: '**/*.scss', //프로젝트 폴더안에 확장자가 .scss 파일을 전부
            tasks: ['sass']   // 위의 sass: 부분을 실행한다.
          }
        }
      });
      // 플러그인 로드
      grunt.loadNpmTasks('grunt-contrib-sass');
      grunt.loadNpmTasks('grunt-contrib-sass');

      // Task 실행 
      grunt.registerTask('default',['watch']); //sass task watch 안에 있으므로 생략
    };

< Grunt 실행하기 >
실행(윈도우키+R) > cmd > scss폴더로 이동 > grunt > 엔터
- watch가 실행되고 > .css-cache 폴더가 생성됨
- watch 종료 방법: Ctrl+C > y

컴파일하기: 에디터에서 SCSS 폴더에 넣어둔 _style.scss파일을 수정하면, 자동적으로 grunt가 컴파일한 후 style.css를 만들어준다.
 
< Grunt 종료하기 >
Ctrl+C > y