demun(대문블로그)

일상2014. 8. 4. 06:00

요즘 제 근황에 대해서.... 이글에는 아주 다양한 툴이 나옵니다. git, github, gitlab, gitpage(github.io), Grunt, Markdown, jekyll, jekyll-bootstrap, bootstrap 너무 블로그에 글이 없어서 또 근황에 대해서 몇가지 이야기해볼까하고 이렇게 포스팅하게 되었습니다. 저는 요즘 github.io , jekyll , jekyllbootstrap 에 대해서 삽질을 하고 있지요. 이 모든것이 마크다운이라는 것 때문입니다. markdown 은 글쓰기가 편합니다. github 이 마크다운을 사용하고, 스타일도 깔끔하고 맘에 들어서 스킨도 그것을 겨냥해서 깔끔하게 만들어서 사용중입니다. 이 스킨은 bootstrap 프레임웍을 포함해서 만든었는데요, ..

퍼블리셔/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...

블로그/블로그 광고2014. 6. 13. 06:00

반응형 구글 에스센스 적용하기 반응형 스킨을 만들고 반응형 에드센스를 적용해보았습니다. 이전에 적용해보신분도 있겠지만 처음으로 이 글을 보신분도 있을거라 생각됩니다. 먼저 반응형 광고에 대해서 알아두어야할 점은 바로 너비입니다. 반응형은 각 디바이스별로 너비를 체크해서 반응하기 때문입니다. 구글에드센스에서 반응형 광고를 생성합니다. 스마트보다는 저는 고급이 필요한 버젼을 달았습니다. 코드를 보겠습니다. 코드를 보시면 @media 라는 부분이 들어 있어서 너비를 체크합니다. 기본은 너비가 320짜리가 나오고, 너비가 500이상이면 468짜리 광고가 나오고, 800이상이면 728짜리 광고가 나옵니다. 이건 기본 셋팅이 그렇고 800이상이면 기존에 데스크탑에서 사용하면 광고가 나오는것이 좋겠네요. 좀 다듬어야..

퍼블리셔/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..