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는 다시 왼쪽정렬을 해주어야 한다는 점입니다. 질문에 대한 답으로 사진을 올렸었습니다. 참고하세요. 이렇게 말로 하면 이해가 안되니 우선 코드를 보면서 문제를 풀어보도록 하겠습니다. 코드로 보면 아래와 같습니다. 로고부분 네비게이션 부분 즉 해더안에 로고부분을 왼쪽으로 네비게이션 부분을 오른쪽으로 사용한다는 것..

퍼블리셔/jQuery2010. 12. 25. 06:00

얼마나 잘 만든 브라우져이길래 IE6은 png 이미지 파일을 회색으로 보이게 할까요.ㅎㅎㅎㅎ 많은 사람들이 ie 6을 사용하기에 이점을 무시할수는 없습니다. ie6의 경우 아예 렌더링 엔진 자체가 없습니다. ie7이 되서야 Triden 엔진을 사용합니다.고로 ie6에서는 png 이미지 파일을 회색배경으로 보이게 하는 버그가 있습니다. 이 문제를 해결하기 위해 많은 자바스크립트 파일이 존재하는것으로 알고 있습니다. 그중에서 제가 사용해본결과 가장 좋은넘을 소개합니다. 바로 DD_lelatedPNG 입니다. 다른것은 background-position을 이용하지 못하는 등 제약이 있지만 이는 그런 제약도 없습니다. 물론 다 되는것은 아닙니다만 많이 사용하는것중에 전 이것이 제일 나아보입니다. 사용법 DD_l..

퍼블리셔/javascript2010. 10. 29. 06:00

이메일을 다는 방법은 여러가지가 있는걸로 알고 있습니다. 웹서비스를 이용해서 구독버튼을 블로그에 달기도 합니다. 그중에 피드버너를 이용해서 블로그에 구독버튼을 달기도 합니다. 피드버너를 이용하는 방법은 별군님이 잘 설명해주셨으니 참고하시기 바랍니다. 별군님의 피드버너 이메일 이용하기 또한 이메일을 간단하게 이미지로 만들어 주기도 합니다. 검색만 하면 다 나오는 정보인데 링크하나 올립니다.워낙 유명한 곳이니까요. 이메일 이미지로 만들기 링크1 링크2 블로그에 이메일 이미지 달기 제가 소개하는것은 다른것을 이용하지 않고 자바스크립트로 컴에 설치한 아웃룩을 이용하는겁니다. 제 블로그에 보시면 RSS 옆에 우체통 이미지가 하나 있습니다. 클릭해보세요. 우선 이미지로 하는것을 예로 들겠습니다. 그럼 이미지가 필요..

퍼블리셔/기술2010. 10. 10. 20:12

이번에 업데이트된 syntaxHighlighter 을 사용해봤으나 시간만 잡아먹는다....다른 분들은 잘되는거 같은데...왜 나만 안되는지 모르겠다. 업데이트 이유는 아래와 같다. 티스토리 에디터에서 html 에 체크를 하고 코드를 입력하면 자기 맘대로 소문자가 대문자로 바뀐다. 즉 라고 입력했는데 이런식으로 나온다. a 링크도 마찬가지다 분면 이러면 설치는 끝이다. 하지만 문제는 티스토리 치환자이다.스킨관련 글을 많이 쓰기때문에 이부분을 해결해야 하는데 왜 안되는지 모르겠다. 이미지에 마우스를 갖다대면 이미지가 자세히 보입니다. 이 부분을 해결하려면 코드를 수정하면 된다고 한다. 제가 질문을 드렸지요. 질문글보기 하지만 해결되지 않았다. 링크를 타고 다른분께 질문도 해보았다. 해결방법은 자바스크립트 코..

퍼블리셔/css2010. 10. 9. 08:45

며칠전에 이미지에 그림자 효과를 주었습니다. 글을 작성하고도 시간이 없어 발행을 못하네요^^ 그런데 더 지나 좋은 효과를 봐서 따라해 봤습니다. 마우스를 갖다대면 이미지가 커지는 형식이죠. 제블로그에서 이미지에 마우스를 갖다 대어보세요. 어떤 효과가 나는지??? 아무런 효과가 나타나지 않는다면 당신은 익스플로러??? 크롬이나 오페라, 사파리는 정상작동합니다. 각 브라우져마다 어떻게 보여지는지 동영상으로 담아봤습니다. 이미지가 흐려서 안보이시면 원본을 보세요. 여기입니다. 어떤가요 재대로 보이시나요? 예제로 이미지를 하나 삽입해보겠습니다. 마우스를 갖다 대어보세요. 현재 탈렌트 김지수씨가 뺑소니 혐의로 실시간 검색어 순위에 올랐군요. 그래서 김지수 사진을 한장 올려보겠습니다. 마우스를 올려보세요. 이미지가..

퍼블리셔/css2010. 7. 27. 07:33

어떨때 id 에 배경을 주면 배경색이 지정이 안될때가 있습니다. 스타일을 지정할때는 앞뒤 안보고 막 지정을 하다보니 그냥 넘어가곤 했는데요. 이유를 찾아봤더니 다 이유가 있더군요.ㅎㅎㅎ 무슨말이냐??? 예를들어 아래와 같이 마크업을 했을경우. ... ... ... 이럴경우 일반적으로 ul 은 float 로 가로 정렬을 합니다. test 에 배경색을 지정할때 float 된 ul 만을 가지고 있을경우 높이가 0 이기 때문에 배경색이 적용이 안된것처럼 보입니다. 이럴경우 overflow로 해결을 해야합니다. 즉 예를들면 아래와 같습니다. #test1{ background:#ddd; overflow:auto; } 위와같이 하면 배경색이 지정이 되는것을 볼수 있습니다. 물론 다른 방법으로 해결을 할수도 있지만 o..

퍼블리셔/css2010. 7. 23. 06:00

CSS3는 HTML5와 더불어 최신 웹 브라우저들이 함께 채용하고 있는 스타일 표준입니다. CSS3는 HTML5와 크게 관계 있는 부분은 없지만 현대적 웹 기술에 있어서 꼭 알아야할 웹 기술 요소입니다. CSS3는 현재 표준작업중이고 선택자에 대한 부분은 거의 완료되었다고 합니다. 실전 HTML5 가이드에 보면 많은 실전 가이드가 나오는데요. 그중에 이왕이면 많은 브라우져가 지원하고, 간단하게 스킨에 적용할수있는거 몇가지만 테스트격으로 한번 적용해봤습니다. HTML5와 CSS3에 보면 정말 다양한 속성들이 있는데요......조금 다른 이야기지만 이전에 포터블 브라우져를 만들때 플러그인을 따로 제작하거나 적용해서 제작하곤 했는데요. html5와 css3만 지원된다면 어지간한 플러그인은 필요없을 정도로 대단..

퍼블리셔/기술2010. 7. 15. 22:23

이전에 W3C를 통과하지 못했다고 포스팅을 했는데요. UO런치패드님이 CCL에 대해서 말씀해주셔서 해제하고 해보니 되는구요. http://demun.tistory.com/1718#comment4931093 어설픈 자바스크립트때문에 W3C 를 통과하지 못했는데요. HTML 과 CSS 모두 통과를 하였습니다. UO런치패드님 감사합니다. 스킨에 대한 테스트 주소는 http://necom.tistory.com/ 입니다. 기분좋은 이미지를 보시죠^^; 아래의 마크도 포함해서 만들까요^^; uo런치패드님 글에도 있지만 w3c에 통과하려면 본문에 삽입되는 링크를 티스토리에서 자동으로 대문자로 수정을 합니다.