demun(대문블로그)

퍼블리셔/기술2010. 7. 13. 22:45

요즘에는 회사일로 무척 바뻐서 조금씩 조금씩 손을 대고 있습니다. 현재 제 블로그에 적용한 스킨을 웹표준에 맞추어서 수정중에 있습니다. css는 완전 통과하였지만 역시 html은 티스토리에 자동으로 삽입되는 자바스크립트 때문에 w3c를 통과하지 못하는군요. html 에서 딱하나 걸립니다...ㅎㅎㅎㅎ 자세한 내용은 아래글에서 확인하세요. css 는 완전 통과했습니다. 적용된 css 결과보기 하지만 html 은 티스토리에 자동으로 삽입되는 자바스크립트 때문에 딱 하나 오류가 잡히는군요. 적용된 html 결과보기 수정한점. 이번에 제가 사용하면서 사이드바에 링크프라이스나 이웃배너를 삽입하기에 용이하게 너비 150px를 사용할수 있도록 했습니다. 그대서 사이드바를 둘로 나누었지요. 또하나 큰 사이드바에 있던 메..

퍼블리셔/기술2010. 7. 10. 21:43

스킨제작에 열을 올리면서 웹표준에 관심을 갖고 서서이 접근을 하는 중입니다. 맨처음에는 그냥 멋진 디자인만 보면 제작하고 싶어졌는데....이제는 되도록이면 웹표준에 맞는 코딩을 하려고 합니다. 멋진 디자인을 보고 만들어도 웹표준에 어긋나면....이건 좀 그렇습니다. 이왕이면 웹표준에 맞고 좋은 스킨을 만들어야 좋은데....개인적인 바램^^; 근데..... 문제는 티스토리가 w3c를 통과를 하느냐입니다....뭐 아는것이 있어야 해결을 하는데....누가 좀 알려주세요... 유효성검사를 할때 사이트주소로 적용하면 열이면 여덟은 오류를 뿜어냅니다. 그래서 직접 올리기를 통해서 html 과 css 를 분리해서 검사를 한번 해봤습니다. 한국어로도 검사를 할수있습니다. W3C를 한국어로도 검사를 할수 있습니다. ht..

퍼블리셔/html2010. 6. 27. 06:00

블로그에서 상.하단으로 쉽게 이동하는 법은 몇가지 있습니다. 간단하게 떠블클릭으로 가는 방법, 현재 제가 사용하고 있는 자동스크롤하는 방법, 그리고 위로이동 단추를 만드는 방법..... 여러가지 다양한 방법이 있지요. 하지만 이번에는 원하는 위치에 딱딱 떨어지는 앵커를 이용하는 방법을 알려드리겠습니다. anchor 앵커는 우리가 흔이 알고있는 책갈피의 기능과 비슷합니다. 맨위에 책갈피를 표시해두고 블로그하단에 "위로이동" 이라고 적어놓고 클릭하면 맨위로 올라가는 기능이죠. 앵커는 대략 아래와 같은 형식입니다. 위로이동 대략 이런식입니다. 더군다나 a 링크에 class나 id 를 지정해서 스타일을 적용합니다. 대략 아래와 같은 모습으로요. 저의경우 top는 해더부분의 로고부분에 표시를 해두었고 아래를 표시..

퍼블리셔/jQuery2010. 6. 22. 06:00

이전에 알려드린 수평메뉴바는 자바스크립트를 이용합니다. 하지만 이번에 소개하는 수평메뉴는 제가 현재 달고 있는메뉴인데요. ie6도 지원합니다. 지금 제가 이것 저것 만지면서 손을 잘못 본거 같은데요. 다른거와 다른게 이건 좀 햇깔립니다^^; 해보시면 압니다.ㅎㅎㅎㅎ 다른 좋은것들도 있습니다. 우선 데모화면을 우선 보시고 그중에 적용하고 싶은것이 있으면 적용하세요. 미리보기 => http://www.lwis.net/free-css-drop-down-menu/ 스샷추가 제가 대략보니 그중에서 MTV 에서 사용하는 수평메뉴가 가장 나은거 같습니다. 현재 그걸 적용해보겠습니다. 간단하게 적용하는 방법을 알려드리겠습니다. 우선 익스플로러도 적용을 하려면 jquery 파일도 같이 사용해야합니다. 아래의 파일을 다운..

퍼블리셔/javascript2010. 6. 20. 06:00

탭메뉴를 잘만 활용하면 디자인적으로나 공간적으로도 꽤 좋습니다. 관심이 있어 여기저기 찾아서 좋은것 있으면 적용을 시켜봤지만 곧잘 충돌을 일으켜 안되곤 합니다. 아무리 좋은것도 어떤 한 브라우져에서 안되거나하면 적용하기 좀 그렇죠. 가장 심플하고 간단한것이 여러모로 사용하기도 좋고, 호환성도 좋은거 같습니다. 인터넷 검색중에 좋다고 판단되어지는것은 전부 티스토리에 적용하면 잘 안되곤합니다.특히나 치환자부분. 더군다나 저의경우 코드하이라이팅하는 js와 메뉴바에 사용하는 js 등과 충돌이 있어서 잘 안되곤 했지요. 블로그에 탭메뉴를 서식으로 저장해놓고 사용하면 아주 좋습니다. 제가 사용하는것은 왠만한 브라우져에 모두 호환이 되는것입니다. 확인해봤으니까요. 블로그에 글을 쓰다보면 하단에 관련 링크들을 많이 달..

퍼블리셔/javascript2010. 6. 19. 06:00

참 사람이 간사합니다^^; 엄청 귀찮아지거든요. 서있으면 앉고싶고, 앉으면 눕고 싶다고 하더니....ㅎㅎㅎㅎ. 이전에 떠블클릭으로 페이지 상하단으로 이동하는걸 포스팅 한적이있습니다. 이건 속도가 엄청 빠르죠^^ 상.하단 이동 스크립트 =>http://demun.tistory.com/195 또 마우스를 하단으로 조금만 내리면 위로 버튼이 자동으로 생성되는걸 포스팅 한적이 있습니다. 위로 이동 버튼 달기 => http://demun.tistory.com/1664 이제는 더 간단하고 좋은 이동 버튼을 알려드리겠습니다. 페이지의 중간에 늘 따라다니면서....외관을 해치지도 않고^^; 마우스만 올리면 부드럽게 위로이동하거나 아래로 이동하는 버튼입니다. 적용하는 방법도 무지 쉬우니 한번 적용해보세요. 일단 위로이동..

퍼블리셔/jQuery2010. 6. 11. 06:00

수평메뉴바는 일반적으로 스킨에 나오는 메뉴바 보다도 더욱 활용가치가 있습니다. 저의경우 현재는 카테고리도 메뉴바에 올려넣고, 보여주고 싶은 글도 넣었습니다. 링크는 얼마든지 마음껏 활용하세요. css 를 활용하면 얼마든지 수정도 가능합니다. 여기서는 일일이 수정하는것은 힘드니까 초보자도 사용할수 있도록 코드를 삽입하는것만으로도 사용이 가능하도록 글을 써보겠습니다. 원문은 아래 사이트입니다. 다양한것이 있으니 참고하시기 바랍니다. 원문출처 : http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/ 수직메뉴는 아래글 참고. 멀티 드롭다운 메뉴 달기(Vertical CSS Menus) => http://demun.tist..

퍼블리셔/css2010. 6. 8. 06:00

일반적으로 알려진 속성값은 어디에서든지 쉽게 접하기 때문에 실수가 없지만 간혹 잘 알려지지 않는 값들이 있습니다. 이 값을 그냥 지나치기에 스킨수정이나 레이아웃등을 바로 잡기 힘들때가 있습니다. 그런 것들을 모아봤습니다. 이번 시간에는 마진병합입니다. 1. 마진 - margin 마진은 한 요소에서 외부의 여백을 말합니다. 여기서 외부란 요소의 테두리(border)를 경계로 바깥을 말합니다. 흔히들 외부 여백을 주기위해 마진을 사용하곤 합니다. 여기서 우리가 알아두어야 할것은 바로 마진 병합입니다. 블록 속성을 가진 요소들 사이에 수직상의 마진을 가지고 서로 만나는 경우, 이웃한 수직 마진 사이에 병합이 발생합니다. 이때 병합이란 투명한 마진들 사이에 가장 큰 값에 흡수되듯 다른 작은 마진 값들은 무시됩니..

퍼블리셔/jQuery2010. 6. 7. 06:00

블로그를 하다가 스크롤을 하고 다시 올라갈려면 스크롤을 다시 해야지요. 이럴때 간단하게 위로 이동버튼이 있으면 아주 좋습니다. 이전에 네임앵커라고해서 달아서 사용해봤는데 모든 브라우져에 호완이 되어야하는데 그렇지만도 않은거 같습니다. 그리고 html 과 장소에 따라서는 css 도 수정을 해줘야하지요. 하지만 이번에 소개하는것은 간단이 업로드와 한두줄의 html 추가로 간단이 위로 이동 버튼을 달수 있습니다. 현재 제가 사용해보니 괜찮은거 같아 소개합니다. 자 그럼 시작합니다. html 추가. html 편집창에서 사이에 아래코드를 삽입하세요. 그런다음 아래의 이미지와 js파일을 다운로드해서 이름을 수정하지 말고 그대로 파일업로드를 해주세요. 1차 끝 ~~~~~ 현재는 제가 업로드를 해놨기 때문에 사실 js..

퍼블리셔/도구2010. 6. 5. 06:00

우선 설치하기전에 나에게 필요한 파일이 어떤 파일인지 먼저 생각해볼 필요가 있어 보입니다. 예를들어 나는 프로그래밍에 대한 글을 많이 포스팅하니까 모든 코드에 하이라이팅을 해야겠다??? 또는 저처럼 html,css,javascript 정도만 사용한다??? 이런식으로 한번 생각해볼 필요가 있습니다. 설치하기 왜냐면 필요도 없는 파일을 전부 업로드하고 링크해서 사용할필요는 없다는거죠. 속도만 느릴뿐..... 지원하는 파일과 코드를 한번 비교해보세요. brush 에 대한 자세한 내용은 여기에도 있습니다. 참고, Brush 목록 분류사용가능 brush명 필요 파일 Bash/shell bash, shell shBrushBash.js C# c-sharp, csharp shBrushCSharp.js C++ cpp, ..