본문 바로가기

전체 글767

jQuery API 정복 - ~보다 큰 요소 선택하기 : jQuery(':gt(index)') :gt('index') 는 요소 집합에서 index 보다 큰 색인을 가지고 있는 요소들을 반환해 줍니다. 원문 링크 http://api.jquery.com/gt-selector/ gt selector jQuery(':gt(index)') index 0 이 초기값인 색인입니다. gt() 함수의 gt 는 great than, '~~보다 큰' 이라는 뜻입니다. 꺽쇠로 치면 > 에 해당합니다. 이렇게 풀어 쓰니까 바로 와 닿으시지 않나요 :). 즉, gt(0) 이면 0보다 큰 인덱스를 가진 녀석들 모두를 선택할 수 있습니다. 예 제 소스닫기 4 보다 큰 색인을 가진 td 를 선택해서 텍스트에 줄을 긋습니다. 기억하세요 : 색인의 초기값은 0 입니다. TD #0TD #1TD #2 TD #3TD #4TD #5 TD.. 2011. 2. 1.
블로그 이미지를 시간별로 바꾸다 티스토리는 자유도가 높다. 나같은 일에 종사하시는 분들이야 성에 차지 않을지 모르겠지만 어쨌든 이정도면 아주 좋은 것 같다. 다음 블로그에서 이사오길 참 잘했다는 생각이 든다. 그래서 요즘 이것저것 해보고 있는데. 디자인 실력이야 잼병이니(개인적으로 프로그래머 보다 디자이너가 더 우수하다고 생각하는 1人) 그 결과물이 참 허접스러워서 블로그 스킨에 반영을 하진 못하고 있긴 하지만 말이다. 상단에 덩그러니 있던 텍스트 블로그명을 보면서 이걸 어쩌나 싶었는데, 잠자리에서 천장을 쳐다보다가 문득 든 생각이 있어 실천해 보았다. "시간에 따라 이미지를 바꿔보자" 새벽, 아침, 오전, 오후, 밤, 한밤중으로 나누어서 이미지를 바꿔야 겠다는 결심을 하고 이미지 작업을 했는데. ㅡㅡ;; 역시 이게 걸림돌~ 플리커에서.. 2011. 2. 1.
RevU, 사이트 속도 좀 올리면 안되겠니? 메타블로그인 리뷰(RevU). 많은 블로거들이 메타블로그에 자신의 글들을 등록하고 있다. 많은 노출과 각종 혜택들을 보기 위해서 말이다. 그 중에 하나인 리뷰에 대해서 잠깐 얘기하자. 사이트 속도 좀 올려주라. 답답하다. 서버를 바꾸든 대역을 늘리던 쫌. 그래도 블로그 글들의 집합소 역할을 하는 곳인데 느린건 쫌 그렇지 않나. 뭐~ 리뷰 관리팀이 보면 콧방귀도 안나오겠지만~. 걍 그렇다고~ 2011. 1. 31.
jQuery API 정복 - 첫번째 요소 찾기 : jQuery(':first') :first 는 찾은 요소 중에 첫번째를 찾는 선택자입니다. 원문 링크 http://api.jquery.com/first-selector/ first selector jQuery(':first') :first 선택자는 :eq(0) 이나 :lt(1) 과 같이 바꿔 사용할 수 있습니다. 예 제 소스닫기 tr 중에 첫번째를 찾아 텍스트를 기울입니다. italic 체로 바꿉니다. Row 1 Row 2 Row 3 미리보기 이전에 같이 보셨던 :first-child 와 이번의 :first 선택자는 아주 유사해 보입니다. 그 사용법을 봐도 그렇고 첫번째 요소를 선택해 준다는 내용으로 봐도 그렇습니다. 그런데 이 둘 사이에는 큰 차이점이 있습니다. :first-child는 1개 이상의 요소를 선택할 수 있다는 것이고 .. 2011. 1. 31.
jQuery API 정복 - 첫째 자식(?) 찾기 : jQuery(':first-child') :first-child 는 자식 요소 중에에 첫번째로 위치한 요소를 찾는 선택자입니다. 원문 링크 http://api.jquery.com/first-child-selector/ first-child selector jQuery(':first-child') :first-child 는 :nth-child(1) 로 대체될 수 있습니다. 이 예제를 보다가 jQuery 가 얼마나 사용하기 편한지 다시한번 느끼게 되었습니다. 아래 예제를 제가 순수하게 짠다면 아마 골머리 썩혔을 겁니다. 다시한번 jQuery 라이브러리 작성자들에게 박수를~~ 예 제 소스닫기 각각의 div 들의 첫번째 span 태그를 찾아서 텍스트에 밑줄(underline)을 그린 후에, 그 span에 마우스 오버/아웃 이벤트시 글자색을 초록색/원래.. 2011. 1. 31.
jQuery API 정복 - input file 찾기 : jQuery(':file') :file 은 파일을 찾는 대화상자를 띄울 수 있는 input을 찾는 선택자입니다. 원문 링크 http://api.jquery.com/file-selector/ file selector jQuery(':file') 예 제 소스닫기 input 들 중에 type 이 file 인 것을 찾아 3 픽셀 짜리 빨간 테두리를 그립니다. 그리고 찾은 개수를 표시해 줍니다. Option Button 미리보기 file 에 테두리 그리는 건 파이어폭스와 익스플로러가 좀 다르네요. 찾아보기 버튼까지 테두리가 그려지는건 IE 만 되는것 같습니다. 뭐 그리 중요한 내용은 아니니 개의치 마시구요. 파일 업로드 관련해서 처리할 일이 생길 때 사용하게 되겠네요. 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com .. 2011. 1. 29.
jQuery API 정복 - 리스트 짝수,홀수 찾기 : jQuery(':even') :even 은 요소 집합 세트에서 색인 번호가 짝수인 요소를 선택합니다. 0 을 포함합니다. 원문 링크 http://api.jquery.com/even-selector/ even selector jQuery(':even') 눈으로 보이는 순서는 홀수번째 요소가 선택된 것처럼 보입니다. 하지만 인덱스가 '0' 이 초기값이기 때문에 색인 기준으로 보면 사실 짝수번째가 선택되는 것입니다. 조금 헷갈릴 수 있겠네요. 이런 부분은 자주 사용하다 보면 익숙해지는 부분입니다. 너무 걱정마세요. 예 제 소스닫기 테이블에서 인덱스 기준 짝수번째 행들을 선택하여 배경색을 보라색으로 처리합니다. Row with Index #0 Row with Index #1 Row with Index #2 Row with Index #3 .. 2011. 1. 28.
jQuery API 정복 - 인덱스로 요소 찾기 : jQuery(':eq(index)') ':eq(index)' 는 선택된 요소들을 인덱스 번호로 찾을 수 있는 선택자입니다. 마치 배열의 인덱스로 값(value)를 찾는 것과 같은 효과를 냅니다. 원문 링크 http://api.jquery.com/eq-selector/ eq selector jQuery(':eq(index)') index '0'을 시작점(Zero-based)으로 하는 인덱스 :eq(), :lt(), :gt(), :even, :odd 와 같은 인덱스와 관련된 선택자는 찾고자 하는 요소들을 집합 형태로 묶어 줍니다. 위에서 부터 아래쪽 방향으로(down based) 요소들을 찾아 보관합니다. 예를 들어, (.myclass) 선택자로 찾은 요소가 4개라면 첫번째 찾은 요소의 색인이 0 이 되고 4번째 요소의 색인이 3이 되는 것입니.. 2011. 1. 28.
jQuery API 정복 - 사용 불가 상태 선택하기 : jQuery(':disabled') :disabled 은 요소 중에 사용불가(disabled) 상태인 요소를 찾아 반환해 줍니다. 원문 링크 http://api.jquery.com/disabled-selector/ disabled selector 개요 : 요소들 중에 사용 불가 상태인 요소를 찾습니다. jQuery(':disabled') 예 제 소스닫기 input 중에 disabled 인 상태를 가진 요소에 'this is it' 이라 씁니다. 미리보기 사용 불가 상태인 요소를 찾아야 하는 일이 종종 발생하는 데, 요긴하게 쓸 수 있을 것 같습니다. 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 1. 28.
jQuery API 정복 - 자식 요소 선택하기 : jQuery('ancestor descendant') jQuery('ancestor descendant') 는 부모(ancestor)에 속한 자식(descendant)를 찾는 선택자입니다. 원문 링크 http://api.jquery.com/descendant-selector/ descendant selector 개요 : 자식요소를 찾는 선택자입니다. jQuery('ancestor descendant') ancestor 는 '조상, 부모' 의 뜻입니다. descendant 는 '후손, 자식' 의 뜻이죠. 아마 고딩2년 정도 수준의 단어 였던걸로 기억합니다. 전 구글 사전으로 검색했습니다. 쿨럭;; 한글로 된 도스가 있었다는 얘기는 들었는데, 영어만 잘 하면 이 공부도 좀 더 수월해 지지 않나 생각해 봅니다. 단어의 뜻만 알아도 이 선택자의 역할이 무엇인지 와.. 2011. 1. 27.
스티브 잡스의 소비자 지향적인 생각을 전달해 주는 글 스티브 잡스는 애플이 어떻게 뛰어난 디자인의 제품을 만드는지에 대한 질문에...이렇게 답을 했답니다. "세상의 모든 가전제품의 디자인을 보십시오 그것은 복잡하게 만들어진 껍데기에 불과하다. 애플은 좀더 포괄적이고 단순한 제품을 만들기위해 노력해왔다. 시중에 나와 있는 가전제품을 보면 분명히 카탈로그에는 ~도 가능합니다. 라고 쓰여져 있지만 실제로는 제품 설명서를 자세히 읽어보지 않으면 조작 방법을 알 수 없거나, 어처구니 없을 정도로 조작법이 복잡해서 광고에서 말하는 만큼 기능이 만족스럽지 않은 제품이 많습니다. 이런 제품들은 대부분 다른회사의 차별화에만 신경을 쓰다가 결국 진정으로 추구해야 할 본연의 모습을 충분히 고려하지 못한 채 새로운 기능만 탑재한 결과다. 그래서 본질적인 해결이라 할 수 없다라고.. 2011. 1. 27.
jQuery API정복 - 특정 단어 포함 요소 선택하기 : jQuery(':contains(text)') :contains('text') 는 'text'에 해당하는 단어가 포함된 컨텐츠를 가진 요소를 찾는 선택자입니다. 원문 링크 http://api.jquery.com/contains-selector/ contains selector 개요 : input 태그 중에 type 이 checkbox 인 요소를 찾습니다.(아자님이 찾아주셨습니다. ^^;;) jQuery(':contains(text)') text text 에 해당하는 문자열을 찾습니다. 대소문자를 구별합니다. 이 선택자는 괄호안의 텍스트와 일치하는 문자열이 요소의 내용 중에 있을 때 그 요소를 반환합니다. 말이 좀 어렵네요. 예제를 보시면 아주 간단합니다.단, 대소문자를 구분합니다. 예 제 소스닫기 div 영역의 내용 중에 'John' 이라는 글자가 .. 2011. 1. 27.
jQuery API 정복 - 클래스명으로 선택하기 : jQuery('.class') .class 는 클래스명이 일치하는 요소를 찾는 선택자입니다. 원문 링크 http://api.jquery.com/class-selector/ class selector jQuery('.class') class 클래스명을 검색합니다. 2개 이상의 클래스를 가지고 있는 요소가 있다면 그 중에 하나만 일치해도 선택됩니다. JavaScript 의 기본 함수인 getElementsByClassName() 이 지원되는 브라우져에서는 jQuery 도 해당 함수를 사용합니다.(헉; 저는 왜 이 네이티브 함수를 모르고 있었죠 ㅡ.,ㅡ) 예 제 소스닫기 "myClass" 라는 클래스명을 가진 요소를 찾아서 3px 짜리 빨간 테두리를 두룹니다. div class="notMe" div class="myClass" span c.. 2011. 1. 27.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 하위 요소 선택 ("parent > child") parent > child 는 parent 에 속한 child를 찾습니다. 원문 링크 http://api.jquery.com/child-selector/ Child Selector (“parent > child”) jQuery('parent > child') parent 유효한 선택요소 child parent 에 속한 자식 요소 parent > child 는 스타일시트의 표현방식입니다. parent 에 속하는 child 요소에 어떤 스타일을 주고 싶을 때 사용됩니다. 그런데 이 CSS 방법은 IE6 버젼에서는 호환이 되지 않습니다. 그러나 이 선택 방법을 이용하여 jQuery 에서는 해당 요소에 접근할 수 있도록 선택자를 만들었습니다. 부모의 하위에 있는 모든 자식요소들을 선택하는 것이 아닙니다. 바로 .. 2011. 1. 27.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 체크된 체크박스만 알아내기 :checked 는 체크박스나 라디오버튼 들 중에 체크가 되어 있는 요소만 찾는 선택자입니다. 원문 링크 http://api.jquery.com/checked-selector/ checkbox selector 개요 : 체크박스나 라디오버튼 태그 중에 선택되어 있는 요소를 찾습니다. jQuery(':checked') :checked 는 checkbox 나 radio buttons 들에 해당됩니다. 콤보(select) 박스는 :selected 선택자를 사용하세요. 예 제 소스닫기 체크박스를 클릭할 때마다 그 상태를 체크하여 만일 선택(체크)상태이면 체크된 상태인 개수를 알려줍니다. 미리보기 위 소스중에 보시면 n 2011. 1. 26.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 체크박스를 찾자 :checkbox 는 input 중에 체크박스를 찾는 선택자입니다. 원문 링크 http://api.jquery.com/checkbox-selector/ checkbox selector 개요 : input 태그 중에 type 이 checkbox 인 요소를 찾습니다. jQuery(':checkbox') $('checkbox') 는 $('[type=checkbox]') 로 사용할 수 있습니다. 가상 클래스(pseudo-class) 선택자(":" 와 같은)를 사용하실 때는 그 앞에 태그명이나 다른 선택자를 포함하시기를 권장합니다. 그렇지 않으면 모두 선택하기 선택자("*") 가 암묵적으로 사용하게 됩니다. 즉, $(':checkbox') 은 $('*:checkbox') 나 마찬가지입니다. 그래서 $('input.. 2011. 1. 26.
라이브리, 블로거 이젠 소셜댓글 까지 관리해야 하나? LIVERE 의 개인 블로그 사용자용 무료 버젼 배포는 환영하는 바이다. 다양한 라이브러리가 웹과 소셜을 풍부하게 하는 것은 사실이다. 게다가 웹에 단 댓글이 트위터나 페이스북과 연동된다면 1석 2조, 꿩 먹고 알 먹고, 도랑치고 가재잡고 라고 굳이 얘기하지 않아도 되겠다. 1월 24일 처음 관련 포스팅을 접하고는 바로 스킨 테스트용 블로그에 LiveRe 를 설치해 보았다. jQuery 를 이용한 라이브러리 이어서 더욱 반가웠다. 본인이 jQuery 에 대한 포스팅을 한참하고 있는 관계로다가.. ^^ 하지만 LiveRe 의 소셜 댓글 기능은 조금 아쉽다. 위처럼 티스토리의 기본 댓글이 거의 보이지 않는다. 댓글 펼침을 하고 LiveRe 를 기본 댓글 아래 쪽에 위치시켜도 그리 어울리지 않는다. 나는 내심.. 2011. 1. 26.
재미있는 사진들만 모았다~ Funny Pics 앱 Funny Pics 앱을 우연히 다운받았는데 심심풀이로 쓸만한 것 같다. 짤방으로 쓸만한 것도 있고 ㅎㅎ;; 가끔 들어가서 보면 괜찮은 사진도 건질 수 있을 듯.. 아래 사진은 보다가 괜찮아서 펌 한것임. 헐리웃 배우들의 졸업사진들. ㅎㅎ 리얼하네. 헐리웃 배우들의 졸업사진 우리의 탐은 역시 잘 생긴듯~ 에미넴 순박하게 생긴 듯. 헉, 파멜라 앤더슨 대박 이쁘게 생겼네. 왜 이리 망가졌데~ 스눕독 보고 마이클조던인지 알았다는~ ㅎㅎ 그리고 이건 걍 웃긴 사진 함 웃고 가자고요~ 2011. 1. 25.
으악~~ 연말정산 너무 어려워~~ 으악 연말정산 서류 너무 어려워~~ 좀 쉽게 만들면 안될까?? C++ API 보다 어렵고 영어 원서보다 어려워~ 어려워~ 에혀~ 2011. 1. 25.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : button 을 찾자 :button 선택자는 button 요소 또는 input 요소중에 type이 button 인 요소를 찾아줍니다. 원문 링크 http://api.jquery.com/button-selector/ button selector 개요 : 문서에서 타입이 button 인 input 또는 button 요소를 찾아줍니다. jQuery(':button') 예 제 1. button 형태의 input 요소를 찾아서 배경색을 노란색으로 테두리를 3px 의 빨간색으로 처리합니다. 2. 그 후 문서에서 div 요소를 찾아서 그 안에 발견된 button 의 개수를 빨간색의 텍스트로 표시해 줍니다. Option Button 미리보기 html 의 form 을 표현하는 태그들은 종류가 여러가지입니다. 위에 보시면 아시겠죠? 그 중에 .. 2011. 1. 25.

티스토리툴바