demun(대문블로그)

퍼블리셔/css2012. 7. 21. 13:33

CSS 3 로 제작된 드롭다운 메뉴입니다. 뭐 워낙 좋은 드롭다운메뉴는 많이 있습니다. 그런데 하나같이 이미지가 있어야 하거나, 스크립트가 추가되거나 합니다. 또 부드럽게 하위메뉴가 펼쳐지면 좋은데 그냥 보이고, 감추는 형식입니다. CSS 3 에는 에니메이션이나 트렌스폼같은것이 있습니다. 적절하게 잘만 응용하면 좋은 드롭다운 메뉴가 나오는데요.... 저도 해보았지만 그닥 만만하지가 않군요. 적어도 ie8 버젼까지는 사용할만 해야 할것 같아서요... 이 메인메뉴의 포커스는 아래와 같습니다. 이미지가 없습니다. 자바스크립트가 없습니다. 하위로 펼쳐지는 드롭다운 메뉴입니다. 하위로 부드럽게 펼쳐집니다. 호환성은 ie8 까지는 잘 보입니다. ie7 이하로는 물론 보이기는 하나 약간 엉클어집니다. 뭐 구지 그것까..

티스토리/스킨배포2012. 7. 19. 06:00

또 트랙백을 보내주셔서 오류 잡고 몇가지 스타일 추가해서 알려드립니다. 버그 1. 보호글을 작성했을때 비밀번호를 입력해도 작동되지 않는 버그가 있었습니다. 잘 사용은 안하지만 안된다고 알려주서셔 해결합니다. 추가적으로 스타일을 설정했습니다. 버튼타입은 티스토리에서 작동이 안되고 input 타입만 작동되어서 불가피하게 html 마크업수정하고 스타일 추가합니다. html 편집에서 protectedInput 를 검색하셔서 아래처럼 수정해줍니다. html 그다음 스타일을 추가해주세요. css .protectedInput .input-prepend.input-append .add-on:first-child { margin-right:-5px; } .protectedInput .input-prepend.input-..

티스토리/스킨배포2012. 7. 17. 06:00

부트스트랩 티스토리용 스킨을 업데이트 합니다. 이전에 제작한 Bootstrap_TS 는 하루만에 뚝딱하고 만들어서 디테일한 부분까지 신경을 못 썻습니다. 스킨을 적용하신분이 발빠른 문제점을 제기해주셔서 저도 이렇게 빨리 업데이트 했습니다. 오류수정과 업데이트 내용은 대략 아래와 같습니다. 1. 댓글 안달리는 문제 해결. 2. 댓글, 트랙백 더보기 해결. 3. 트랙백에 버튼 스타일 추가. 4. 제목 부분 여백 추가. 5. 제목 부분 링크 스타일 추가. 6. 사이드바 태그부분 스타일 수정. 7. 네비게이션 관리자 메뉴 확대. 8. 14가지 스타일 사용가능. 오류와 지적을 해주신 유저에게 감사의 말씀을 전합니다. 이번에는 몇가지 지적해주신 부분을 모두 수정하였고 보다 선택의 폭을 넓혔습니다. 오류를 업데이트하..

티스토리/스킨배포2012. 7. 14. 22:05

제가 제작하고 배포하는 스킨중에서 부트스트랩 스킨이 댓글이 안달리는 오류가 있습니다. Bootstrap_TS 스킨을 사용하시는 분은 이글을 보시고 꼭 수정하시길 바랍니다. 현재의 글 다음에 사용하시는분은 제가 수정하겠습니다. 댓글과 방명록에 아래와같은 오류가 있습니다. 우선 방명록을 살펴보겠습니다. 자잘한 버그 한개와 큰 버그 두개 입니다. 메시지 앞에 표시한것이 보이죠. 네모가 보이는데 이건 그전에 폰트를 아이콘으로 표시하는것을 그대로 사용해서 생긴 오류입니다. 메시지 앞에 스페이스(빈공간)을 삭제하면 해결됩니다. 두번째 큰 문제는 댓글을 입력한후 Submit 버튼을 클릭하면 null 을 반환합니다. 이 문제는 티스토리와 fildset 태그와의 충돌로 생각됩니다. 수정후는 아래처럼 잘 되는것을 확인했습..

티스토리/스킨배포2012. 7. 12. 06:00

부트스트랩을 이용한 티스토리 스킨을 배포합니다. 스킨명은 Bootstrap_TS 입니다. 이 스킨은 제가 현재 시점에 적용한 스킨입니다. 기본 디폴트 테마는 부트스트랩에서 제공하는 자바스크립트 플러그인 포함하지 않은 스킨입니다. 단 jQuery 만 포함해서 하단의 top 버튼을 클릭하면 상단으로 부드러운 화면이동을 합니다. 이외에는 아무것도 포함하지 않은 깨끗한 버젼입니다. 되도록이면 디폴트로 사용해서 다른 테마도 이용할 수 있게 만들었습니다. 한 스킨에 아래의 테마를 모두 사용할 수 있습니다.제가 글을 잘 못 썻는지 요청하시는분이 어떤 테마, 어떤 테마 주세요하고 신청을 하십니다. 근데 이 스킨은 한스킨안에 아래의 테마를 모두 사용할 수 있습니다. 사용하는 방법을 아래에서 알려드리는 겁니다.5가지 테마..

일상/도서2012. 7. 11. 06:00

우리나라에는 워드프레스에 대한 책이 정말 없습니다. 워드프레스에 관해서는 정말 선택의 폭이 좁다고 할 수 있지요. 웹액츄얼리에서 맘먹고 외국도서인 워드프레스 제대로 파기를 번역해서 출판한 책입니다. 참고로 저는 웹액츄얼리의 책을 모두 보았습니다. 이번에는 워드프레스를 익히고자 이책을 선택했습니다. 책을 쓴사람은 외국인 크리스 코이어와 제프 스타인데요. 그중 크리스 코이어(Chris Coyier) 는 http://css-tricks.com/ 이라는 곳을 운영하고 있습니다. 이것은 저도 이전부터 잘 가던곳인데요. css 뿐만 아니라 웹디자인 관련과 다른 방면에서도 고품질의 컨텐츠들이 아주 많습니다. 이책에서는 가장 많이 언급하는것이 바로 http://digwp.com/ 이 아닌가 싶습니다. 크리스 코이어가 ..

퍼블리셔/에디터2012. 7. 10. 06:00

텍스트 에디터 중에서 가장 인기있는 에디터가 coda 가 아닌가 싶습니다. textmate, coda 등은 꽤 유명한 에디터이고 테마도 매우 유명합니다. 하지만 윈도우에서 사용할 수 없다거나, 유료이거나 해서 많은 분들이 사용을 못하는 것도 있습니다. 하지만 윈도우에서도 사용할 수 있고 더군다나 무료로 사용할 수 있는 에디터중에서 유명한 notepad++ 가 있습니다. notepad++ 정말 유용한 기능이 많이 있습니다. 단점을 꼽으라고 하면 한글 설명서가 없다는것, 한글 입력이 100%매끄럽지만은 안다는 점이 단점이라면 단점입니다. 저도 가장 많이 사용하는 에디터인데요. editplus 보다더 많이 notepad++를 사용합니다. 제가 notepad++ 테마를 찾다가 아주 유용한 정보가 있어서 알려드립..

퍼블리셔/도구2012. 7. 9. 06:00

css 및 javascript 는 압축을 해서 사용을 하곤 합니다. 이유는 한가지겠죠. 가볍기 때문입니다. 검색을 해보시면 아시겠지만 온라인 압축도구는 많이 있습니다. 제가 검색을 해서 css 압축과 js 압축을 쭉~~ 비교해 보았습니다. 제가 제작한 스킨중에서 GoodFriends 라는 스킨이 있는데 워낙 기능이 많다보니 css 파일도 많고, js 파일도 많습니다. 이걸 온라인 압축기를 모두 테스트해서 비교해보았습니다. 대략 10여곳의 압축기를 이용해보았습니다. 합격점을 받은것은 딱 한군데 입니다. 바로 Online YUI 입니다. => http://www.refresh-sf.com/yui/ 이유는 간단합니다. 압축후에 한글이 깨지지 않아야되고 올바르게 표현이 되어야 합니다. 또 압축해서도 올바르게 작..

티스토리/스킨변경제작이력2012. 7. 8. 14:57

부트스트랩으로 스킨을 변경했습니다. bootstrap 과 kickstrap 에 대해서 하나 하나 풀어가려고 일단 이놈으로 변경했습니다. 아쉬운점은 부트스트랩에서 제공하는 아코디언 메뉴를 티스토리 스킨에서는 사용하지 못합니다. 중간에 치환자가 들어가서 됏다 안됐다 합니다. 하지만 치환자가 들어가지 않은 곳에서는 얼마든지 사용할수 있습니다. 이 스킨에서는 그닥 스타일이 많이 변경된것이 없습니다. 흰색 배경에 회색 사이드바 정도....아니면 댓글 부분이 회색인 정도.... 그건 윈본에서 지원하는 것만 사용했기 때문입니다. 아래 이미지는 본문에서 kickstrap 에 대한 글을 쓴적이 있는데 그걸 스샷으로 찍었습니다. 되도록이면 원본을 건드리지 않는 선에서 제작을 했습니다. 원본을 조금만 건드리니 좀더 보기 좋..

퍼블리셔/Bootstrap2012. 7. 8. 06:00

얼마전 부트스트랩을 소개한적이 있었습니다. 보자마자 티스토리 스킨에 적용을 해보았지요.... Bootstrap - 홈페이지 개발 및 디자인을 위한 혁명적인 도구 => http://demun.tistory.com/2133 부트스트랩(Bootstrap)에 관한 유용한 도구 => http://demun.tistory.com/2136 부트스트랩으로 만들어본 티스토리 스킨 참고 이미지. 그냥 흰색 배경에 사이드바는 아코디언 메뉴로 만들어 봤습니다. 상단 네비게이션은 부트스트랩에서 지원하는 드롭다운으로 만들었구요. 또 하단에는 탭메뉴를 적용해봤습니다. 부트스트랩도 완전하지는 않았습니다. 아니 티스토리에 적용하는데 잇어 단점도 보이더군요. 특히 자바스크립트 부분이 티스토리는 치환자를 사용하기 때문에 아코디언 부분이 ..