메모장 썸네일형 리스트형 CSS3 와 jQuery를 활용한 3D Curtain Template, 커튼효과 사이트 템플릿 3D Curtain Template, 커튼효과 사이트 템플릿 데모를 보시면 좀 다이나믹한 사이트를 제작할 수 있다는 기대감이 들게 되는 템플릿입니다. 소스를 수정해서 응용한다면 꽤 멋진 사이트가 될 것 같네요. 2015.2.2. CSS3를 활용한 롤오버(호버) 효과 라이브러리, HOVER.CSS CSS3를 활용한 롤오버(호버) 효과 라이브러리 - hover.css 일단 위 링크를 보시면 얼마나 유용한 소스인지 아실 겁니다. ^^ 2015.1.29. CSS3 버튼 만들어주는 사이트 (한국어버전), CSSGENERATORS CSS3 버튼 만들어주는 사이트(한국어버전) 사이트에서 CSS3 로 여러가지 효과를 자동으로 스크립트 해주는 사이트는 많습니다. 다만, 한국어 지원은 보기가 힘들었지요. 그런데, 이렇게 한국어로 설명해주는 사이트가 있네요. 스크랩해봅니다. ㅎ 아래 링크를 클릭해서 이동하세욥~! 2014.12.29. [CSS] 텍스트에 특정배경이미지를 마스킹하는 CSS 배경 클립 텍스트 배경 및 그라디언트 h1 { background:url(image_url_here); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 더 자세한 내용은 아래 링크를 클릭하셔서 보세요. 이 CSS 문법의 가장 큰 단점이 하나 있습니다. 바로 웹킷브라우저에서만 작동가능하다는 것~! 아직까지는 익스때문에는 활용되기 어렵겠네요. 하지만, 모바일 전용 사이트라면 충분히 멋진 기법일 것 같습니다. 2014.11.27. 이미지내 지정한 포커스에 따라 이미지사이즈가 변경되는 반응형 jQuery 플러그인 Intelligent cropping for flexible image containers 유연한 이미지 컨테이너 반응형 플러그인 사실 이 기능을 찾기 위해 검색을 한 것은 아니지만, 아주 유요한 플러그인을 우연히 발견하여 이렇게 기록용으로 포스팅합니다. 간략하게 설명하자면, 반응형 사이트에서 사이트내에서 사용하는 이미지가 자동으로 크롭되잖아요. 이때 이미지의 정렬은 보통 left, right, center 인데요. 이 플러그인은 이미지내에 포커스 좌표를 지정하여, 그 포커스를 center로 정렬하는 플러그인입니다. 아래 이미지를 예로 들면, 넓은 창일때의 이미지 좁은 창일때의 이미지 도마뱀의 눈에 포커스를 맞추어 이미지가 반응형으로 크롭된다는 것이지요. 이 기능이 유용한지 안한지에 대해서는 모바일 사이.. 특정 단어를 입력하면 컬러를 추천해주는 사이트, Colores Manugarri 컬러추천 사이트, colores.manugarri.com 사이트에 접속하시면 그냥 검색바만 덜렁 있습니다. 그 곳에 특정 단어를 입력하고 검색을 하게 되면, 그 단어의 검색이미지를 통해 어울릴것 같다는 색상을 추천해줍니다. 그나저나 로딩이 약간 느리네요. 하지만, 충분히 유용하다 생각하기에 메모해 둡니다 ㅎ 2014.11.21. 핀터레스트 Pinterest 가 도대체 왜 유명한거지? ㅎ 디자이너라면? 스크랩을 좋아한다면? 친구에게 들은 핀터레스트~! 너 핀터레스트 하니? 아니 그게 뭔데? 그때는 그냥 흘려 넘겼었었습니다. 뭔지도 몰랐을 뿐더라...관심도 없었기 때문이지요. 하지만, 어느날 한번 해볼까라는 마음으로 접속을 해보았습니다. 어랏? 이 로고 어디서 많이 봤는데? ㅎㅎ 유명한거였네?^^ 이러면서 시작했습니다. 워낙 직관적인 UI이라 그냥 사이트를 보면 사용법을 대충 알수 있습니다. 이 핀터레스트는 미디어SNS의 한 종류입니다. 이미 외국에서는 페이스북, 트위터, 핀터레스트 3대 SNS라고 하네요? ㅎ 그리고, 워낙 많은 정보와 많은 영감을 주는 미디어들... 디자이너들이 자주 시간을 투자할 만한 사이트인 것 같아요. 그렇다고 무단도용은 금물입니다 ㅎ 여튼, 저도 이제 시작해보려합.. [CSS] input submit 버튼의 텍스트에 font awesome 아이콘 사용하기 겁나 유용한 Font Awesome을 사용하다 input submit 타입에서 막혔다 열심히 사이트 작업을 하던 중 이번 포스팅의 제목처럼 input submit 타입에서 막혔다. 말인 즉, input 타입중 submit 타입은 value 로 버튼 안의 텍스트를 제어 하는데... 이 안에 태그를 사용하지 못하기 때문에 곤란해졌었다. 맨처음에는 스트립트로 제어를 하려 했는나...안되기는 마찬가지... 분명히 나와 같은 문제를 겪었던 사람이 있을텐데... 네이버 검색에서는 일단 font Awesome 에 대한 자세한 내용은 없었다. 온통 그냥 font awesome 어떻게 사용하는 지에 대한 포스팅만 많을 뿐...문제점에 대한 포스팅은 없었다. 그래서 구글링으로 넘어갔다...단박에 찾음...구글링의 위대함을.. 육아휴직에 대해서...육아휴직급여신청서, 육아휴직확인서 다운로드 육아휴직에 대해서... 육아휴직급여는 만8세 이하 또는 초등학교 2학년 이하의 자녀를 가진 근로자가 그 자녀를 양육하기 위해 남녀 고용평등과 일 가정 양립 지원에 관한 법률 제 19조에 의한 육아휴직을 30일 이상 부여 받고 소정의 수급요건을 충족하는 경우 매월 통상임금의 100분의 40(상한액 : 월 100만원, 하한액 : 월 50만원)을 지급합니다. ※ 단, 육아휴직 급여액의 일부(100분의 15)를 직장 복귀 6개월 후에 합산하여 일시불로 지급 합니다. 출처 - https://www.ei.go.kr/ei/eih/eg/pb/pbPersonBnef/retrievePb0302Info.do 반응형사이트 제작시 간편하게 그리드 잡는 플러그인(?) Flexible Grid System 2014.11.7. [CSS] 엑시스제이에서 만든 한국형 폰트어썸 Font Awesom, Axicon.axisj.com AXIcon Basket 외국의 Font Awesome 사이트와 비슷하네요. ㅎ 엑시스제이에서 만든 폰트아이콘으로 무료로 제공한다합니다. 2014.11.5. 컬러 팔레트 생성 사이트~유용하네요 ㅎ The super fast color palettes generator 2014.11.3. [CSS] 아이콘(Icon)을 이미지가 아닌 폰트(Font)로 사용하기, Font Awesome The Iconic font and CSS toolkit 예전에는 아이콘이라하면 이미지였는데, 이제는 아이콘이 폰트로 인식하여, 컬러, 자간, 사이즈를 조정이 가능하게 되었네요. 신기하네 ㅋ 사용방법이나 아이콘의 종류는 해당 사이트에 들어가서 확인하고 사용하면 됩니다. 다운로드도 되지만, CDN 방식으로도 사용이 가능해 아주 유용하네요. 2014.11.4. [CSS] 종이가 약간 들린 느낌을 css로만 구현하기 [CSS] 종이가 약간 들린 느낌을 css로만 구현하기 [웹접근성] 온라인 접근성 체험사이트, 널리 Nuli 누구에게나 이용 가능한 웹사이트 개발을 위한 체험 [육아정보] 선택 예방접종(로타바이러스, A형간염, 인유두종 바이러스), 꼭 맞춰야 할까? 선택적 예방접종에 대해서... 아이를 키우면서 필연적으로 공부하게 되는 여러가지 육아정보들~! 그 중 예방접종은 참 쓸데없는 고민을 하게 만듭니다. 특히, '선택 예방접종' 이라는 것 때문에 말입니다. 선택 예방접종의 종류 1. 폐구균 백신 5세 이하가 잘 걸리는 ㅍ렴의 원인균을 예방하는 폐렴구균백신입니다. 폐렴구균은 폐렴, 뇌수막염, 균혈증 등의 심각한 질환을 일으키며 급성 중이염, 부비동염 같은 호흡기 질환도 유발합니다. 만 2, 4, 6개월에 3회 접종하고, 12-15개월에 추가로 접종해 총 회 접종한다. 2. 로타바이러스 백신 로타바이러스 장염은 생후 6-24개월에 가장 잘 걸리는데, 이를 예방하기 위해 맞는 백신입니다. 생활 환경을 청결히 하는 것 만으로는 예방할 수 없으며 다른 장염과는 달리 .. [jQuery] 제이쿼리를 사용한 간단한 그래프 플러그인, jqBarGraph Plugin [jQuery] 제이쿼리를 사용한 간단한 그래프 플러그인, jqBarGraph Plugin 사이트 작업을 하다보면 그래프를 표현해야 할때가 있습니다. 이전에는 그냥 이미지로 대체했었는데, 동적으로 구현하기 위해서는 스크립트 사용이 필수불가결이지요. 여러가지 그래프 플러그인이 있습니다. 모두는 아니지만 그래도 많이 검색해보고 여러가지 플러그인을 테스트를 해보았는데요. 이 플러그인 처럼 심플한 것은 못 봤네요 ㅋ 추천합니다. ㅋ 아래 파일은 여러 버전중 다운받은 js 중 하나입니다. ㅎ [디자인소스] Graphicsbay.com 무료아이콘 다운로드 사이트 Graphicsbay.com 무료아이콘 다운로드 사이트 여러가지 타일 효과 애니메이션을 위한 jQuery 플러그인 여러가지 타일 효과 애니메이션을 위한 jQuery 플러그인 [jQuery] 제이쿼리 jQuery와 prototype.js 충돌 해결법 [jQuery] 제이쿼리 jQuery와 prototype.js 충돌 해결법 사실 jQuery 와 prototype.js 가 충돌나는지도 몰랐었다. 문법에는 오류가 없는데 왜 계속 스크립트 오류가 날까?... 그래서 혹시나 충돌이라고 검색을 해보니 주르륵~~ 인터넷에서 알려주는 해결방법은 이러하다. 해결방법 jquery 라이브러리를 먼저 선언하고 아래 부분 코드를 넣은 뒤 다시 prototype.js를 선언한다 충돌의 원인은 식별자 '$' 같은 방식으로 다른 문법으로 사용하기 때문이다. 중간에 들어간 코드는 이 제이쿼리를 권한을 없애고 다른 변수로 처리를 한 것이다. jq$는 변수니까 입맛에 바꾸어도 된다. 그 다음, 이후에 나오는 제이쿼리 명령어에는 jq$라는 변수를 사용해야 한다. 최종적으로는 제이쿼리.. 움직이는 파티클그라운드 ParticleGround JS Particle Ground A jQuery plugin for snazzy background particle systems 마우스를 따라 움직이는 조그만 점들이 인상적이네요. ㅎ 다음에서 제공하는 모바일기기별 Mobile Device, 해상도별 Resolution 미리보기 서비스, 트로이 Troy 포털사이트 다음에서 제공하는 기기별 미리보기 서비스 다음에서 이 서비스가 나온지는 언제인지는 모르겠으나 저는 꽤나 시간이 지난 후에나 알게 되었습니다.^^; 유용한 것 같아 스크랩 하려고 포스팅합니다. 화면의 왼쪽을 보시면 현재 나와있는 모바일 기기들의 제조사별 해상도가 있으며, 확인하고 싶은 기기를 선택 후 오른쪽 상단에 있는 URL에 웹사이트 주소를 기입하면 됩니다.ㅎ 주의사항은 버그 및 특성은 기기에서 직접보아야 한다는 점~! 해상도 확인 할때는 정말 유용하네요 ㅋ 아마 디자이너들이나 코더들이 좋아할 것 같습니당 ㅎ 또 하나의 Tip http://sunpig.com/martin/code/2012/androidzoom/devicewidth.html 확인하고 싶은 디바이스에서 위 URL를 호출하면 아래.. [CSS] 예쁜 그라데이션 CSS Code를 모아놓은 uiGradients uiGradients 파워포인트 PowerPoint 다중 창(다중창, 창 두개, multiple windows)으로 실행해 띄우는 방법 파워포인트 PowerPoint 다중 창(다중창, 창 두개, multiple windows)으로 실행해 띄우는 방법 제목 그대로 파워포인트 문서 파일을 분리하여 여러개의 창으로 실행시키는 방법입니다. 이미 이 문서를 검색하셔서 들어오셨다면 길다란 설명은 필요없겠지요. 거두절미하고, 바로 말씀드립니다. -> Office 다중실행 파일 -> Office 2007 원본 파일 첨부된 파일을 다운받아 다중 실행 dll 파일을 C:\Program Files (x86)\Microsoft Office\Office12 에 덮어쓰기 하시면 됩니다. 위 경로는 Window가 64bit 일 경우이며, 32bit 일경우에는 C:\Program Files\Microsoft Office\Office12 이렇게 되겠지요 그전에, 혹시.. 구글 웹디자이너 Google Web Designer 의 가능성?? 믿어보자 ㅎ 서비스가 나온지는 꽤 되었네요 몇 일전 우연히 보게된 구글 웹디자이너라는 페이지를 보게 되었습니다. 뭔가 하니...플래시를 사용하지 않고 역동적인 이미지를 만드는 웹툴이라고 생각하시면 될 것같습니다. 기본적으로 반응형으로 코딩이 가능하며, 결과물이 코드로 나오기 때문에 용량도 작네요. 정말 잘 활용한다면 강력한 툴이 될 것 같기는 한데...^^; 왠지 손이 가질 않는 이유는 무엇일까요? 구글이면 믿고 사용할 법도 한데 말이죠. ^^ 그래도 저는 언제가 제대로 활용하는 날이 올꺼라 생각하기에 미리미리 손에 익혀놔야겠습니다. 2014.9.15. [CSS] 가로, 세로 중앙정렬 CSS 완벽가이드 Centering in CSS: A Complete Guide [육아정보] 예방접종 도우미 사이트를 아시나요? 예방접종 도우미 사이트를 소개합니다 https://nip.cdc.go.kr/irgd/index.html 이곳에 접속하셔서 가입하시면 아이의 예방접종 관련한 정보들을 확인하실수 있습니다. 또, 어느병원에서 어떤 접종을 맞았는지 기록도 관리되고, 일정도 관리할 수 있고, 유용한 듯해서 이렇게 메모해봅니다. 아참, 문자서비스도 있대용 ㅋ [다음팟인코더] 더 이상 DTS 오디오는 변환을 지원하지 않습니다 라는 메세지가 나올땐?? 다음팟인코더는 구버전을 사용하세용 ㅎ 요새 영상들은 화질이 너무 좋아졌습니다. 블루레이 영상들도 많구요. 그럼 영상파일의 용량이 4 기가는 훌쩍 넘어버립니다. 컴퓨터에서 이 영상을 재생할 때는 문제가 없지만, 핸드폰이나 플래시 메모리에서 복사해서 보면??? 간혹 재생이 안될 껍니다. 그 이유는 플래시메모리에서는 4기가 이상 파일를 인식을 못하기 때문입니다. 그래서, 이런 용량이 큰 영상파일들은 인코더 프로그램으로 용량을 줄여 플래시 메모리에 저장을 한답니다. 여러가지 인코더 프로그램이 많지만, 저는 예전부터 다음팟인코더를 주로 이용한터라 다른 인코더 프로그램은 잘 사용하지 않네요. 그런데 어느날~! 아래와 같은 메세지가 출력되면 인코딩이 되질 않는 겁니다. ㅡㅜ mvk 라는 확장자를 이제 지원을 안하는건.. 이전 1 2 3 4 5 ··· 17 다음
