demun(대문블로그)

퍼블리셔/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 를 참고하세요. 이번 이미지 자막을 슬라이딩 되어서 보여지는 것입니다. 처음에는 물음표 형식을로 아이콘처럼 생긴것이 보여지고 마우스를 올리면 이미지자막이 슬라이딩 되면서 보여지..

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

퍼블리셔/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단계 깊이까지 모두 모았으며, 플러그인이 추가되어서 추가된것도 있음을 알려드립니다. 기본 보다 더 많을수도 있고, 플러그인을 많이 설치한분은 이보다 더 많을수도 있습니다. 대략 한글로 표기할려고 했고, 단축키를 눌렀을때 어떻게 되는지 설명을 덧붙여으니 참고사항이 될겁니다. 애매한 것도 있으니 참고하세요. 간혹 플러그인을 설치하다..

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

Sublime Text 2는 정말 안된는것이 없을정도입니다. 계속적으로 좀더 유용한 기능을 찾으면 찾을수록 하나 하나 늘어납니다. 기존에 이런 기능이 필요했던 사람들이 만들어놔서 찾아서 실행만 하면 되니까요. 이전에는 less 파일을 에디터에서 구문강조하는 기능을 알아봤습니다. Sublime Text 2에서 less 파일 구문강조하기 -> http://demun.tistory.com/2230 이번에는 기존의 less 파일 컴파일도구가 아니라 직접 Sublime Text 2에서 작성하고 바로 컴파일할 수 있는 기능을 소개합니다. https://sublime.wbond.net/packages/LESS-build Sublime Text 2 자체가 윈도우, 맥, 리눅스 등 모든 운영체제에서 사용이 가능하니 이것..

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

서브라임 텍스트(Sublime Text 2) 에서 플러그인인 Emmet 에 대해서 포스팅한적 있습니다. Emmet 에 대해서 모르신다면 이전글을 참고하세요. Sublime Text 2에서 Emmet 사용하는 방법 -> http://demun.tistory.com/2222 좀더 편하게 사용하려면 어떤 기능 즉 단축키가 있는지 알면 아는만큼 편하게 사용할 수 있습니다. 예를들어 html:5 라고 입력하고 확장키인 Tab 을 누르면 아래처럼 기본 html5의 doctype 의 코드가 편하게 들어갑니다. html:4t , html:4s , html:xt , html:xs , html:xxs 등을 입력하고 눌러보세요. 뭐가 나오는지? 대략 이것만 보고 아는 분이 있다면 코딩에 어느정도의 실력이 있는분입니다. ㅎㅎ..

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

Sublime Text 2에서는 좀더 빠르고 편리하게 폴더나 파일을 만드는 플러그인을 제공합니다. 그것이 바로 AdvancedNewFile 입니다. 설치하는 방법과 간단하게 사용하는 방법을 알아보겠습니다. AdvancedNewFile 설치하는 방법 설치는 무조건 Ctrl + Shift + P 를 눌러 Package Control 을 설치합니다. 그다음 바로 AdvancedNewFile 를 설치합니다. 이것으로 설치는 끝입니다. AdvancedNewFile 사이트 -> https://github.com/xobb1t/Sublime-AdvancedNewFile AdvancedNewFile 사용하는 방법 AdvancedNewFile 의 단축키는 윈도우에서 Ctrl + Alt + N 입니다. Sublime Tex..

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

Sublime Text 2에서 파일을 쉽게 불러오고, 다운로드 받는 방법에 대해서 이야기 한적이 있습니다. Sublime Text 2 온라인에서 코드 가져오기(Fetch) -> http://demun.tistory.com/2228 이건 설정에 원하는 주소를 적어놓았을때 쉽게 파일을 다운로드 받거나 가져옵니다. 그래서 이것 저것 필요한것을 모아서 올려놓았습니다. 자주 사용하는 js,css 와 패키지 파일들입니다. 사용하다가 원하는 파일을 불러오려면 아래처럼 Ctrl + Shift + P 를 눌러 Fetch: File 를 선택합니다. 그런 다음 원하는 파일만 선택해주면 됩니다. 여기서 만약 파일이 아닌 패키지를 선택하면 아래처럼 패키지 파일목록들이 올라옵니다. 시간나는대로 좋은 코드나 파일들이 있으면 업데이..