demun(대문블로그)

퍼블리셔/기술2012. 6. 1. 06:00

제가 서식형태로 리본에 대한 글을 몇번 썻습니다. 이전에 알고 쓴줄 알았는데.... 알고 보니 사용하지 않은것 같아 써봅니다. 이번에는 코드만으로 리본형태를 만드는 과정을 알아보겠습니다. 이 형태는 제가 이전에 만든 스킨에도 많이 적용되었던 디자인인데요. 어떤 형태인지 대략 이미지를 참고하시기 바랍니다. 여기서는 둥근 형태가 아닌 삼각형 형태를 만들어 보겠습니다. 원재는 3D 리본 만들기 입니다. 먼저 제작된 리본 형태는 아래와 같습니다. html 코드는 아래와 같습니다. 3D CSS Ribbon 3D 리본 만들기 바로가기 다음 css 코드는 아래와 같습니다. .bubble { clear: both; margin: 0px auto; width: 350px; background: #fff; -moz-bor..

퍼블리셔/jQuery2012. 5. 31. 06:00

제가 이때까지 사용하는 방법중에서 가장 편하고 맘에 드는 방법입니다. 이전에는 떠블클릭하면 상하단으로 이동하는 방법과 , 스크롤을 밑으로 하면 위로 올라가는 버튼이 생성된다든가 하는 여러가지 방법이 있습니다. 먼저 아래의 링크를 참고하시기 바랍니다. 관련글 스크롤하면 상단으로 올라갈수 있는 버튼 => http://demun.tistory.com/1975 블로그 상하단 이동하기(anchor,앵커) => http://demun.tistory.com/1706 상.하단 부드럽게 이동하기 => http://demun.tistory.com/1695 위로 이동버튼 간단하게 삽입하기 => http://demun.tistory.com/1664 이 방법은 jQuery 를 사용하는 방법으로 코드가 비교적 간단하고 또 다른 ..

티스토리스킨수정/댓글2012. 5. 30. 06:00

간혹 댓글이 엄청 많은 블로거 분들을 봅니다. 저의경우 댓글이 별로 없어서 해당 사항이 없지만 댓글이 많으면 설정에서 댓글 감추기를 설정해놓으면 되지만 보이기를 원하는분이 있을겁니다. 근데 댓글 보이기를 하면 엄청 많은 댓글까지 스크롤을 해서 맨 아래에 있는 댓글창까지 가서 댓글을 쓰기에는 방문자들이 귀찮아 하겟죠. 그럴때는 댓글창을 위로 올리는 방법을 택하면 됩니다. 이건 방문자를 위한 배려입니다. 스킨을 제작할때 저는 그렇게 합니다만 만약 그렇지 않은 스킨을 사용하는 분이라면 변경을 해보세요. 댓글창을 아예 스킨 맨 위로 올릴수도 잇지만 그건 디자인쪽으로 아니라고 봅니다.ㅎㅎㅎ 단지 댓글 리스트와 댓글쓰기창의 위치만 바꿔줘도 댓글이 많은 분들은 좋다고 생각합니다. 방법은 매우 간단합니다. css를 손..

티스토리스킨수정/검색2012. 5. 29. 06:00

티스토리 스킨에는 검색 기능이 있습니다. 많은 블로거분들이 구글 광고를 사용하고 또한 구글 맞춤검색(이하 cse 라고 부릅니다.)을 사용할겁니다. 여기서는 구글 맞춤검색을 사용한다고 가정하고 진행해보겠습니다. 즉 구글 맞춤검색을 생성하는 과정은 아닙니다. 아주 간단하게 티스토리의 검색을 사용하지 않고 구글 cse 를 사용하는 방법을 알아보겠습니다. 일단 티스토리에서 제공하는 검색을 대략 알아보겠습니다. 아래 이미지를 보시면 input 가 두개가 있고, 밑에 확인버튼에 해당하는곳에는 클래스 submit 가 있습니다. 즉 여기서 필요없는 부분은 바로 input 두개입니다. 이 부분을 주석처리합니다. 그럼 아래와 같은 형식이 될겁니다. 만약 사이드바가 아닌 다른곳이라면 아래와 같은 형식입니다. 그럼 구글 cs..

티스토리/스킨변경제작이력2012. 5. 28. 17:09

이전의 GoodFriends 스킨은 다양한 기능을 탑재했습니다. 제가 시험적으로 이것 저것 넣었는데, 과연 티스토리에서도 이런 기능을 지원하는가도 시험해볼꼄 제작하여 적용해봤습니다. 이전에 적용하였던 GoodFriends 스킨은 아래의 동영상을 참고하면 됩니다. 이번에 적용한 스킨은 이전에 적용했던 스킨은 많은 기능을 탑재했다면 이번 스킨은 되도록 가볍게 제작했습니다. 이름하여 demunGray 로 명명하였습니다. 흰색과 회색이 어우러지는 느낌과 스프라이프 느낌을 살려 제작하였으며 이전 스킨의 코드를 많이 재사용하였습니다. 기능적인 것은 많이 제거하고 스타일적인것만 가져온 것입니다. 나중을 위해 스샷 첨부합니다. 이번에는 되도록 깔끔하고 부드러운 느낌을 선택했습니다. 많은 기능과 스타일요소를 제거해서 이..

퍼블리셔/jQuery2012. 5. 28. 06:00

워드프레스 스킨에 주로 포함된 3D 슬라이더(이하 슬라이더라고 부릅니다) 입니다. 워드프레스 스킨에서는 플러그인 형태로 사용할 수도 있습니다. 슬라이더는 여러종류가 있지만 제가 이것 저것 해본결과 가장 잘 보이고 깔끔한것이 xml 을 사용하는 Piecemaker 입니다. 제가 GoodFriends 스킨에 포함해서 사용했던 것이지요. Piecemaker 의 데모 화면을 보시죠. 소개글과 사용방법은 여기에서 볼수 있습니다. 배포하는 슬라이더 파일은 아래에 있습니다. 배포하는 원본 파일입니다. 티스토리에서 사용하는 제 블로그에서 사용하는것을 예로 들어 알려드리겠습니다. 먼저 아래의 파일을 다운로드 하세요. 압축을 해제한후 스킨편집에서 파일업로드를 통해 모두 업로드하세요. 1. piecemaker.xml 수정...

티스토리스킨수정/댓글2012. 5. 24. 13:33

티스토리의 라이브 댓글 방식인 라이브리라는 댓글이 있습니다. jquery를 포함한 방식인데. 여하튼 이 댓글이 티스토리의 댓글과 라이브리 댓글과 같이 보여지는 방식이기 때문에 좀 귀찮은 부분이 있습니다. 방문하는 모든 방문자가 전부 라이브리 댓글을 사용하는것은 아니니 평상시에는 감쳐져있고 클릭을하면 보여지는 형식을 선택했습니다. 티스토리에서는 그런 방식이 없지만 라이브리를 사용하면 jquery 가 자동으로 삽입이 되니 간단한 jquery를 사용하면 됩니다. 자 보여지고 감쳐지는 라이브리 댓글창을 만들어봅시다. 먼저 완성이 되면 어떻게 보여지는지 한번 보겠습니다. 평상시에는 닫쳐있다가 클릭하면 이미지의 색깔이 변하면서 댓글창이 보입니다. 첫번째. 먼저 준비물인 이미지가 있어야겟지요. 아래의 이미지를 스킨편..

티스토리/스킨변경제작이력2012. 5. 22. 21:35

굿프렌즈 스킨을 좀더 다듬고 있습니다. 중요한 포인트 중 하나는 우선 3D 슬라이더가 커서 크기를 줄이고 위치를 잡는데 있어 고민하다가 상단에 블로그 제목부분에 아예 고정을 시켰습니다. 슬라이더를 고정 시키다보니 매번 다른페이지를 볼때마다 나타나는것이 좀 못마땅해서 각각의 페이지마다 다르게 적용을 해봤습니다. 그리고 페이지가 변경될때 블로그 제목과 광고가 슬라이더를 대체합니다. 한가지 공지사항에는 다른 컬러셋을 입혀보았습니다. 눈치 빠른분은 아시겠지만 각각의 컬러셋마다 타이틀에 있는 리본 컬러셋을 어울리도록 변경했습니다. 한시적으로 미리보기 사이트를 열어놓을테니 구경하실분은 해보세요.. 각각의 메뉴를 클릭해봐야 컬러셋을 보실수 있습니다. 일반글, 방명록, 공지사항, 카테고리 등등... 계속 변경중입니다...

티스토리/티스토리초대장2012. 5. 22. 07:47

티스토리 초대장을 배포합니다. 만들고 싶어하는 블로그와 이메일 주소를 댓글로 적어주세요. 비밀글에 체크하고 작성하시기 바랍니다. i n v i t a t i o n 티스토리 초대장 + 남은 초대장 수 : 00 안녕하세요! 티스토리에 보금자리를 마련하시려는 여러분께 초대장을 배포해 드리려고 합니다. 나만의, 내 생각을, 내 기억을 담는 소중한 블로그를 만들고 싶다면 티스토리로 시작해보세요! 티스토리 블로그는 초대에 의해서만 가입이 가능합니다. 원하시는 분은 댓글에 E-mail 주소를 남겨주시면 초대장을 보내드립니다. 남겨주실 때에는 꼭 비밀댓글로 남겨주세요! 초대장을 보내드리고 바로 개설하시지 않으신 분들은 초대장을 회수할 수도 있으니 바로 개설해주세요! Yes 이런 분들께 드립니다! 1. 다른 블로그를 ..

티스토리스킨수정/검색2012. 5. 21. 10:14

검색창을 다는 방법은 이전에 적은것이 있습니다. 아는것을 쉽게 풀어쓴다는것이 정말 힘듭니다. 그와 관련해서 더욱 보강하는 글이 되겠습니다. 이전에는 사이드바에 검색창을 다는 방법이였지만 이글은 사이드바가 아닌곳 특히 상단 제목 있는 부분에 다는 방법입니다. 이는 다른곳에도 적용이 가능합니다. 검색창 사이드바에 다는 방법 => http://demun.tistory.com/1992 주로 스타일을 입히는 방법은 제각각 이므로 좀 제외하고 위치를 잡는 방법을 알아보겠습니다. 일단 목표는 상단의 제목부분을 두개로 나누어서 하나는 기존의 제목을 사용하고 다른 한 공간에 검색창을 다는것입니다. 원하는 사이트이 디자인을 한번 볼까요? 보시다시피 제목 하나만 존재합니다. 그러다보니 두개로 나누어서 우측에 빈공간에 검색창..