'css'에 해당되는 글 4건

 
  1. 2014.03.06 [CSS] 커스텀 체크박스 스타일시트 예제, 모바일용, ✔
  2. 2014.02.17 [JS/JQUERY] 제이쿼리 셀렉터 예제, jQuery Selector Example, siblings, prevAll, append, parent, css
  3. 2010.10.05 [JQUERY] JQuery Selector, 객체 선택 9
  4. 2010.03.08 [JS,CSS] 잘까먹는 속성, 함수들
2014. 3. 6. 09:27 COMPUTER/JAVASCRIPT, JQUERY
[CSS] 커스텀 체크박스 스타일시트 예제, 모바일용, ✔

누군가 만들어놓은 커스텀 체크박스 스타일 시트 입니다.

사용법은 <input type="checkbox" class="custom-check"........

처럼 쓰면 됩니다.





input[type=checkbox].custom-check{ 
    position: absolute; overflow:hidden; width:1px;height:1px; 
    clip:rect(0 0 0 0);margin:-1px;padding:0;border:0; 
} 

input[type=checkbox].custom-check + label.custom-check{ 
    display:inline-block; 
    padding-left:1em; 
} 

input[type=checkbox].custom-check:checked + label.custom-check:before{ 
    position:absolute;margin-left:-1em; 
    content:'✔'; 
}


2014. 2. 17. 09:30 COMPUTER/JAVASCRIPT, JQUERY
[JS/JQUERY] 제이쿼리 셀렉터 예제, jQuery Selector Example, siblings, prevAll, append, parent, css

나(this)의 상위를 제외한 같은레벨의 백그라운드 컬러를 빨간색으로 변경

$(this).parent().siblings().css("background-color", "red");


나의 상위중 클래스가 .txt_2인 가장 가까운 객체의 백그라운드 컬러를 빨간색으로 변경

$(this).parent().prevAll('.txt_2:first').css("background-color", "red");


div의 lang속성에 안두리를 포함한 태그안에 html추가

$('div[lang*="kaudo"]').append('<p class="title_3">안녕하세요.</p>');



2010. 10. 5. 15:08 COMPUTER/JAVASCRIPT, JQUERY
[JQUERY] JQuery Selector, 객체 선택
제이쿼리를 이용할때 절대 잊으면 안되는것.
바로 html의 객체들을 선택할줄 알아야 뭔가 하겠죠.


$("font")
태그타입(Element)으로 찾기 - <font>안두볼</font>

$("div,a")
div와 a태그들을 선택합니다.

$("#kaudo")
아이디로 선택 - <a id="kaudo" class="link" href="http://www.kaudo.com">안두리</a>

$(".link")
CSS 클래스명으로 선택 - <a id="kaudo" class="link" href="http://www.kaudo.com">안두리</a>

$("*")
모든 태그(Element)를 선택합니다.

등록할때는 이런식으로
var objTest=$("#test");

 
John Resig @ Kings of Code 08
John Resig @ Kings of Code 08 by jaf 저작자 표시비영리동일조건 변경허락

2010. 3. 8. 23:36 COMPUTER/JAVASCRIPT, JQUERY
[JS,CSS] 잘까먹는 속성, 함수들
객체로 지정한 태그들의 위치값을 알아낼 수 있다

TAG.clientLeft
TAG.clientTop
TAG.clientWidth
TAG.clientHeight
TAG.offsetLeft
TAG.offsetTop

영역안에서 글씨가 넘어가버릴때 여러줄로 강제
word-wrap:break-word;word-break:break-all

한줄로 표시하고 점점점처리

NOBR width:WIDTH;text-overflow:ellipsis;overflow:hidden


페이지에서 루프 돌릴때 사용

ID=setInterval("FUNCTION()",INTERVAL);
ID=setTimeout("FUNCTION()",INTERVAL);
clearInterval(ID);

최근에 올라온 글

최근에 달린 댓글