demun(대문블로그)

퍼블리셔/도구2011. 2. 20. 06:00

디자인을 하거나 스킨을 만지작거리다보면 색상에대해서 코드나 좀더 자세한 색이 필요할때가 많습니다. 그럴때마다 인터넷을 디지거나 잘가던 사이트를 가곤하는데요. 이제 4개의 좋은 사이트를 알려드릴테니 참고하시기 바랍니다. 아래의 링크를 클릭하시면 사이트로 이동합니다. 사이트의 스샷을 첨부합니다. ColorExplorer ColorSchemer kuler Color Scheme Designer ColorExplorer 색상을 비교할수 있는 Color Matching 가 쓸만한것 같네요. 스샷을 보시고 이것 저것 클릭하시다보면 이것이 무엇인지 아실겁니다. ColorSchemer kuler Color Scheme Designer

퍼블리셔/css2011. 2. 19. 14:36

float 는 띄우다라는 뜻입니다. 왼쪽으로 정렬, 오른쪽으로 정렬 , 아니면 none. 이런식으로 블럭을 왼쪽이나 오른쪽으로 정렬할때 사용합니다. 이와 비슷하게 position 속성도 있는데요. 이번에는 float 에 대해서 알아보고 IE 는 버그가 있어 다르게 나오는데 이또한 해결법을 알아봅니다. 그럼 속성은 어떻게 되고 어떻게 사용할까요? 아주 간단합니다. 아래처럼 사용합니다. float:left; /* 왼쪽으로 정렬 */ float:right; /*오른쪽으로 정렬 */ float:none; /* float 영향을 받지 않음 */ 이처럼 사용법은 무척간단합니다. 그럼 어떨때 사용할까요? 예를들어 아래처럼 블럭이 있다고 가정합니다. text_box1 text_box2 text_box3 text_box..

퍼블리셔/css2011. 2. 18. 12:15

이글은 어느 분이 질문으로 하신글에 대한 답변 성격이 강합니다. 질문의 요지의 아래와 같습니다. 하나의 div 안에 두개의 div가 존재하고 그중하나는 왼쪽으로 정렬하고 나머지 하나는 오른쪽으로 정렬하는것입니다. 왼쪽으로 정렬하는것은 logo 부분이되고 오른쪽으로 정렬하는 것은 blogMenu 부분이 됩니다. 여기서 logo는 왼쪽으로 blogMenu 부분은 오른쪽으로하고 blogMenu 에서 li는 다시 왼쪽정렬을 해주어야 한다는 점입니다. 질문에 대한 답으로 사진을 올렸었습니다. 참고하세요. 이렇게 말로 하면 이해가 안되니 우선 코드를 보면서 문제를 풀어보도록 하겠습니다. 코드로 보면 아래와 같습니다. 로고부분 네비게이션 부분 즉 해더안에 로고부분을 왼쪽으로 네비게이션 부분을 오른쪽으로 사용한다는 것..

Design2011. 2. 13. 18:38

구글 api 를 사용하면 블로그에 있는 글꼴을 동일하게 보일수 있습니다. 현재 저도 하나 사용하고 있는데요. 현재 제 블로그에는 네이버글꼴과 구글글꼴 총 두개를 api 로 사용하고 있습니다. 구글 웹폰트 보기 => http://code.google.com/webfonts 이중에 이쁜놈을 하나 골라서 사용해보세요. 제가 사용하는것은 arimo 라는 웹폰트입니다. 아래 파랑색배경에 보이는것입니다. 사용하는 방법. 사용하는 방법은 위그림처럼 원하는 글꼴을 클릭하세요. 그럼 아래처럼 미리보기를 통해 미리볼수 있습니다. 좀더 상세한 설정을 위해 Launch in font previewer 를 클릭합니다. 그럼 아래처럼 상세한 설정을 할수 잇고 바로 반영이 됩니다. 위의 주소를 스킨편집에서 사이에 넣습니다. 그리고..

일상2011. 2. 12. 15:05

이번스킨은 꽤 오랜기간이 걸렸습니다. 잘 만들지도 못했는데....시간이 꽤 걸렸네요. 이번스킨의 중점은 모든 이미지를 하나의 이미지에 넣는데 주력했습니다. 이미지 로딩시간을 줄이기 위한거죠. 확장자도 png로 하되 png-8 로 했습니다. 이미지에 관련해서는 시간나는대로 다시 설명해드리겠습니다. 배경에 사실 중점을 둬서 좀 고급스러운 느낌을 낼려고했는데..... 하나 하나 하다보니 점점 이상한곳으로 가는것도 같네요. 우선 검색부분이 ie에서는 안됩니다. 이것이 왜 안되는지는 저도 모르겠습니다. 다른 블라우져에서는 되는데....해결해야할 점으로 보입니다. 이번 스킨의 너비는 본문이 730px 로 구글 배너 광고를 넣을수 있도록 햇고 그만큼 사이드바는 줄었습니다. 1024의 사이즈에도 스크롤바가 생기지 않도..

일상2011. 2. 7. 02:19

이번에는 사실 많은 jquery 기능을 넣으려고 했으나 많이 넣지 못했습니다. 우선 접근성을 해친다는 점이고, 두번째는 멀티브라우징이 안되는것이 정말 많았습니다. 기능을 적용해보고 테스트해본것만 해도 대략 50여가지가 될겁니다. 둘러본것만 해도 인터넷상에 있는 jquery 플러그인 기능은 거의 다 보았다고해도 과언이 아닐정도입니다. 대략 테스트해보니 멀티브라우징이 되는 기능만을 넣엇구요. 거의 이상없이 보여졌습니다. 약간 상이한점도 있고 좀만 더 다듬으면 될것같아요. 요근래 디자인의 특성을 보면 큼지막한 이미지들이 많이 있습니다. 즉 여백의 중요함이죠. 단순하면서도 여백을 살리고 이미지들이 큼지막해서 보기에도 좋은 디자인이 좋은 디장인이라고들 하는군요. 전 따라할려고 해도 감각이 딸리는군요. 현재 손보고..

일상2011. 1. 31. 22:19

방법에 대한 포스팅이 아니라 그냥 제목을 이렇게 정했습니다. 블로그를 하면서 새창열기와 현재창열기를 자동으로 표시되게 하고 싶었습니다. 이전에 도아님이 바깥고리에 대한 글을 쓰시면서 플러그인을 만들었는데 텍스트큐브만 되어서 사실 많이 부러웠습니다. 도아님 바깥고리 글 보기 이와 비슷하게 티스토리에서도 css로 바깥고리를 지정하는 법도 있긴하지만 완전하지는 않습니다. 본문에 링크를 바깥고리로 표시나게 하려면 .article a 에 배경을 지정하면 됩니다. 헌데 티스토리에서는 카테고리 글 더보기 라든가 이미지에도 배경이 같이 지정이 됩니다. 왜냐면 본문치환자 안에 a 링크에 해당이 되기 때문에 같이 지정이 되는거죠. 하지만 이도 css 선택자( .article a[href*=title] )를 이용해서 하면 ..

일상2011. 1. 23. 12:58

이전부터 jquery 를 활용한 동적인 블로그를 만들고 싶었는데 몰라서 못했지요. 남의것을 갖다 쓰는데 그것도 엄청난 노가다를 한후에 한두개 적용을 하곤 했지요. 그래서 자바스크립트와 jquery 를 공부를 했는데...그래도 잘 모르겠네요. 여하튼 블로그스킨을 약간 변경하면서 jquery 로 이것 저것 해보았습니다. 역시나 모든 브라우져에서 되도록 똑같이 보여지는것이 제 목표이기도 하지요. 이것 저것해서 좀 난잡한 감이 없지않지만 역시 해봐야 되는지 안되는지 알수가 있습니다. 일단 한것의 내용은 이렇습니다. more 버튼. 이미지를 이용해서 불필요한곳을 평상시에는 안보이게하고 클릭하면 보이게 하는것. 클릭하시면 알겁니다. 링크 흔들기. 사이드바의 링크가 이상하게 ie 7에서 정상적으로 안보입니다. 그래서..

일상2011. 1. 19. 19:58

티스토리 스킨을 제작하고 배포하면서 미리보기를 보여줄때가 있습니다. 현재 제 스킨을 적용하고 계신분은 댓글을 남겨주시면 아래처럼 링크를 추가해 드리겠습니다. 다른 분들한테 본보기가 될것 같습니다. 미리보기도 되고 적용한후 어떤식으로도 변할수 있는지 참고가 됩니다. 링크를 타고 가면 방문자수가 많아지면 많아지지 적어지지는 않을겁니다. 간접홍보가 되겠지요^^ 누이좋고 매부좋고 입니다. 대문 스킨을 적용하신분 댓글을 달아주세요. 버젼에 상관없습니다. 링크를 계속 추가됩니다.

티스토리/티스토리초대장2011. 1. 19. 19:46

티스토리 초대장을 배포합니다. 이왕이면 블로그를 해보신분이면 좋겟군요. 그리고 블로깅을 할 열의가 잇으시면 좋겟어요. 제목에 마감이라고 적히면 더이상 댓글을 달지마세요. 그건 초대장이 없는겁니다. 제목에 마감이라는 단어가 없으면 초대장이 있는겁니다. 블로그가 하나가 아니기때문에 초대장이 더 있을수 잇습니다. i n v i t a t i o n 티스토리 초대장 + 남은 초대장 수 : 00 안녕하세요! 티스토리에 보금자리를 마련하시려는 여러분께 초대장을 배포해 드리려고 합니다. 나만의, 내 생각을, 내 기억을 담는 소중한 블로그를 만들고 싶다면 티스토리로 시작해보세요! 티스토리 블로그는 초대에 의해서만 가입이 가능합니다. 원하시는 분은 댓글에 E-mail 주소를 남겨주시면 초대장을 보내드립니다. 남겨주실 때..