demun(대문블로그)

퍼블리셔/Git2014. 7. 31. 06:00

커멘드창을 사용하면 add 명령을 하고 commit 을 해야하지만 GitHub Windows 를 사용하면 커밋하는 것도 간단합니다. 일단 로컬저장소에 변경이 일어나면 아래처럼 저장소를 클릭하면 Uncommitted changes 가 생겨납니다. Show 버튼을 클릭하면 커밋 메시지를 입력할수 있는 공간이 나옵니다.커밋 메시지를 적어주고 하단의 Commit to master 버튼을 클릭합니다. 커밋을 하면 원격저장소에 push 해야 합니다.그래야 원격저장소에 반영이 됩니다.GitHub Windows 는 이것또한 간단합니다. 우측 상단에 Syne 부분을 보면 하나의 커밋이 있다고 알려줍니다.간단하게 Sync 버튼만 클릭하면 자동으로 원격저장소로 push 해서 동기화시킵니다.

퍼블리셔/Git2014. 7. 30. 13:00

GitHub Windows 는 Git 을 사용하기 편리하게 만든 UI 툴입니다. 깃헙윈도우를 통해 저장소를 가져오는 것을 알려드립니다.github windows 를 실행하면 왼쪽 상단에 + 아이콘이 있습니다. 아이콘을 클릭하면 아래와 같은 화면이 나옵니다. Clone 를 클릭하면 기존의 저장소가 보입니다. 원하는 저장소를 클릭하면 하단에 Clone 버튼이 활성화 됩니다. 하단의 Clone 버튼을 클릭하면 로컬컴퓨터의 저장할 곳을 물어옵니다. 원하는 곳을 지정해주면 자동으로 저장소를 Clone 복제합니다.

퍼블리셔/jQuery2014. 7. 28. 06:00

bPopup bpopup 에 문의를 하는 경우가 많아 한번더 자세히 기술합니다. 이전 bpopup 에 대한 글 간단한 구문 한가지만 넣고 사용하면 어디에나 사용할 수 있을 듯 십습니다. 이 방법은 bpopup 홈페이지에서 사용하는 방법으로 보다 간단한 코드를 가지고 여러 상황에 맞게 사용할 수 있습니다. 먼저 폴더 구조는 아래와 같습니다. ├─html │ bpopup.html │ test.html │ ├─images │ image.jpg │ └─js jquery.bpopup.min.js html 폴더 : bpopup.html 에서 ajax 형식으로 test.html 을 불러옵니다. images 폴더 : image.jpg 가 있습니다. 유이의 이미지 입니다. js 폴더 : bpopup.min.js 가 있습..

퍼블리셔/Grunt2014. 7. 11. 09:21

html 인클루드하기 grunt-includes 실무에서 작업을 할때는 html 을 다루다가 개발단계로 넘어가면 서버환경에 따라 php, jsp, asp 등 언어가 바뀝니다. 또 html 을 다룰때 include 가 꼭 필요합니다. 필요이상의 코드를 줄이고, 나중에 수정 또한 편하기 때문입니다. html 파일전체를 조각 조각 나누어서 include 시키고 본문 컨텐츠만 작성하는 방법을 사용합니다. 인클루드 시키는 파일을 보면 대략, doctype 에서 닫는곳까지 하나의 인클루드 파일 head.html 로 만든다. 또, gnb, lnb, breadcrumbs, footer, js부분 등 즉 본문컨텐츠를 제외한 모든 부분을 조각조각내어 인클루드 시킨다. 문제는 서버환경에 따라 인클루드문이 조금씩 다르고, 서..

퍼블리셔/Grunt2014. 6. 13. 06:00

ftp-deploy 그런트 모듈중에서 ftp 업로드가 필요할때 사용하면 됩니다. 제가 일하는 환경에서는 sublimetext 의 sftp 이용해서 코딩하다가 저장하면 바로 업로드되게 해놨는데, 서버에 있는 파일을 수정하는 경우는 일일이 업로드해야하는 불편이 있었습니다. 그래서 업로드를 자동으로 해줄수 있는 모듈을 찾다가 ftp-deploy 가 있어서 소개합니다. 사용목적 빌드하거나 watch 했을때 자동으로 서버로 업로드를 해준다. 저장소 : https://github.com/zonak/grunt-ftp-deploy 기본 옵션과 설명을 저장소를 참고하시기 바랍니다. 제가 사용하는 gruntfile.js 코드는 이렇습니다. 'ftp-deploy': { build: { auth: { host: 'demun...

퍼블리셔/Grunt2014. 6. 12. 06:00

Yeoman 시작하기 yeoman 은 먼저 nodejs, Git, Ruby, Compass 등을 사용할경우 먼저 설치가 되어 있어야합니다. 이 사용법은 홈페이지에서 알려준 방법대로 기술합니다. Yeoman 설치하기. npm install -g yo npm 버젼이 1.2.10 이하일경우는 수동으로 설치해야 합니다. 그 이상은 자동으로 설치가 됩니다. npm install -g grunt-cli bower generator-webapp 설치 다음으로 generator 를 설치합니다. npm install -g generator-webapp yo webapp 설치 위 두줄은 글로벌로 설치한것입니다. 이제 프로젝트 폴더를 만들고 그 폴더안에서 작업을 하면 됩니다. yo webapp webapp 는 HTML5 B..

퍼블리셔/기술2014. 6. 11. 06:00

highlightjs 사용법 이전에 highlightjs 가 어느정도 좋은 구문강조 자바스크립트인지 알아보았습니다. 이걸 티스토리에 적용하는 방법과 테마에 대해서 알아보겠습니다. 티스토리에 적용하기 티스토리에 적용하려면 먼저 홈페이지에서 파일을 다운로드 받습니다. highlightjs 홈페이지 다운로드 - http://highlightjs.org/download/ 압축을 풀면 많은 파일이 나옵니다. 필요한 파일은 highlight.pack.js 과 css 파일입니다. 먼저 자바스크립트인 highlight.pack.js 를 업로드 하세요. 그리고 사용하고자 하는 css 파일을 업로드하세요. 파일은 style 폴더 안에 있는 아무 파일이나 사용하고자하는 css파일 하나만 업로드하면 됩니다. 이제 스킨 편집에..

퍼블리셔/javascript2014. 6. 10. 06:00

인라인 스타일에 접근하기 html코드가 아래처럼 되어 있다고 가정합니다. 테스트1 먼저 선택합니다. // 아이디로 불러온다. var test1 = document.getElementById("test_1"); // color 값을 읽어온다 alert(test1.style.color); // rgb(255, 0, 0) 인라인이 아닌 스타일 가져오기 inline 스타일이 아닌 경우 스타일 접근하는 방법은 getComputedStyle()함수를 이용해서 전체스타일을 구한 후, 속성에 접근해야 됩니다. 단, 모든 값은 읽기전용. 스타일 가져오기 #test_1 { font-size:24px; } 테스트1 window.onload=function(){ var test1 = document.getElementById..

퍼블리셔/javascript2014. 6. 9. 06:00

선택하기 자바스크립트에서 가장 먼저 해야할것이 선택하기 일것입니다. 어떻게 선택하는지 알아봅니다. 아이디 선택하기 window.document.getElementById("item1"); 태그(엘리먼트) 선택하기 window.document.getElementsByTagName("div"); 클래스 선택하기 window.document.getElementsByClassName("content_data"); 부모 선택하기 document.getElementById("item1").parentNode; 자식 선택하기 childNodes 는 텍스트 노드까지 불러오므로 순서를 염두해두어야 한다. var item = window.document.getElementById("item"); var nodes = it..

퍼블리셔/Grunt2014. 6. 6. 06:00

grunt-markdown 마크다운에 대해서 소개하기전에 잠시 개인적인 이야기를 하겠습니다. 저는 개인적으로 github.com 을 관심있게 보고 있습니다. 제 블로그에 github 스타일을 하나씩 접목하고, grunt 의 기술도 하나씩 접목하고 있습니다. 여기에 관련된 기술들이 정말 많고, 하나씩 소개하고 있는데 이것들이 전부 연결고리처럼 하나하나 연관이 되어 있습니다. 저는 현재 마크다운으로 글을 쓰고 있으며, sublimetext 를 사용하고, grunt 를 사용하고 자동으로 변환된 html을 티스토리에 복사 붙여넣기 하고 있습니다. 이전에 구문강조 자바스크립트 highlight.js 에 대해서 소개한적이 있습니다. grunt-markdown 은 highlight 를 사용하고 GFM을 사용합니다. ..