demun(대문블로그)

퍼블리셔/기술2012. 1. 27. 13:00

서식이라는것이 스킨의 스타일에 어느정도는 영향을 받습니다. 그래서 각각 다른 스킨마다 서식이 약간씩 코드를 수정해줘야 합니다. 리본 서식 1 이미지 => http://demun.tistory.com/2065 리본 서식 1 적용법 => http://demun.tistory.com/2061 위의 글에서 적용이 안된다는 분이 있어서 제가 그분의 스킨을 수정해봤습니다. 방법은 두가지가 있는데요. 첫번째것이 가장 확실하고 깔끔합니다. 먼저 리본서식 1 적용법에 대한 글을 먼저 읽어야 이 글을 이해할 수 있습니다. 그럼 방법 중에서 첫번째 방법을 알아보겠습니다. overflow:hidden 속성 제거 이 서식의 적용방법중 주의해야 하는코드가 바로 아래부분입니다. h3.tForm { margin: 0 0 20px -..

티스토리/티스토리가이드2012. 1. 27. 06:00

이번에는 이미지를 사용하지 않고 제목 서식에 사용하기 좋은 방법을 알려드리겠습니다. 이 방법은 외국 사이트에 올라온 것중에서 코드만으로 스타일을 설정하는 방법이 좋아 소개합니다. 출처는 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-practical-css-shapes/ 입니다. 제가 일단 적용을 해봤습니다. 제 블로그 제목에 보면 이것이 설정되어 있습니다. 한번 보시죠. 이 방법의 장점은 이미지를 사용하지 않기 때문에 글씨가 길어져도 스타일이 깨지지 않고 그대로 적용할 수 있다는 점입니다. 반면 단점은 CSS 7이하는 지원되지 않는다는 점입니다. 그렇다고 해도 깨지거나 하지는 않으니 적용할만 합니다. 일단 IE6에서 어떻게 보여지는지 ..

Design2012. 1. 26. 06:00

티스토리에서 사용할 수 있는 리본서식중에서 첫번째에 해당하는 이미지들입니다. 폴더의 이름은 images 로 했으며 폴더 안에는 포토샵 파일인 psd 파일도 같이 포함이 되어 있습니다. 그래서 포토샵으로 열어서 이미지의 색깔을 변경하는 것도 가능합니다. 폴더의 내용은 아래와 같습니다. 이미지를 활용해서 사용하는 방법은 따로 적었습니다. 티스토리 리본 제목 서식 만들기 1 => http://demun.tistory.com/2061 압축을 했으니 압축을 해제해서 사용하세요.

티스토리/티스토리가이드2012. 1. 26. 06:00

제목에 사용하기 좋은 서식으로써 이름을 리본으로 정했습니다. 몇가지가 있기에 순서대로 1,2,3... 형식으로 나갑니다. 먼저 둥근 형태의 리본서식으로 제목에 사용하기 좋은 형태입니다. 오늘 사용하는 방법은 이미지가 필요합니다. 그래서 제가 먼저 이미지를 만들어 보았습니다. 이미지를 두개로 슬라이스해서 CSS 코드로 사용하는 방법으로 sliding doors 기법이라고 합니다. 완성작을 한번 보시죠. 이 방법은 티스토리에서도 사용하기 편하고 IE6까지 모두 지원합니다. 물론 크로스 브라우징을 하려면 약간의 코드가 더 추가되어야만 하지만요.... 여하는 티스토리에서 적용하는 방법을 알려드리겠습니다. 먼저 이미지 파일을 다운로드 받아서 압축을 해제하세요. 이미지 파일은 아래 링크에 있습니다. 디자인 리소스의..

퍼블리셔/jQuery2012. 1. 24. 06:00

라바램프 메인메뉴는 jQuery 를 이용하는 아주 인기 있는 메인메뉴입니다. 제가 지금 현재 적용해봤는데요. 이전에 XE 로 레이아웃 스킨을 만들때 적용해봤었습니다. 이번에는 티스토리에 적용을 해봤습니다. 이걸 알려드리겠습니다. LavaLamp => http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ 이걸 좀더 업그레이드 시키고 사용하기 편하게 소개한 글이 있습니다. 아래의 사이트가 가시면 데모와 다운로드를 받을수 있습니다. Lava Lamp 스타일을 만드는 방법 => http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-lava-lamp-style-navigatio..

티스토리/스킨배포2012. 1. 23. 06:00

html5로 마크업된 티스토리 스킨 Gray Border 입니다. 2단 레이아웃으로 나눔고딕을 기본 글꼴로 하고 있습니다. 이전에 소개했던 Gray Border 스킨 소개글을 참고하시기 바랍니다. 이전에 작성되었던 스킨에서 테스터를 통해 좀더 코드를 수정했습니다. 수정된 점은 아래와 같습니다. 첫번째. 글꼴을 나눔고딕으로 하는것은 같으나 api 주소가 변경이 되었고 색상을 좀더 진하게 해서 가독성을 좀더 좋게 했습니다. 두번째. 광역 스타일인 button 의 스타일을 각각의 선택자에게 스타일을 입혔습니다. 버튼을 추가할경우 스타일이 겹치는 현상이 있다고 테스터하시는 분이 지적을 해주셨습니다. 그래서 각각 선택자에게 스타일을 주어서 추가되는 버튼과는 겹치지 않게 했습니다. 이 부분에서 많은 부분이 코드가 ..

퍼블리셔/css2012. 1. 22. 06:00

CSS3가 많이 보편화 됐습니다. 익스플로러만 사용하지 않는다면 거의 모든 브라우져들이 html5와 CSS3를 많이 지원합니다. 이번에는 웹폰트를 활용해서 버튼을 만들고 아이콘까지 포함되는 방법을 알아보겠습니다. 이것은 이미지없이 CSS 코드만으로 버튼을 만들고 아이콘까지 적용하는 방법입니다. 완성작을 한번 보여드리겠습니다. 먼저 html 마크업은 아주 간단합니다. 아래와 같습니다. Download 다음은 CSS 코드입니다. body { width: 500px; margin: 200px auto; background: #666; } .button { width: 450px; height: 100px; line-height: 100px; color: #333; text-decoration: none; fo..

티스토리/티스토리초대장2012. 1. 21. 13:26

티스토리 초대장이 아직 43장이나 남아 있습니다. 티스토리 초대장을 배포합니다. 어떤 블로그를 하실건지와 메일 주소를 적어주세요. 초대장이 없을 경우 제목에 마감이라는 단어가 추가됩니다. 마감이라는 단어가 없으면 초대장이 있는것이니 신청해주세요. i n v i t a t i o n 티스토리 초대장 + 남은 초대장 수 : 43 안녕하세요! 티스토리에 보금자리를 마련하시려는 여러분께 초대장을 배포해 드리려고 합니다. 나만의, 내 생각을, 내 기억을 담는 소중한 블로그를 만들고 싶다면 티스토리로 시작해보세요! 티스토리 블로그는 초대에 의해서만 가입이 가능합니다. 원하시는 분은 댓글에 E-mail 주소를 남겨주시면 초대장을 보내드립니다. 남겨주실 때에는 꼭 비밀댓글로 남겨주세요! 초대장을 보내드리고 바로 개설하..

퍼블리셔/css2012. 1. 21. 06:00

티스토리에서는 상단의 따옴표를 클릭하면 한 영역을 인용문형태로 만들수 있습니다. css 에서도 blockquote 를 처리하는 코드가 있는데 이걸 이미지가 없이 CSS 코드만으로 그럴싸하게 만들수 있습니다. 코드는 아래와 같습니다. blockquote { padding-top: 20px; overflow: hidden; line-height: 150%; color: #454545; } blockquote:before { display: block; float: left; margin: 10px 15px 0 0; font-size: 100px; content: open-quote; color: #bababa; text-shadow: 0 1px 1px #909090; } blockquote:after { c..

티스토리/스킨배포2012. 1. 20. 16:32

demunWhite 스킨이 1단,2단,3단 각각 존재합니다. 2단과 3단을 같은 글에 써서 글을 두개로 분리했습니다. 전제적인 특징은 2단 스킨에 대한 글을 참고하세요. 자세히 적었습니다. demunWhite 3단 스킨도 2가지 테마를 가지고 있습니다. 화이트, 블랙 테마는 화이트가 기본입니다. 이름을 정할때 다른 스킨들도 화이트라는 이름이 많아서 저는 구별하기위해 demun 이라는 이름을 붙였습니다. 그래서 기본 이름은 demunWhite 입니다. 1. 화이트 테마, 블랙 테마. 이 스킨은 애초에 기획단계부터 다른 테마와 같이 사용할것을 전제로 만들어졌습니다. 기본 테마는 화이트테마로 만들어졌지만 어두운 색을 좋아하는 사람을 위해 블랙테마도 적용할 수 있습니다. 이 또한 스타일을 덮어쓰는 형식을 취했으..