demun(대문블로그)

퍼블리셔/에디터2012. 10. 18. 09:00

에디터를 사용하는 이유는 여러가지가 있지만 코드에 대한 색상이 한가지 이유가 될 수 있습니다. 이는 여러가지 코드가 있는 곳에서 색상으로써 가시성이 보장되기 때문입니다. 태그에 대한 색상설정은 보기에도 좋지만 색상으로 분류가 되기때문에 오류를 방지할 수 있기도 합니다. 드림위버는 상단이 많은 기능이 있는 에디터입니다. 아마도 현존하는 에디터중에서 가장 많은 기능이 있지 않나 싶을 정도인데요. 사용법이 워낙 복잡하고 다양해서 익히는데만 상당한 시일이 걸리는 단점이 있는 에디터이기도 합니다. 드림위버는 한글판도 있기 때문에 초보자도 쉽게 다가가지만 모든 기능을 알고 사용하기는 좀 힘들지 않나 싶습니다. 저는 티스토리를 오래했고 앞으로도 하기 때문에 ... 그리고 코드를 많이 다루는 작업을 많이 하기 때문에 ..

퍼블리셔/에디터2012. 10. 17. 07:00

에디터플러스에서 문서템플릿을 선택하고 부가적으로 사용하기 편하게 설정하는 방법, 그리고 제가 올린 jQuery 템플릿파일을 선택해서 사용하는 방법을 알려드리겠습니다. 에디터플러스의 사용법은 아래의 글을 참고하세요. [Design/코딩] - 에디터플러스 사용법 구문강조파일 선택하는 방법 [Design/코딩] - 에디터플러스 사용법 구문강조파일 CSS3지원 [Design/코딩] - 에디터에 사용하기 좋은 글꼴 Monaco, Bitstream Vera Sans Mono, 나눔고딕코딩 [Design/코딩] - 에디터플러스를 이용해서 블로그에 코드 구문강조하기 먼저 문서템플릿을 추가하고 사용하는 방법부터 알려드리겠습니다. 제가 사용하기위해 만들어놓은 jQuery 템플릿파일을 다운로드 받으세요. 다운을 받았으면 도..

퍼블리셔/에디터2012. 10. 16. 09:00

에디터플러스에서 구문강조파일이나 템플릿 등을 추가할때가 있습니다. 정상적인 확장자를 가지고 있으면 쉽게 추가가 가능하지만 여러기능이 포함된 파일도 있고, 파일 종류도 달라서 추가하기가 쉽지 않은 경우가 있습니다.구문강조를 하는 방법은 이전에 작성한 에디터플러스 구문강조파일을 참고하세요. [Design/코딩] - 에디터플러스 사용법 구문강조파일 CSS3지원 그런데 이런 파일을 설정에서 어떻게 사용하느냐를 오늘을 살펴보겠습니다.위처럼 구문강조파일이면 확장자가 acp로 끝나야 합니다.파일찾기 버튼을 클릭해서 컴퓨터에 저장되어 있는 acp파일을 선택하면 됩니다.구문강조파일은 설정 & 구문강조에서 파일찾기 버튼을 클릭하면 acp파일을 선택하면 됩니다. 기본적으로 에디터플러스에 포함된 파일이 없으면 다운로드 받아서..

퍼블리셔/에디터2012. 10. 14. 09:00

저는 원래 Notepad++ 를 많이 사용합니다. 무료라서 어디에서나 다운로드 받아서 사용할 수 있는 장점이 있지요....헌데 이번에 노트북에서 말썽을 일으켜서 다시 에디터플러스로 돌아왔습니다.그러다보니 수동으로 만져야하는 편리한 기능들이 그동안 잠시 잊어져서 다시 만지작거렸습니다.에디터플러스에서 CSS 를 구문강조하는 기능이 있습니다.설정 - 파일 - 설정 & 구문강조에서 acp파일이 지정이 되어 있으면 됩니다. 현재는 CSS3가 나온 상태입니다. 그런것까지 전부 구문강조를 해주는 파일이 없는듯 합니다.기본적으로 CSS3를 어느정도 지원하는 파일을 가져다가 발견하는 족족 추가했습니다.아래에서 보면 구문강조가 되지 않는 속성이 있습니다. 그래서 해당 속성은 추가했습니다. 추가된 부분이 잘 보입니다. 이렇..

퍼블리셔/기술2012. 10. 13. 09:00

에디터등에 사용하기 좋은 글꼴입니다. 한글을 표기할때는 아무래도 나눔고코딩 글꼴을 사용합니다만 영어를 표현할때는 모나코 글꼴을 사용합니다. Bitstream Vera Sans Mono 도 좋다고는 하나 개인적으로 저는 모나코 글꼴이 가장 좋은것 같네요. 업로드 해보니 모나코가 가장 가볍군요. 아래 스샷은 윈도우에서 notepad++ 에서 모나코 글꼴을 사용할때 입니다. 개인적으로 포맷을 하거나 그럴때 꼭 나눔고딕과 모나코 글꼴을 설치하는 편입니다. 폰트 추가합니다. 모나코 글꼴이 한글표기가 이쁘지 않아 모나코와 맑은고딕을 합친 글꼴을 올립니다.원작자: http://code.oopman.com/100 개인적으로 자료정리차원에서 같은 파일을 올립니다.

퍼블리셔/도구2012. 10. 10. 09:00

제목에 나와있듯 왠만한 언어는 다 해당이 됩니다.저의겨우 코딩을 많이 하다보니 코드를 정렬하고, 압축하고, 다시 이쁘게 들여쓰기가 된 상태로 정렬하는 과정을 자주 거칩니다.매번 할때 불편하니 이걸 한방에 해결해주는 사이트를 찾아 이용하고 있는데요. 여러분들도 알면 좋겠다싶어 이렇게 소개합니다. http://prettydiff.com/?m=beautify&html 아래 스샷을 보시고 참고하세요.왼쪽에 1번은 압축을 하거나 이쁘게 들려쓰기하거나 하는걸 설정합니다.2번은 언어를 선택하는곳입니다. 아래 스샷에는 스타일코드를 넣었는데 자동으로 인식해서 압축을 한 스샷입니다.인식을 못할경우 언어를 선택해주면 됩니다. 이 사이트는 압축을 하고, 다시 들여쓰기가 된 상태로 보여주는 기능을 하기 때문에 아주 편리합니다.

퍼블리셔/css2012. 10. 4. 08:30

어도비에서 css 속성들을 테스트 해볼수 있는 사이트를 오픈했는데 이제야 찾네요.....사실 추지호님이 알려주신 겁니다. ㅎㅎㅎㅎ 여하튼 여러가지 필터들을 미리보면서 테스트할 수 있는 곳입니다. http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/ 아래 그림을 보시면 Add Filter을 클릭하면 아래로 여러가지 필터들을 볼 수 있습니다. 필터를 클릭하면 왼쪽으로 속성을 조정할 수 있는 곳이 나오고 조정하면 우측에서 미리보기를 할 수 있습니다. 마찬가지로 맨 아래에는 코드를 미리볼 수 있습니다. 테스트 용으로 여러가지 사용해보시기 바랍니다.

퍼블리셔/css2012. 10. 3. 08:30

애니메이션 ( Animations) 이 CSS3 속성에 있습니다. 아직 완변한 문서와 기술들이 표준화 되지 않아서 많이 사용은 안하지만 영어권에서는 곧잘 사용합니다. 재미있게도 opera.dev 에서 둘이 테스트를 해봤습니다. 애니메이션 효과를 줬을때 CSS3 가 나은지? Jquery 가 나은지를.... 결과부터 말한다면 CSS3 의 한쪽 승입니다. 속도와 코드분량으로 봐서는 당연 CSS3의 승입니다. 하지만 우리에게는 익스플로러라는 큰 벽이 있습니다. ie8을 공식 지원하지 않겠다라는 기분 좋은 소식도 있지만...... 여하튼 CSS3는 익스플로러가 현재 지원하지 않습니다. 그래서 익스를 포함한 브라우져에 애니메이션 효과를 적용하려면 Jquery 를 사용해야만 합니다. 얼마만큼의 성능차이가 있는지? 스..

퍼블리셔/css2012. 10. 2. 14:23

제목이 거창하죠 ...ㅎㅎㅎㅎ css3 속성을 보면 아직 표준이 정해지지 않아서 각 브라우져마다의 접두사를 사용해서 코딩을 합니다. 원래 w3c에서 정해준 속성을 사용한다면 대략 아래와 같습니다. .box { background: linear-gradient(top, #e3e3e3 10%, white); } @-webkit-keyframes "slide" { 0% { left: 0; box-shadow: 10px 10px 10px black; } 100% { left: 50px; box-shadow: 5px 5px 5px black; } } 하지만 브라우져에서 지원을 하지 않죠. 나중에 지원할지는 몰라도 .... 그래서 각 브라우져의 접두사를 넣은 속성을 먼저 적어주고, 나중에 위의 속성을 적습니다. 그..

퍼블리셔/css2012. 8. 3. 06:00

이미지에 마우스를 올리면 캡션이 나타나는 애니메이션을 알아보겠습니다. 이런 기능은 예전에는 자바스크립트로만 가능했지만 이제 CSS3로도 그 기능을 할 수 있습니다. 어떤 기능인지 결과를 동영상으로 확인하겠습니다. 여기서는 -webkit 을 사용했습니다. 크로스 브라우징 코드를 만들어주는 사이트를 참고하세요. http://demun.tistory.com/2172 마크업은 아래와 같습니다. > 글 제목 첫번째 단락으로 이미지에 대한 설명글이 있으며, 여기는 첫번째 p 단락입니다. 제시카알바의 사진으로 눈의 피로도 없애보세요. 두번째 단락으로 위와 같은 이미지에 대한 설명글이 있는 곳으로, 여기는 두번째 p 단락입니다. 직접 코딩하면서 어떻게 변하는지를 볼 수 있게 동영상으로 담았습니다. 저도 버벅대서 챙피하..