demun(대문블로그)

퍼블리셔/css2012. 8. 2. 06:00

이미지를 가지고 transition 을 하는 방법이 있어 소개합니다. 마우스를 갖다대었을때 이미지가 변경이 되는 트랜지션을 알려드립니다. 먼저 앞에 보이는 이미지나 숫자가 있고(front), 뒤에 보이는 배경이(back) 있습니다. 처음에는 앞에 보이는 이미지가 보이고 마우스를 갖다 대었을때 뒤에 보이는 이미지가 보이는 형식입니다. 블로그에서 직접 시현하면서 보여드릴려고 클래스가 좀 복잡합니다. 이해해주시고 어떻에 적용되어지는지에 관심을 맞쳐서 보시기 바랍니다. 결과물이 어떤지 먼저 동영상을 보시고 글을 읽어주세요. 여기서는 -webkit 을 사용했습니다. 크로스 브라우징 코드를 만들어주는 사이트를 참고하세요. http://demun.tistory.com/2172 먼저 소스는 아래와 같습니다. 1 그럼 ..

티스토리/스킨변경제작이력2012. 8. 2. 00:11

현재 제 블로그에 부트스트랩 버젼 3이 적용되어 있습니다. 여러가지 기능이 테스트 겸해서 끼워 넣었습니다. 여러분들이 제 블로그에 있는 기능들에 대해서 이것 저것 보시고 필요없는 부분과 꼭 필요하다고 생각되는 부분을 알려주시면 고맙겠습니다. 그러면 제가 배포할때 그 부분을 반영해서 배포하도록 하겠습니다. 기능에 대해서 논할 부분은 아래와 같습니다. 1. 사이드바 축소기능. 클릭하면 좁히고, 넓히고 하는 기능입니다. 2. 상단메뉴에서 배경 변경하는 기능. 3. 상단메뉴에서 위젯 테마 변경 기능. 4. 미디어 갤러리에서 이미지 슬라이더 기능. 5. 미디어 캘러리에서 골라보는 이미지 갤러리. 6. 사이드바 토글 기능. 이것도 해당이 될까 생각이 드는데...일단 적어봅니다. 여러분이 어떻게 생각하는지. 사이드바..

티스토리/스킨변경제작이력2012. 8. 1. 22:38

이전에 제가 블로그 메뉴와 카테고리를 메인메뉴 형식으로 사용하는 방법을 적은 적이 있습니다. 이번에 제가 부트스트랩 스킨에 블로그메뉴와 카테고리메뉴를 메인메뉴로 사용하고 상단에 배치되었던 탑메뉴를 약간 수정했습니다. 레이아웃이 이상하게 보인다면 새로고침을 한번 해주세요. 수정이 이뤄진점은 아래와 같습니다. 부트스트랩에서 지원하는 빵부스러기....현재 위치를 말하죠. 그 부분이 한줄 전체를 차지했는데, 블로그메뉴와 카테고리메뉴가 들어가면서 3가지 메뉴를 전부 한줄로 표시했습니다. 하위 메뉴는 전부 드롭다운으로 구성했구요. 제가 비밀카테로리로 비공개 메뉴를 사용하는데 그것은 감추었습니다. 아래 이미지를 참고하시기 바랍니다. 현재 위치(beadcrumb)는 제일 왼쪽으로, 블로그메뉴는 그다음으로, 우측으로는 ..

퍼블리셔/도구2012. 8. 1. 06:00

글쓰는 현재의 시점에 각 브라우져별로 접두사를 사용합니다. -webkit, -moz, -ms, -o 등등이 있지요. 오늘 소개하는 사이트는 http://prefixr.com/ 입니다. 이 사이트는 하나의 코드를 넣으면 각 브라우져의 접두사를 알아서 넣어 만들어줍니다. 옵션으로는 줄바꿈을 추가한다든가, 코드를 압축하는 등의 옵션이 있고, 각 브라우져의 접두사를 제외할 것인지를 선택할 수 있습니다. 간단하게 사용법을 알려드리겠습니다. 접속하면 코드가 있는데 모두 지우고 내가 만든 코드를 넣습니다. 줄바꿈도 안되고 띄어쓰기도 안된 그냥 예제 코드를 하나 넣어보겠습니다. 아래 Prefixize 를 클릭합니다. 이런식으로 이 prefixr.com 은 각 브라우져에 맞게 접두사를 알아서 넣어줍니다. 하나의 스타일만..

티스토리/티스토리초대장2012. 7. 29. 07:30

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

일상/스포츠2012. 7. 28. 20:02

우리의 관심은 아마도 지금은 많은 국민이 수영의 박태환 경기를 보고 있었을 것이다. 저 또한 박태환의 경기를 라이브로 보았습니다. 마지막에 박태환이 슬슬 가동을 하더니 우리의 기대를 저버리지 않고 1등을 했습니다. 그런데 문제는 지금부터 입니다. 순위에서 1등에 박태환의 이름이 없는것입니다. 맨 아래줄에 실결처리로 나옵니다. 아~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 무슨 실격인가? 처음부터 끝까지 보았습니다. 그리고 잠시 후 리와인드해서 출발 당시를 다시 보여줬습니다. 움직임은 거의 동시에 이루어졌습니다. 약간 박태환이 빠른듯한 움직임이 있었지만 그건 소리를 듣고 움직인것인지, 듣지 않고 미리 움직인 것인지 우리로써는 알 수가 없습니다. 여하튼 일반인이..

퍼블리셔/기술2012. 7. 28. 06:00

K-WAH 4.0이란? K-WAH 4.0은 한국형 웹 콘텐츠 접근성 지침 2.0에 따라 웹사이트(웹페이지)가 접근성 지침의 6개 세부지침을 준수하는지를 자동 점검하도록 지원해 주는 소프트웨어입니다. K-WAH 4.0에서 자동 점검하는 6개 세부 지침은 다음과 같습니다. 1. 대체텍스트 제공 2. 제목제공 3. 기본언어 명시 4. 사용자 요구에 따른 새창 열기 5. 레이블 제공 6. 마크업 오류 방지 K-WAH 4.0을 이용하여 웹 사이트의 접근성 준수 여부를 점검하고 오류를 수정하는 과정을 통해서 장애인들의 접근이 용이한 웹사이트를 만들 수 있도록 도와줍니다. 이 소프트웨어 프로그램은 한국정보화진흥원에서 제작하였습니다. 다운로드는 웹접근성 연구소에서 하면 됩니다. http://www.wah.or.kr/A..

퍼블리셔/도구2012. 7. 27. 14:11

대부분 css 나 javascript 는 압축을 많이 합니다. 하지만 압축된것을 다시 보기 좋게 정렬하는것은 흔치 않더군요. 그래서 이번에는 압축되거나 엉클어진 코드를 보기 좋게 정렬 시키는 도구를 소개합니다. 1 cssAlign 이전에도 한번 언급한 적이 있는데요. css 를 주석이 있거나, 없거나, 줄바꿈을 하거나 하는등의 옵션을 지정해서 코드를 정렬할 수 있습니다. 저도 자주 사용하곤 합니다. 홈페이지 => http://www.clearboth.org/util/cssAlign.html 2 CSS Beautify 이 사이트는 영어로 되어 잇지만 사용하는데는 무리가 없어 보입니다. 엉클어진 코드를 넣고 우측을 클릭하면 자동으로 코드를 정렬시킵니다. 코드를 넣어봤습니다. 자동으로 정렬하네요.... 위 화..

티스토리/스킨배포2012. 7. 26. 06:00

부트스트랩 스킨 버젼 3 입니다. 이번 스킨에서는 기능에 대해서 좀 추가를 많이 했습니다. 변경된 점과 추가된 기능에 대해서 소개합니다. 아무래도 조금 더 다듬으면 좋은 스킨이 될것 같습니다. html 마크업 - Fluid grid system 이번에는 격자 시스템 중에서 꽉찬 화면인 Fluid grid system 을 사용했습니다. 기존과 다른점은 아무래도 클래스에 fluid 가 붙는다는 겁니다. 좀 더 다듬어야 할 부분은 화면이 줄었을때를 대비해서 미디어쿼리를 작성해야 하는데..... 티스토리는 모바일 화면을 독점으로 사용하니...따로 작성할 필요가 없습니다. html5 에 맞게 section 같은 추가된 태그를 사용해야 하는데....안햇습니다. 아래 이미지는 평상시 모습입니다. 사이즈를 줄이면 해더..

일상2012. 7. 24. 00:54

오늘 힐링 캠프에 안철수가 나온다고 해서 보았습니다. 이하 안철수씨를 안철수라 간단하게 말합니다. 갑자기 어느날 안철수가 서울 시장이니, 대권출마니 말들이 많았습니다. 안철수를 알고 있는 분들은 뜻밖에 소식에 아마 많이들 당황했을겁니다. 저또한 그랬거든요.... 왜냐면 정치하고는 아주 먼곳에 있는 사람이였기 때문이였습니다. 그는 젊은 사람이라면 다 알정도 유명한 아니 올바른 사람이고, 매사에 최선을 다하는 사람으로 알려져 있기 때문이죠. '그' 라면 아마도 잘 할수 있지 않을까....그런 생각을 했을겁니다. 이런 뉴스 기사가 계속 나오고 있는 와중에...안철수는 이렇다...저렇다 아무 말이 없었습니다. 예전에 안철수가 방송에 나와서 한 이야기중에 이런 이야기가 있었습니다. 안철수가 백신을 만들때.... ..