블로그 이미지
푸른_바람

Rss feed Tistory

CSS에 해당되는 글 17건

IT/HTML+JS+CSS+ 2010/08/11 08:30

CSS odd & even rules

Web Style Sheets
CSS tips & tricks

[code css]
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
[/code]


[code css]
col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}
[/code]

IE는 아직 안된다는... :(

'IT > HTML+JS+CSS+' 카테고리의 다른 글

IE "Error: 800a03e8 오류가 발생하여 작업을 완료할 수 없습니다."  (0) 2011/01/18
IE html5 파싱문제  (0) 2011/01/13
CSS odd & even rules  (0) 2010/08/11
리눅스용 텍스트 브라우즈 w3m  (0) 2010/08/05
URI와 링크  (0) 2009/04/25
블록 레벨 요소(block-level elements)  (0) 2009/04/24
CSS, even, first-child, nth-child, Odd, TIP, Tricks
트랙백 0, 댓글 0
IT/Tech 2010/07/30 08:30

jQuery가 지원하는 고급 위치 기반 셀렉터

jQuery가 지원하는 고급 위치 기반 셀렉터. DOM에서 위치를 기반으로 엘리먼트를 선택한다.
 셀렉터 설명
 :first  페이지에서 처음으로 일치하는 엘리먼트.
 li a:first는 리스트 아이템의 첫 번째 링크를 반환한다.
 :last  페이지 마지막으로 일치하는 엘리먼트.
 li a:last는 리스트 아이템의 마지막 링크를 반환한다.
 :frist-child 첫 번째 자식 엘리먼트.
 li:first-child는 각 리스트의 첫 번째 아이템을 반환한다.
 :last-child  마지막 자식 엘리먼트.
 li:last-child는 각 리스트의 마지막 아이템을 반환한다.
 :only-child 형제가 없는 모든 엘리먼트를 반환한다.
 :nth-child(n) n번째 자식 엘리먼트.
 li:nth-child(2)는 각 리스트의 두 번째 리스트 아이템을 반환한다.
 :nth-child(even|odd) 짝수 또는 홀수 자식 엘리먼트.
 li:nth-child(even)은 각 목록의 짝수 번째 자식 엘리먼트를 반환한다.
 :nth-child(Xn+Y) 전달된 공식ㅇ 따른 n번째 자식 엘리먼트.
 Y는 0인 경우 생략 가능하다.
 li:nth-child(3n)은 3의 배수 번째 아이템을 반환한다.
 li:nth-child(5n+1)은 5의 배수 + 1 번째 아이템을 반환한다.
 :even / :odd 페이지 전체의 짝수/홀수 번째 엘리먼트. li:even은 모든 짝수 번째 아이템을 반환한다.
 :eq(n) n번째로 일치하는 엘리먼트 (0 부터 시작)
 :gt(n) n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치
 :lt(n) n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치

* 다른 셀렉터는 0부터 시작되지만 n번째 자식 셀렉터는 1부터 시작된다.
n번째 자식 셀렉터는 CSS와 호환성을 유지하려고 인덱스를 1부터 시작한다. 하지만 jQuery 정의 셀렉터는 법용 프로그래밍 규약에 따란 인덱스를 0부터 시작한다.

jQuery in Action (프로그래밍 jQuery) : p28

'IT > Tech' 카테고리의 다른 글

PHP Fatal error: Allowed memory size of 8388608 bytes exhausted  (0) 2010/08/06
javascript 이미지에 그레이스케일(grayscale) 적용  (0) 2010/07/31
jQuery가 지원하는 고급 위치 기반 셀렉터  (0) 2010/07/30
jQuery가 지원하는 기본 CSS 셀렉터  (0) 2010/07/29
jquery bookmarklet 생성기  (0) 2010/07/20
LAMPP & 버추얼호스트 & XDebug  (0) 2010/07/20
CSS, JQuery, selector, 셀렉터
트랙백 0, 댓글 0
IT/Tech 2010/07/29 08:30

jQuery가 지원하는 기본 CSS 셀렉터

셀렉터 설명
*  모든 엘리먼트와 일치
E  태그켱이 E인 모든 엘리먼트와 일치
E F  E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치
E>F  E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치
E+F  E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치
E~F  E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
E:has(F)  태크명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치
E.C  클래스명 C를 가지는 모든 엘리먼트 E와 일치. E의 생략은 *.C와 동일함
E#I  아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함
E[A]  어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A=V]  값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A^=V]  값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A$=V]  값이 V로 끝나는 어트리뷰터 A를 가지는 모든 엘리먼트 E와 일치
E[A*=V]  값에 V를 포함하는 어트리뷰터 A를 가지는 모든 엘리먼트 E와 일치

jQuery in Action (프로그래밍 jQuery) : p27

'IT > Tech' 카테고리의 다른 글

javascript 이미지에 그레이스케일(grayscale) 적용  (0) 2010/07/31
jQuery가 지원하는 고급 위치 기반 셀렉터  (0) 2010/07/30
jQuery가 지원하는 기본 CSS 셀렉터  (0) 2010/07/29
jquery bookmarklet 생성기  (0) 2010/07/20
LAMPP & 버추얼호스트 & XDebug  (0) 2010/07/20
리눅스 관리를 위해서 알아햐할 모니터링 툴 20  (0) 2010/07/15
CSS, selector, 셀렉터
트랙백 0, 댓글 0
IT/HTML+JS+CSS+ 2009/03/16 18:18

웹 표준 경진대회 & CSS PLAYGROUND

웹 표준 경진대회 & CSS PLAYGROUND 출처 : http://wiki.standardmag.org/kws3day

'IT > HTML+JS+CSS+' 카테고리의 다른 글

액세서빌리티 관련법 및 가이드라인에 대한 이해  (0) 2009/04/18
웹 액세서빌리티에 대한 이해  (0) 2009/04/18
웹 표준 경진대회 & CSS PLAYGROUND  (0) 2009/03/16
브라우저 업그레이드 캠페인  (0) 2009/03/16
장차법 시대의 웹 표준  (0) 2009/03/16
웹 표준, 기술의 진정성  (0) 2009/03/16
CSS, It, 웹, 접근성, 표준, 대한민국>서울>강남구>논현동>거평타운
트랙백 0, 댓글 0
IT/Tech 2008/09/11 14:36

css, javascript 최적화 Tool

1. JavaScript 최적화 도구
 2. CSS 최적화 도구
3. 웹 사이트 성능 개선

출처 : http://www.mimul.com/pebble/default/2008/01/29/1201616760000.html

'IT > Tech' 카테고리의 다른 글

ASP Dictionary Object  (0) 2008/10/19
ASP 함수목록  (0) 2008/10/19
css, javascript 최적화 Tool  (0) 2008/09/11
Prototype.js를 제대로 사용하는 방법  (0) 2008/08/31
자바스크립트 라이브러리 목록  (0) 2008/08/31
JAVA-Struts 강좌 링크  (0) 2008/08/13
CSS, javascript, Tool & Util, 최적화, 대한민국>서울>강남구>논현동>한승빌딩3층
트랙백 0, 댓글 0
IT/HTML+JS+CSS+ 2006/09/22 13:36

혼합정렬(양쪽정렬)

[code html]
<div style="text-align:justify">
혼합정렬(양쪽정렬)
</div>
[/code]

'IT > HTML+JS+CSS+' 카테고리의 다른 글

XHTML (Extensible Hypertext Markup Language)  (0) 2006/10/10
ASCII 특수문자 이름&발음  (1) 2006/09/22
혼합정렬(양쪽정렬)  (0) 2006/09/22
웹 인쇄시 페이지 나누기  (0) 2006/09/22
form 태그 사용시 공백제거  (1) 2006/09/22
css에서 자바스크립트를 사용할수 있는 옵션  (1) 2006/09/22
ALIGN, CSS, 정렬, 혼합정렬
트랙백 0, 댓글 0
IT/HTML+JS+CSS+ 2006/09/22 13:30

웹 인쇄시 페이지 나누기

.break{page-break-before:always}

css의 @media 지시자를 이용한 프린트

@media print{#top_menu,#left_menu{displsy:}#content_body{display:block}}

@media screen{#top_menu,#left_menu,#content_body{display:block}}

'IT > HTML+JS+CSS+' 카테고리의 다른 글

ASCII 특수문자 이름&발음  (1) 2006/09/22
혼합정렬(양쪽정렬)  (0) 2006/09/22
웹 인쇄시 페이지 나누기  (0) 2006/09/22
form 태그 사용시 공백제거  (1) 2006/09/22
css에서 자바스크립트를 사용할수 있는 옵션  (1) 2006/09/22
css menu  (0) 2006/09/22
CSS, 페이지뷰, 프린트
트랙백 0, 댓글 0
IT/HTML+JS+CSS+ 2006/09/22 13:28

css에서 자바스크립트를 사용할수 있는 옵션

expression [HELP]

'IT > HTML+JS+CSS+' 카테고리의 다른 글

웹 인쇄시 페이지 나누기  (0) 2006/09/22
form 태그 사용시 공백제거  (1) 2006/09/22
css에서 자바스크립트를 사용할수 있는 옵션  (1) 2006/09/22
css menu  (0) 2006/09/22
창크기에따른 글자크기 자동조절  (0) 2006/09/22
list-style  (0) 2006/09/22
CSS, javascript
트랙백 0, 댓글 1
IT/HTML+JS+CSS+ 2006/09/22 13:28

css menu

div.menu{width:auto;padding:0;margin:5;border:0 solid gray;border-top:0;font-size:12px;text-align:center}

div.menu a{display:block;margin:0;width:auto;padding:0.2em;font-weight:bold;border-top:0 solid 000;color:999;text-decoration:none}

html>body div.menu a{width:auto}

div.menu a:hover{background:tomato;color:#fff;text-decoration:none}


<div class=menu>

<a href=http://www.bluebreeze.co.kr>bluebreeze.co.kr</a>

</div>

'IT > HTML+JS+CSS+' 카테고리의 다른 글

form 태그 사용시 공백제거  (1) 2006/09/22
css에서 자바스크립트를 사용할수 있는 옵션  (1) 2006/09/22
css menu  (0) 2006/09/22
창크기에따른 글자크기 자동조절  (0) 2006/09/22
list-style  (0) 2006/09/22
Box  (0) 2006/09/22
CSS, Menu
트랙백 0, 댓글 0
IT/HTML+JS+CSS+ 2006/09/22 13:28

창크기에따른 글자크기 자동조절

font-size:expression(document.body.clientWidth /15)

'IT > HTML+JS+CSS+' 카테고리의 다른 글

css에서 자바스크립트를 사용할수 있는 옵션  (1) 2006/09/22
css menu  (0) 2006/09/22
창크기에따른 글자크기 자동조절  (0) 2006/09/22
list-style  (0) 2006/09/22
Box  (0) 2006/09/22
측정단위  (0) 2006/09/22
CSS, dhtml, javascript, 글자크기, 자동조절
트랙백 0, 댓글 0
1 2
TOTAL 245,655 TODAY 22