demun(대문블로그)

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

퍼블리셔/css2012. 12. 11. 09:00

반응형으로 이미지와 동영상을 적용하는 방법을 알아보겠습니다. 미디어쿼리를 ie가 지원하지 않기 때문에 자바스크립트등을 적용하는 방법이 아닌 순수 html 과 css 만으로 반응형으로 동작하는 방법을 알아보고, 티스토리 블로그에도 적용이 가능한 방법을 알아봅니다. ie 에서 미디어쿼리등을 지원하는 방법등은 나중에 다시 쓰겠습니다. 이미지가 반응형으로 자동으로 크기가 줄어들고 커지고 할려면 코드는 간단합니다. img { max-width: 100%; height: auto; } 근데 여기에는 한가지 알아두어야 할 점이 있습니다. img 의 최대크기를 100%라고 했지만 이것은 어디까지나 부모의 너비가 최대치입니다. 즉 부모가 너비가 width:500px 처럼 한정되어 있으면 최대 500px 까지만 커지는 겁..

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

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

티스토리2012. 12. 9. 13:23

2012우수블로그에 선정되어 검색스페셜에 적용이 되었다는 공지가 있었습니다.2012 우수블로그 검색스페셜 적용 안내 -> http://notice.tistory.com/2088 다음에서 검색을 하면 아래와 같은 형식으로 나온다고 합니다.[ 검색스페셜 결과 구성 ]- 티스토리 우수블로그로 표시되며 검색결과의 최상단에 표시- 우수블로그 배지과 블로그 제목, 필명, 주소, 최근 작성글(2개) 표시 [ 검색 방법 ]- 검색 스페셜이 나오는 화면은 블로그 이름, 블로그 URL, 필명 + 블로그로 검색할 경우에 나타납니다. 해서 저도 제 블로그를 검색해봤습니다.대문블로그를 검색을 하면 잘 나오는반면. 필명인 demun 으로 검색을 하면 나오지 않더군요. 약간의 아쉬움이 있었습니다.

퍼블리셔/SublimeText2012. 12. 7. 09:00

이전글에 보시면 서브라임 텍스트에서 css, javascript 는 압축하는 방법을 보셨을겁니다. 또한 온라인으로도 css 와 javascript 는 압축하는 곳이 많이 있습니다. 이번에는 html 코드를 압축하는 방법을 알아보겠습니다. 역시 배포할때는 압축해서 쾌적한 상태로 하는것이 좋지요. 먼저 온라인상에서 html 을 압축하는곳을 몇군데 테스트 해봤습니다. 티스토리의 경우는 치환자라는 개념이 있어서 올바르게 압축하지 못하는 곳이 몇군데 있더군요. 하지만 Sublime text 2에서 사용하는 html-compressor 은 무리없이 압축하였습니다.Html-compressor -> https://github.com/darkdelphin/Html-compressor 사용하는 방법을 알아보겠습니다. Ct..

티스토리/티스토리초대장2012. 12. 3. 20:57

얼마전 우수블로그에 선정되어 초대장이 100장이 넘게 생겨서 배포했습니다.그런데 아직 다 배포를 못했습니다.현재의 글에 댓글을 달아주세요. 비밀글에 체크를 하시고 어떤블로그를 만들지와 이메일주소를 꼭 적어주셔야 보낼수 있습니다.제목에 마감이라는 글이 있을때까지 댓글을 다세요. 마감되면 제목에 마감이라는 글을 적어놓겠습니다. 이메일 주소를 적어야만 보내드리는데......안적는분이 많이 계시는군요.이제 끝났습니다.

티스토리/티스토리초대장2012. 11. 27. 09:00

2011에 이어 이번 2012에도 티스토리 우수블로그에 선정이 되었습니다. 이에 기념하여 티스토리 초대장이 100장이 충전되었습니다. 티스토리 초대장 100장을 배포합니다. 어떤 블로그를 꾸미실지와 이메일을 비공개에 체크하시고 댓글로 달아주세요.마감이 될경우 제목에 마감을 표시하겠습니다. 마감이라는 글이 없으면 계속 댓글 달아주세요. 순차적으로 모두 보내드리겠습니다. 댓글이 100개가 넘어도 됩니다.안보내지는 경우가 약 30% 있으니 마감이라는 단어가 있을때까지 적어주세요. 또 다른블로그가 몇개 더 있습니다.초대장이 더 있어요.계속 댓글 다세요..... 초대메일 받고 바로 개설하지 않은분은 다음분을 위해 취소하고 다음분에게 초대하겠습니다. 마감이라는 글이 있을때가지..... 댓글이 많을 경우 아래의 댓글..

퍼블리셔/SublimeText2012. 11. 26. 09:00

서브라임텍스트를 사용하면서 알게된 사용법 및 팁을 알려드립니다. 아마도 팁에 관한 글은 몇가지 더 연장될것으로 생각됩니다. 이글에서 알려드릴 사용법등은 아래와 같습니다. Package Control 삭제하는 방법.(플러그인 삭제하는 법).서브라임 텍스트 초기상태로 되돌리기.코드작성시 옆으로 이동하는 방법.Snippet 의 간단한 소개. 1. Package Control , 플러그인 삭제하는 방법. 여기서의 삭제는 플러그인을 삭제하는 방법을 말합니다. 간혹 플러그인을 설치했는데 마음에 안든다든가, 키의 충돌이 있다든가하면 플러그인을 삭제하면 됩니다. 근데 삭제하려면 먼저 Remove Package 를 선택합니다. 플러그인 설치때와 마찬가지로 곧이어 설치되어 있는 플러그인 목록이 나옵니다. 아래의 이미지는 ..

퍼블리셔/SublimeText2012. 11. 23. 09:00

Sublime Text 2(서브라임 텍스트)의 플러그인중에서 코드의 오류를 자동으로 잡아주는 플러그인이 SublimeLineter 입니다. 플러그인을 설치하고 어떻게 오류를 잡아내는지 한번 보겠습니다. SublimeLinter -> https://sublime.wbond.net/packages/SublimeLinter Sublime Linter 설치하기. Ctrl+Shift+P 를 눌러 Package Control 을 설치합니다. 바로 나오는 창에 sublime linter 을 입력하면 아래처럼 나옵니다. 엔터를 클릭해서 설치합니다. SublimeLinter 은 설치하면 안내문구를 보여줍니다. Sublime Linter 플러그인이 잡아주는 오류는 어떤 언어에서 해당이 될까요? 아래줄에 나오는것처럼 상당이..

퍼블리셔/SublimeText2012. 11. 22. 09:00

추가합니다. 아래의 내용은 플러그인이 설치된다음 단축키를 지정하다보니 필요이상의 단추키가 있습니다.단축키에 대한 내용은 demunCode 저장소에서 업데이트 됩니다.https://github.com/demun/demunCode/tree/master/SublimeText/Knowhow Sublime Text 2 인 서브라임 텍스트의 단축키를 모두 모아봤습니다 메뉴에 있는 순서대로 2단계 깊이까지 모두 모았으며, 플러그인이 추가되어서 추가된것도 있음을 알려드립니다. 기본 보다 더 많을수도 있고, 플러그인을 많이 설치한분은 이보다 더 많을수도 있습니다. 대략 한글로 표기할려고 했고, 단축키를 눌렀을때 어떻게 되는지 설명을 덧붙여으니 참고사항이 될겁니다. 애매한 것도 있으니 참고하세요. 간혹 플러그인을 설치하다..