demun(대문블로그)

퍼블리셔/기술2018. 12. 20. 10:59

블로그상에서 코드를 이쁘게 보이기 위해서 여러가지 플러그인을 사용해봤습니다. 이전까지만해도 가장 많이 사용했던 플러그인은 highlightjs 였습니다. 구문강조 highlightjs 사용법 -> http://demun.tistory.com/2419?category=388459 블로그상에서 구문강조 할때는 여러가지 유의해야 합니다 막 바꾸다가는 이전 작업물이 제대로 나오지 않는다던가, 또는 다시 작업해야하는 양이 많아질수 있습니다. 저도 이전에 highlightjs 를 사용했기때문에 이번에는 prismjs 로 변경을 해서 작업해야하는 양이 좀 되긴 합니다. 제가 구문강조 플러그인 선택한 이유용량이 적습니다.(원하는 언어, 기능만 선택해서 사용가능)기능이 많습니다.(숫자 표시, 하이라이트 기능 등등 이것도..

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

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

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

hightight.js 제가 오늘 소개해드릴 스크립트는 바로 highlight.js 입니다. 블로그를 하다보면 코드를 하이라이트 하고 싶을 때가 있습니다. 많은 자바스크립트가 있는데 그중에 highlight.js 를 소개하는 이유가 있습니다. 이글은 2011년도에 작성한 글입니다. 그래도 참고하기에는 좋은 글이기에 이렇게 적습니다. 자바스크립트 구문광조 비교 : http://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison shjs 자바스크립트는 원문에서 비교했는데 여기서는 뺐습니다. 뭐가 좋다라고 얘기하기에는 무리가 있을 수 있지만 참고하여 뭘 사용할지는 알수 있겠지요.홈페이지 -> http://highlightjs.org/우리가 자주 사용하고 ..

퍼블리셔/기술2013. 1. 5. 17:25

IE는 버젼별로 조건을 걸어서 스타일을 작성하곤 합니다. 그래서 HTML이 아주 조건부 주석으로 난잡해지고 또한 스타일시트도 버젼별로 만들어서 사용하곤 했습니다. 하지만 좀더 간단하고 효율적인 방법이 있어 소개합니다. 아래의 경우는 제가 이번에 제작한 스킨인 Responsive 라는 스킨에도 포함된 마크업구조 입니다. 반응형 티스토리 블로그 스킨 Responsive 를 소개합니다. -> http://demun.tistory.com/2264 티스토리의 경우 스킨 편집에서 업로드하면 images 라는 폴더구조가 생깁니다. ie6,7,8 등의 스타일시트를 만들고, IE를 조건부로 스타일시트를 링크시킬려면 에 아래처럼 사용합니다. 이것도 좋지만 단점은 각각의 스타일시트를 만들어서 사용해야 한다는 점입니다. 이걸..

퍼블리셔/기술2012. 12. 19. 09:00

반응형으로 웹사이트를 제작하다보면 테스트를 해야 하는데 테스트할 수 있는 사이트나 도구가 적당치 않습니다.그래서 이번에는 웹에서 반응형으로 제작한 사이트를 테스트 할 수 있는 곳을 몇군데 찾아봤습니다. 1. http://mattkersley.com/responsive/제 블로그 주소를 넣고 확인해 봤습니다.다양한 형태의 모습을 확인할 수 있습니다. 2. http://www.responsinator.com/ 상단에 주소를 넣는곳에 주소를 넣으면 여러가지 디바이스에서의 모습을 확인할 수 있습니다.이미지에는 두가지 형태만 보이지만 모바일서부터 1024 크기의 테블릿까지 모두 한번에 확인할 수 있습니다. 3. http://responsivepx.com/ 상단에 주소를 넣고 노랑 네모박스에 잇는 곳을 늘렸다 줄였..

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

표준웹브라우져는 media queries 를 지원하기 때문에 따로 추가적인 방법을 사용하지 않아도 됩니다. 하지만 ie는 media queries 를 지원하지 않기 때문에 자바스크립트를 추가해줘야 합니다. 자바스크립트를 사용해서 윈도우의 너비를 안다거나, 기타 기술에 대한것은 여기서는 다루지 않고 단순이 ie가 미디어쿼리를 인식하는 방법만 이야기 하겟습니다. 미디어쿼리를 지원하는 자바스크립트는 유명한것이 두가지가 있습니다.바로 respond.js 와 css3-mediaqueries.js 입니다.자세한 정보와 다운로드 받을수 있는 주소는 아래와 같습니다. repond.js => https://github.com/scottjehl/Respond/downloadscss3-mediaqueries.js => ht..

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

제가 이번에 부트스트랩 반응형 스킨을 만들면서 이미지와 동영상에 대한 자료를 찾다가 이미지 캡션을 적용하는 방법을 찾고 티스토리 블로그에 적용을 해 봤습니다. 비교적 좋은점이 많아 적용하는 방법을 이렇게 공유합니다. 티스토리 블로그에서 이미지에 대한 치환자는 imageblock 입니다. 그리고 이미지 아래에 적용하는 자막은 cap1 클래스를 사용합니다. 치환자와 클래스에 대해서 자세히 보실려면 http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=5#cap1 를 참고하세요. 이번 이미지 자막을 슬라이딩 되어서 보여지는 것입니다. 처음에는 물음표 형식을로 아이콘처럼 생긴것이 보여지고 마우스를 올리면 이미지자막이 슬라이딩 되면서 보여지..

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

float 는 띄우다 라는 뜻으로 css 코드 입니다. 좌우측으로 배치를 할때 사용하는데요. float: left 하면 왼쪽으로 요소를 배치합니다. 특히 레이아웃을 마크업할때 많이 사용합니다. float 문제는 요소를 띄우다보니 float 를 사용한 부모요소가 자식요소의 높이를 몰라 다른 컨텐츠와 레이아웃이 겹치게 됩니다.그래서 float 를 사용하면 반드시 해제를 시켜줘야 합니다. 이전에도 이와 비슷한 글을 쓴적이 있는데요. float 를 해제하는 방법은 여러가지가 있기 때문입니다.float 속성[정렬] IE 해결법 -> http://demun.tistory.com/1889float 를 해결하는 방법 -> http://demun.tistory.com/1932 그럼 오늘은 왜 쓰냐?요것도 업데이트 됐습니..

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

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

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

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