메모장 썸네일형 리스트형 jQuery Selector References jQuery Selector References Selector사용예선택되는 요소*$("*")모든 엘리먼트#id$("#lastname")id=lastname인 엘리먼트.class$(".intro")class=intro인 엘리먼트element$("p")모든 p 엘리먼트.class.class$(".intro.demo")class가 intro 및 demo인 모든 엘리먼트 :first$("p:first")첫 번째 p 엘리먼트:last$("p:last")마지막 p 엘리먼트:even$("tr:even")모든 짝수번째의 tr 엘리먼트:odd$("tr:odd")모든 홀수번째의 tr 엘리먼트 :eq(index)$("ul li:eq(3)")list 에서 4번째 엘리먼트:qt(no)$("ul li:gt(3)")3보다 큰 인.. HTML, CSS 코딩시 기본적인 유의사항 1. 공백테크 - 2. 모든 script 및 style 요소에는 type속성이 포함 3. 모든 img 및 area 요소에는 alt속성이 포함 4. 모든 script내의 태크는 escape시켜야한다. 5. 모든 문서내 url에서 &를 쓰면안된다 - ... - html문서내에서만 &를 &로 바꾸어야하며 브라우저 주소창이나 이메일 본문에서는 &를 써야한다. 웹서버에서는 &가 아니라 &만을 인식 6. 검색 form 제목 내용 작성자 7. 는 block : 뒤에 개행이 이루어짐(줄바뀜) 은 inline : 뒤에 개행이 이루어지지 않음(줄바뀌지않음) 8. block : , , , , , , , 등 lnline : , , , 9. Heading태그 : ~ = 제목을 표기 10. : 하나의 문단을 , 로 작성 는 하위.. A열 B열 용지크기 규격 정리 A열 B열 용지크기 규격 정리 기가파노라마의 위엄 클릭해서 확대해서 보셔요 ㅎㅎ http://tokyogigapixel.com.s3-website-ap-northeast-1.amazonaws.com/ [jQuery] 이미지 슬라이드, 팝업 갤러리 소스 [jQuery] 이미지 슬라이드, 팝업 갤러리 소스 기본적인 레이아웃은 이미지 슬라이드 갤러리이고, 해당 이미지를 클릭하면, 팝업 박스로 이미지 원래크기를 보여주며 이미지 이동도 되는 갤러리 입니다. 관련사이트 http://lokeshdhakar.com/projects/lightbox2/ http://slidesjs.com http://mobilyslider http://htmldrive.net less 표현 http://lesstocss.com http://css2less.cc http://bit.ly/JbQUEj 별궤적 합성 프로그램 [Startrails] 다운과 사용법 Startrails 는 독일계 프리웨어랍니다 짧게 끊어서 찍은 별 궤적을 이어주는 아주 유용한 프로그램인데요, 이 프로그램을 촬영하기 위해서는 jpg로 촬영해야 한다. 작동법도 간단한 편이라서 가장 애용하는 프로그램입니다. 아래의 링크를 따라 가시면 다운 받으실 수 있습니다. ※ 다운 받으러 가기 : http://www.startrails.de/html/software.html ※ 혹은 첨부파일 사진을 합쳐주는 Startrails 프로그램의 사용법은 아주 간단합니다. 기본적인 원리는 포토샵의 블렌딩 모드에서 따온 것처럼 보이는데요, 그 첫 번째가 Lighten기능을 이용한 것 이고, 그 두 번째가 Lighten+Screen기능을 이용한 것입니다. 밝은 영역만 따 와서 자동적으로 이어주는 방식을 선택했다는.. 인체 구조에 대한 이해를 돕는 사이트(?) http://www.nosmi.org/ 회의(會議)에 대한 회의(懷疑) - 진짜 공감되는 구만~! 자꾸 늘어지기만 하고 결론이 나지 않는 회의에 대해 회의가 느껴진다면 어떻게 할까? ‘야신(野神)’이라 불리는 김성근 고양 원더스 감독은 한 인터뷰에서 이런 얘기를 했다. “나는 미팅 많이 하는 조직은 실패라고 봐요. 왜 자꾸 강제로 모여요? 리더의 자위행위라고. 자기만족이에요.” 이 얘기를 들은 리더들 중에 찔리는 사람, 분명 있을 거다. 툭하면 직원들 불러 모아 일장 연설을 늘어놓고 아이디어를 내놓으라고 윽박지르는 CEO는 더욱 더... 하버드대 경영대학원 라파엘라 사둔 교수팀이 전 세계 CEO 65명의 업무 시간을 조사한 결과 CEO들이 가장 많은 시간을 쏟는 업무는 회의였다. 한 주 평균 업무시간인 55시간 중 가장 긴 18시간을 회의에 쓰고 있단다. 회의를 하는 동안 자위행위만 하고 있을 것인지.. 연말정산 근로소득원청징수 영수증에 대한 설명서 연말정산 근로소득원청징수 영수증 설명서 연말정산을 받기 위해 각종 영수증을 회사에 제출하면, 근로소득원천징수 영수증을 받게 된다. 처음 이 영수증을 받으면, 내가 도대체 뭘 봐야 하는 건지, 내가 돌려받는 금액이 어디에 붙어 있는지조차 알 수 없을 정도이다. 근로소득원천징수 영수증만 해독할 수 있어도 연말정산의 고수가 될 수 있다. 다행히도 이 영수증의 구성은 어느 직장이나 똑같다. 내용이 어려운 걸 국가도 인정하는지 각 항목마다 친절하게 번호도 붙여 놓았다. 2010년 4월에 개정된 신상 형식으로 소개한다. 지금부터 근로소득원천징수 영수증에 있는 각 번호별 내용을 친절하게 설명해 보겠다. 1~5 징수의무자 세금을 내야 할 사람으로부터 세금을 거두어 납부하는 사람을 말한다. 당신의 월급을 원천징수 해서 .. TC-80N3a 유선 릴리즈 사용법 TC-80N3a 유선 릴리즈 사용법 이 릴리즈를 중고로 얻기는 했는데...도통 사용법을 몰랐었다. 고장난건가? 하나 새로 사야하나 고민하는 찰나에 우측 톱니바퀴를 클릭하는 기능이 있다는 것을 우연찮게 알아냈다 그 다음부터 아주 유용하게 사용하고 있다는...ㅎㅎ 무식한게 죄지...ㅋ 사용 매뉴얼 Win7에서 강제로 FAT32 파일시스템으로 포맷하는 유틸 종종 FAT32가 꼭 필요한 상황이 발생한다 하지만 윈도우7에서는 포맷 형식에서 FAT32을 지원하지 않는다. 고로 검색을 하기 시작했고, 적당한 유틸을 찾았다. 참고로, 파일 분실에 대해서는 장담하지 못하겠다...ㅜㅠ HTML5 웹스토리지(HTML5 Web Storage) - 클라이언트에 데이터를 저장하다 Web Storage “클라이언트에 데이터를 저장하다” HTML5 에는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage(웹스토로지) 스펙이 포함되었다. Web Storage의 개념은 심플하다. '키/ 값' 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. 영구저장소(localStorage)와 임시저장소(sessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다. Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념이다. 다만 몇 가지 쿠키의 단점를 극복하는 개선점이 도입되었다. 쿠키(Cookie)는 여전히 유효하고 꽤 적절한 클라이언트 저장도구이다. HTML5 에서 Web.. [HTML5+CSS3]제이쿼리(jQuery)와 Swipe JS 파일을 활용한 터치슬라이드 갤러리 소스 터치 슬라이드 갤러리 소스 swipejs.com 에서 받은 자바스크립트 라이브러리를 사용한 소스입니다. 버튼으로도 이미지를 슬라이드 시킬 수 도 있고, 터치로도 슬라이드 시킬수 있답니다. ㅋ 다시한번, 말씀드릴께요 슬라이드 모션을 확인하기 위해서는 터치기반 디바이스에서 확인하셔야 해요. ㅎㅎ 일단, 웹에서 확인하기 위해서 버튼은 넣어놨구요 ㅎㅎ 아래 파일을 다운 받으셔서 분석하시기 바랍니다. 참조 - http://ryuseunghyun.tistory.com/2750 [HTML5+CSS3]모바일에서 터치, 슬라이드 모션 구현에 유용한 자바스크립트 라이브러리 터치, 슬라이드 모션을 위한 자바스크립트 라이브러리 모바일에서 터치라는 액션을 통해 슬라이드 모션을 적용할 수 있도록 하는 자바스크립트 라이브러이 제공 사이트입니다. 아래 파일은 해당 URL 에서 다운 받으실 수도 있습니다. 꼭, 터치 모션이 되는 디바이스에서 열어야, 슬라이드 모션이 확인디 됩니다. 바로가기 - http://swipejs.com [HTML5+CSS3]제리쿼리(jQuery)를 사용해 투명도 사진 갤러리 간단 소스 [HTML5+CSS3]제리쿼리(jQuery)를 사용해 투명도 사진 갤러리 간단 소스 CSS를 사용해 마크업을 하고, 모션은 제이쿼리(JQuery)를 사용해 간단하게 만들어보았습니다. 결과물 화면입니다. 소스 화면입니다. 다운로드 하셔서 분석해 보셔요 [HTML5&CSS3] 오늘 구현하는 내일의 웹 표준 - 책 소스 표지멋있네요 26가지 팁으로 구성된 이 책은, ‘오늘 구현하는 내일의 웹 표준‘이라는 부제에 걸맞게 각 팁을 기존 브라우저에 적용할 수 있는 방법들도 설명합니다. 또, 각 기술이 향후 어떤 식으로 발전해가며 여기에 대해서는 어떻게 대처해야 할지도 간략히 짚어줍니다. 번역은, 클리어보스에서 HTML5 명세의 한글판과 UX MYTHS의 번역본을 작성하신 걸로 유명한 한선용(검은태양) 님이 맡아주셨습니다. 예제 코드를 한글화하고 스크린샷을 새로 찍는 와중에, 웹브라우저들이 업데이트되면서 현재 상황에 맞게 본문을 수정하느라 고생이 많으셨답니다. 마크업 개발자들이 새 표준을 배워서 쓸 때 가장 어려운 점은 배우고 익히는 과정 자체가 아닙니다. 바로, ‘기존 브라우저들이 지원하지 않는데 어떻게 하지? 좋은 건 알겠.. [HTML5+CSS#]를 공부한다면, 한번쯤 독파해야 할 사이트 주옥같네요 ㅎㅎ CSS에 대한 전반적인 개념을 잡기 위해 꼭 읽어보셔야 합니다...ㅎㅎ 바로가기 HTML5 localStorage (name/value item pairs) DEMO http://people.w3.org/mike/localstorage.html localStorage 를 쉽게 확인 가능한 사이트 바로가기 [스타일로 말해요] CSS를 아는 웹디자이너 되기 CSS 할 줄 아세요? CSS는 웹이 시각적으로 보여주는 부분을 담당한다. CSS는 아이디어를 온라인상에 펼칠 수 있게 하기 위해서 꼭 알아둘 필요가 있는 언어이다. CSS 코드를 설명하고 있는 책들은 무수히 많지만, 그런 추상적인 코드에서는 생각을 자유롭게 펼치기 힘들다. 눈에 보이는 색상, 형태, 배치를 가지고 생각해야 한다. 코드로 말하는 것이 아니라 스타일로 말해야 한다. 스타일로 말해요!』는 여러분의 디자인이 웹을 위한 결과물로 어떻게 적용될 수 있는지를 간단한 예제를 이용하여 설명함으로써, 코드와 스타일 사이의 벽을 허물어 줄 것이다. 스타일로 말해요 저자 제이슨 그랜포드 티그 지음 출판사 위키북스 | 2010-07-28 출간 카테고리 컴퓨터/IT 책소개 『스타일로 말해요!』는 디자인이 웹을 .. 누구나 모바일 슬라이드 포토갤러리 구현할 수 있다 텍 기존의 클릭 방식이 아닌, 손가락으로 쓸어 넘기면 마치 앱 처럼 부드럽게 다음 슬라이드로 넘어가는 것이 이 소스가 가지는 가장 큰 특징입니다. 관련 사이트 및 링크 공식웹 사이트 : http://www.photoswipe.com/ 미리보기 : http://www.photoswipe.com/latest/examples/04-jquery-mobile.html 다운로드 : http://github.com/downloads/codecomputerlove/PhotoSwipe/code.photoswipe-2.1.6.zip 출처 - http://mjuzhj23.blog.me/140141533634 JavaScript/CSS 용량 줄여주는 웹 사이트 Online JavaScript/CSS Compression Using YUI Compressor JavaScript/CSS 용량 줄여주는 웹 도구 Online YUI Compressor는 온라인에서 JavaScript와 CSS를 압축하는 도구다. 야후의 YUI Compressor를 사용하는 이 도구는 입력 파일에서 변수의 이름을 단축시키고 공백을 삭제하는 등 웹 브라우저만 이해할 정도로 내용을 압축하고, JavaScript와 CSS에 문법적 오류가 있으면 그것까지 지적해준다. 이거까진 공개 안하려했는데, 내 홈페이지의 JS를 이 도구에 사용해보니 용량이 60% 줄어들더라.. 한국의 개발자가 더 좋은 툴을 개발하여 정리할 겸 글 판올림을 한다. http://iblogbox.com/devtools/js/에.. [jsbeautifier.org]JS, CSS 파일 압축한 파일 풀어서 보기 jsbeautifier.org jsbeautifier(http://jsbeautifier.org/)는 난독화/패킹된 자바스크립트 디코딩할때 아주 유용한 툴입니다. 가끔 안되는 경우도 있는데 보통은 디코딩이 깔끔하게 잘 되고 들여쓰기와 줄바꿈을 해주기 때문에 수동으로 디코딩한 결과를 보기쉽게 정리시킬때도 좋습니다. 바로가기 [HTML5+CSS3]에 대한 전체적인 개념 정리파일 [HTML5+CSS3]에 대해 전체적인 정리파일 다운로드 하셔서, 압축 푸시고 보시면 됩니다. [jQuery]이미지 로딩 - Lazy Load Plugin for jQuery(특정영역) Lazy Load Plugin for jQuery 이미지 파일들을 페이지 호출시 무작정 보여주는 것이 아니라 브라우져의 가시영역을 이동(스크롤)할 경우에만 해당 영역의 이미지를 보여주는 기능 사용법 1. 헤더부분에 아래코드를 넣음 2. 이미지 태그를 지정함 (기본코드) $("img").lazyload(); 3. 실제 적용예제(img/grey.gif 파일을 이미지 로드전에 보여줌) $(function() { $("img").lazyload({placeholder : "img/grey.gif"}); }); 4. 특정영역에만 코드적용 게시판이나 본문내용외에 다른 이미지의 로드가 오작동하는.. 적응형 웹(AWD, Adaptive Web Desing)과 반응형 웹(RWD, Responsive Web Design)의 차이점 적응형 웹(AWD, Adaptive Web Desing)의 정의 적응형은 몇개의 해상도를 정의하여 CSS코딩시 브라우저가 범위 사이즈에 속하면 그에 따라 정의된 스타일로 표현한다. 적응형웹은 PX단위를 사용하여 각 디비이스마다라기 보다는 정해진 해상도에 적응된 형태로 화면에 그려지기 때문이다. 반응형웹과 적응형웹모두 공통적으로 미디어쿼리를 사용한다. 반응형 웹(RWD, Responsive Web Design)의 정의 사용자의 사용환경과 행동패턴에 유기적이고 적절하게 반응하는 웹요소들에 대한 총체적 디자인을 말하는 것이다. 협의적 관점에서 본다면 Screen Size, Resolution, Orientation 등 사용 단말환경에 반응하여 웹페이지를 제공하는 것이라고 정의 할 수 있다. 즉, 화면 너비에 .. 크롬, 파폭 등에서 location.href 가 동작하지 않을때 location.href 가 동작하지 않을때? IE에서는 문제 없이 동작하는 location.href(" ")가 크롬이나 파폭 등 여타 브라우저에서는 정상 동작하지 않는다. 해결 방법은 의외로 간단하다. before - location.href("where"); after - location.href = "where"; 출처 - http://blog.naver.com/bubi19/110128045100 RWD, Responsive Web Design 반응형 웹에 대해서 반응형 웹(Responsive Web)의 등장배경 최근 다양한 모바일 기기가 보급되면서 하나의 사이트를 만들더라도 데스크탑 / 모바일 폰 / 타블렛 PC 등 서로 다른 해상도를 가진 디바이스들을 고려하지 않을 수 없게 되었다. 데스크탑 하나만 보더라도 와이드의 고해상도 디스플레이가 확산됨에 따라 많은 사이트들이 기존의 1024*768 크기를 넘어 점차 사이즈를 키워가고 있는 추세이지만 그렇다고 하나의 해상도에만 맞춰 사이트를 제작하기도 어렵다. 이렇듯 N-Screen의 시대로 불리는 다양한 디바이스의 해상도에 맞춰 사이트의 레이아웃을 변환하는 이슈에 맞춰 등장한 것이 반응형 웹(Responsive Web)이다. 반응형 웹(Responsive Web)이란? 사용자의 사용환경과 행동패턴에 유기적이고 적절하게.. 미디어 쿼리(media queries) 사용법과 속성 미디어쿼리(@media)를 사용하기전 체크사항 1. HTML5인지 확인합니다 ==> HTML 4.0 버전에서는 개발하기 힘듭니다. 2. 이 하나라도 있는지 확인합니다 ==> TABLE가 존재할 경우 레이아웃이 깨집니다. 3. 개발 브라우저가 IE만 있을 경우 IE9 이상인지 확인합니다 ==> 물론 IE8이하에서도 JS로 해결이 가능합니다만, 그래도 불안정하기 때문이죠. 4. 되도록 스크립트 코드는 부분보다는 끝에 작성합니다 ==> 로딩 속도는 비슷하나, 체감 속도에서 많은 차이가 납니다. 미디어쿼리(@media)를 사용법 구조는 이렇습니다. (3가지 방법 중 하나를 선택해서 사용하시면 됩니다.) @media를 미디어쿼리라고 합니다. 모두 스타일 시트 내부에 작성됩니다. 1) @media only all .. 이전 1 2 3 4 5 6 7 8 ··· 20 다음
