demun(대문블로그)

퍼블리셔/기술2018.12.20 10:59

블로그상에서 코드를 이쁘게 보이기 위해서 여러가지 플러그인을 사용해봤습니다.이전까지만해도 가장 많이 사용했던 플러그인은 highlightjs 였습니다.구문강조 highlightjs 사용법 -> http://demun.tistory.com/2419?category=388459블로그상에서 구문강조 할때는 여러가지 유의해야 합니다 막 바꾸다가는 이전 작업물이 제대로 나오지 않는다던가, 또는 다시 작업해야하는 양이 많아질수 있습니다.저도 이전..

퍼블리셔/기술2014.06.11 06:00

highlightjs 사용법 이전에 highlightjs 가 어느정도 좋은 구문강조 자바스크립트인지 알아보았습니다.이걸 티스토리에 적용하는 방법과 테마에 대해서 알아보겠습니다. 티스토리에 적용하기 티스토리에 적용하려면 먼저 홈페이지에서 파일을 다운로드 받습니다. highlightjs 홈페이지 다운로드 - http://highlightjs.org/download/ 압축을 풀면 많은 파일이 나옵니다.필요한 파일은 highlight.pa..

퍼블리셔/기술2014.06.02 06:00

hightight.js 제가 오늘 소개해드릴 스크립트는 바로 highlight.js 입니다.블로그를 하다보면 코드를 하이라이트 하고 싶을 때가 있습니다.많은 자바스크립트가 있는데 그중에 highlight.js 를 소개하는 이유가 있습니다. 이글은 2011년도에 작성한 글입니다. 그래도 참고하기에는 좋은 글이기에 이렇게 적습니다.자바스크립트 구문광조 비교 : http://softwaremaniacs.org/blog/2011/05/22/highligh..

퍼블리셔/기술2013.01.05 17:25

IE는 버젼별로 조건을 걸어서 스타일을 작성하곤 합니다. 그래서 HTML이 아주 조건부 주석으로 난잡해지고 또한 스타일시트도 버젼별로 만들어서 사용하곤 했습니다. 하지만 좀더 간단하고 효율적인 방법이 있어 소개합니다.  아래의 경우는 제가 이번에 제작한 스킨인 Responsive 라는 스킨에도 포함된 마크업구조 입니다. 반응형 티스토리 블로그 스킨 Responsive 를 소개합니다. -> http://demun.tistory...

퍼블리셔/기술2012.12.19 09:00

반응형으로 웹사이트를 제작하다보면 테스트를 해야 하는데 테스트할 수 있는 사이트나 도구가 적당치 않습니다.그래서 이번에는 웹에서 반응형으로 제작한 사이트를 테스트 할 수 있는 곳을 몇군데 찾아봤습니다. 1. http://mattkersley.com/responsive/제 블로그 주소를 넣고 확인해 봤습니다.다양한 형태의 모습을 확인할 수 있습니다. 2. http://www.responsinator.com/상단에 주소를 넣는곳에 주소..

퍼블리셔/기술2012.12.12 09:00

표준웹브라우져는 media queries 를 지원하기 때문에 따로 추가적인 방법을 사용하지 않아도 됩니다. 하지만 ie는 media queries 를 지원하지 않기 때문에 자바스크립트를 추가해줘야 합니다.자바스크립트를 사용해서 윈도우의 너비를 안다거나, 기타 기술에 대한것은 여기서는 다루지 않고 단순이 ie가 미디어쿼리를 인식하는 방법만 이야기 하겟습니다.미디어쿼리를 지원하는 자바스크립트는 유명한것이 두가지가 있습니다.바로 respond.j..

퍼블리셔/기술2012.12.10 09:00

제가 이번에 부트스트랩 반응형 스킨을 만들면서 이미지와 동영상에 대한 자료를 찾다가 이미지 캡션을 적용하는 방법을 찾고 티스토리 블로그에 적용을 해 봤습니다. 비교적 좋은점이 많아 적용하는 방법을 이렇게 공유합니다. 티스토리 블로그에서 이미지에 대한 치환자는 imageblock 입니다. 그리고 이미지 아래에 적용하는 자막은 cap1 클래스를 사용합니다. 치환자와 클래스에 대해서 자세히 보실려면 http://www.tistory.com/ma..

퍼블리셔/기술2012.10.31 09:00

float 는 띄우다 라는 뜻으로 css 코드 입니다. 좌우측으로 배치를 할때 사용하는데요. float: left 하면 왼쪽으로 요소를 배치합니다.특히 레이아웃을 마크업할때 많이 사용합니다.float 문제는 요소를 띄우다보니 float 를 사용한 부모요소가 자식요소의 높이를 몰라 다른 컨텐츠와 레이아웃이 겹치게 됩니다.그래서 float 를 사용하면 반드시 해제를 시켜줘야 합니다.이전에도 이와 비슷한 글을 쓴적이 있는데요. float 를 해제..

퍼블리셔/기술2012.10.25 09:00

부트스트랩의 장점중 하나는 기본 틀이 만들어져 있어서 갖다 쓰기만 하면 된다는 점입니다. 그중에서 드롭다운 형식의 메뉴바입니다. 자세한 내용은 http://twitter.github.com/bootstrap/javascript.html#dropdowns 를 참고하시기 바랍니다. 일단 예제를 한번 보시죠.  어떤걸 말하는지 보시면 알 수 있을겁니다. ..

퍼블리셔/기술2012.10.13 09:00

에디터등에 사용하기 좋은 글꼴입니다. 한글을 표기할때는 아무래도 나눔고코딩 글꼴을 사용합니다만 영어를 표현할때는 모나코 글꼴을 사용합니다. Bitstream Vera Sans Mono 도 좋다고는 하나 개인적으로 저는 모나코 글꼴이 가장 좋은것 같네요. 업로드 해보니 모나코가 가장 가볍군요. 아래 스샷은 윈도우에서  notepad++ 에서 모나코 글꼴을 사용할때 입니다. 개인적으로 포맷을 하거나 그럴때 꼭 나눔고딕과 모나코 글꼴을..