demun(대문블로그)

티스토리2014. 5. 25. 17:35

티스토리를 한지는 오래되었지만 간담회에 참석한지는 이번이 처음입니다.개인적으로 티스토리 블로그가 가장 좋다고 생각하고 있습니다. 그 이유중에 하나는 바로 업로드 공간과 html 을 처음부터 끝까지 모두 사용자가 수정할 수 있다는 매력 때문입니다.하지만 몇몇 제약과 기능지원 미흡으로 인해 많은 유저들이 떠났고, 티스토리 스킨 제작 또한 어려움을 겪고 잇는것도 사실입니다. 이런 부분을 이야기하고 해결하고 싶어서 참석한것입니다.다행이도 스킨에 대해서 이야기를 할 수 있는 시간이 있어서 다행이였습니다. 건물 입구에 안내하시는분이 기다리고 있어서 쉽게 찾을 수 있었습니다. 티스토리 간담회에서 하는 주제에 대해서 알려주었습니다.보시다시피 토론 4번에 스킨 기능 강화라는 글이 보입니다. 많은 유저분들을 만났고, 많은..

티스토리/스킨변경제작이력2014. 5. 14. 07:00

요즘 반응형 스킨을 제작하고 있는데 시간이 너무 걸려서 근황을 소개하려고 글을 작성합니다.이번에 제작하는 반응형 스킨은 부트스트랩을 포함하지 않습니다.그래서 ie까지 모두 지원하는 스킨을 만들고 있습니다. 1단,2단3단 레이아웃 모두 만들고, 여러가지 컬러셋을 적용하는 버젼을 모두 만듭니다.거기에다가 각종 플러그인이 장착이 된 버젼까지 전부 따로 따로 만듭니다. 그러다보니 각각의 파일과 레이아웃, 컬러셋마다의 분리가 필요하고 관리가 엄청 납니다.만들다보니 거의 프로젝트 수준입니다. 여기에 Grunt 를 적용해서 좀더 완성적으로 만들려고 익히면서 만들고 있습니다.현재 그런트에 들어가는 플러그인은 7개 정도인데 targethtml, handlebars 정도가 더 들어갈수도 있을거 같네요.이제 세네개 컬러셋을..

퍼블리셔/Grunt2014. 5. 13. 06:00

요즘 반응형으로 티스토리 스킨을 만들고 있는데 grunt 를 사용해서 제작하고 있습니다. grunt 플러그인들이 너무 많아서 하나 하나 익히고, 적용해가면서 제작하고 있는데요. 나무 양이 많아 하나 하나 정리하면서 포스팅하면서, 제작할려고 이렇게 글을 남김니다. grunt 홈페이지 -> http://gruntjs.com/ grunt 홈페이지 번역 -> http://gruntjs-kr.herokuapp.com/ grunt-csscomb 저장소 -> https://github.com/csscomb/grunt-csscomb 기본 사항은 위의 주소에 다 나와 있습니다. grunt-csscomb 는 css 속성을 순서별로 잘 정리하는 역활을 합니다. gruntfile.js 는 아래와 같이 설정합니다. 주석으로 처..

티스토리2014. 5. 5. 13:07

얼마전에 티스토리 공지에 2014 티스토리 간담회에 여러분을 초대합니다. 라는 글을 보았습니다. 그 당시 회사일이 바뻐 글을 작성했다가 못하고 다시 글을 쓰는군요. 저는 퍼블리셔라는 직군에 있습니다. 그러다보니 스킨을 제작하고 배포하곤 합니다.티스토리 블로그를 약 8년정도 하고 있습니다. 내 블로그 되돌아보기 8년이다하다보니 왠만한 블로그에 대한 팁이나 정보는 많이 알고 있다고 생각합니다.블로그 팁이라는 카테고리가 있는데 몰라서 못쓰는 경우도 있지만 시간에 쫒겨 쓰지못하는 경우가 더 많습니다. 스킨을 제작하고 배포한것이 약 30여종이 됩니다.제작하면서 배우기도하고 버그를 만나기도하고 스킨을 사용하는 블로거들의 마음을 알기도 합니다. 블로그를 처음 할 당시에는 포터블이란 프로그램이 좋아서 막 제작하고 배포..

퍼블리셔/css2014. 4. 16. 09:14

반응형으로 작업을 해보신분들은 아마도 아실겁니다. 아이폰의 경우 뷰포트가 변경이 되면 자동으로 폰트 크기를 조절합니다. 이걸 방지하는것이 text-size-adjust 입니다. text-size-adjus 는 4가지 속성을 사용할 수 있습니다. 1. auto html { -webkit-text-size-adjust: auto; } 화면의 폭에 맞게 텍스트의 크기를 자동으로 조절한다. 자동으로 조절한다는것은 디바이스의 렌더링이 다르다면 다르게 렌더링이 되므로 추천하는 방식은 아니다. 2. none html { -webkit-text-size-adjust: none; } 텍스트의 크기를 자동으로 조절하지 말라는 뜻이다. 대체적으로 많이 사용하는 방법이다. 일반적으로 body 의 폰트크기를 설정하고 미디어쿼리..

블로그/블로그팁2014. 4. 11. 06:00

오랜만에 구글 계정에 로그인을 해보니 새로운 것이 생겼습니다. 언제 생겼는지는 몰라도 웹마스터 도구에 기타 리소스에 구조화된 데이터 마크업 도우미라는 것이 있습니다. 대략 알아본결과 검색엔진에 더 잘 검색이 되도록 html를 구조화 시키고, schema 나 마이크로데이터 및 json-ld 로 마크업을 하는것을 말합니다. 아래의 블로그 글은 html에 대한 지식이 없는 분들을 위해 사용하는 방법에 대한 글을 적은것입니다. 이것이 필요한것인지 아닌지는 구글 도움말을 참고하세요. 구글의 웹마스터 도구에 로그인을 해보세요. -> https://www.google.com/webmasters/ 구조화된 데이터 마크업 도우미 구글 도움말 -> https://support.google.com/webmasters/top..

퍼블리셔/도구2014. 3. 28. 07:00

홈페이지 제작을 위한 프레임워크는 유명한 부트스트랩이 있지요. 또 Foundation 이나 Skeleton 도 많이 사용합니다. 더 많은 프론트 엔드 프레임워크는 http://usablica.github.io/front-end-frameworks/compare.html 에서 보실수 있습니다. 하지만 이 모든것이 외국것이라는.....아쉬운점이 있습니다. 우리나라에서 제작한 것도 있습니다 그래서 여러분들께 알려드릴려고 이렇게 포스팅하게 되었습니다. 바로 엑시스제이(AXISJ) 입니다. -> http://www.axisj.com/ 장기영이라는 분이 제작한 걸로 알고 있고, 여러분이 협업하여 도와주시고 있는걸로 알고 있습니다. http://dev.axisj.com/ 로 가시면 다양한 UI 들을 보실수 있습니다...

퍼블리셔/도구2014. 3. 26. 07:00

반응형으로 검색을 하다가 좋은 프레임웍이 있어 소개합니다. 바로 320 and Up 입니다. 장점은 뭐냐? 1. 미디어쿼리: 480,600,768,992,1382 등에 맞쳐 미디어쿼리를 만들어놓았습니다. 2. 컬러, texture, 타이포그래피 등을 레이아웃과 분리하여 작성하여 두었습니다. 3. 부트스트랩의 버튼, 폼, 테이블 스타일을 사용할 수 있습니다. 4. Modernizr, Selectivizr 과 responsive type tester 그리고 design tester 등을 사용할수 있도록 했습니다. 5. Less 와 Sass 를 사용할 수 있습니다. 다운로드해서 index.html 을 보면 HTML5 Boilerplate 를 사용한것을 볼 수 있습니다. 그리드 시스템은 frameless 를 사..

일상2014. 3. 25. 22:33

우연치않게 Calum von Moger 라는 사람의 사진을 보게 되었다.....사진을 보고 적잖이 놀랐다....엄청난 근육 때문이였다.지금 한창 뜨는 보디빌더인것 같다. 꼭 모습이 사람이 아니라 기계같다.관심있는 분은 페이스북에서 친구 삼아보세요.Calum von Moger 페이스북 -> https://www.facebook.com/calumvonmogerbodybuilder 유튜브에도 관련 동영상이 있습니다.https://www.youtube.com/results?search_query=Calum+von+Moger&search_sort=video_date_uploaded

퍼블리셔/jQuery2014. 3. 19. 08:00

새로작성한글을 참고하세요 bpopup 예제 -> http://demun.tistory.com/2425 글하단에 예제 링크가 있습니다. http://code.demunskin.com/plugins/bpopup/html/bpopup.html 실무에서 레이어팝업을 사용했었는데 좀더 쓸만한것을 찾다가 jquery 플러그인중에서 레이어팝업으로 좋은것을 알려드립니다. 홈페이지 -> http://dinbror.dk/bpopup/ jquery, 필요에 따라서는 easing 플러그인을 로드한다는것이 좀 그렇지만 좋아보여 소개합니다. 1. 기본 팝업 스타일. 처음것은 기본으로 많이 사용하는 팝업입니다. 효과없이 일반적인 레이어팝업이며 설정이 무척 간단합니다. 살짝 스타일을 입혔습니다. 아래처럼 나옵니다. 2. 추가적으로 ..