CSS, CSS3 정보 활용

css 선택자, 속성, css3 활용

출처: 클리어보스

선택자(selector)

선택자는
type(element),universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.

pattern	meaning	s5	c8	f3.6	o11	i9	i8	i7	i6
#id	id로 지정된 요소 선택	o	o	o	o	o	o	o	o
*	모든 요소 선택	o	o	o	o	o	o	o	o
.class	class로 지정된 요소 선택	o	o	o	o	o	o	o	o
e	e[element] 요소를 선택	o	o	o	o	o	o	o	o
e, p	e 와 p  요소를 선택	o	o	o	o	o	o	o	o
e p	e의 안에 p 요소를 선택(계속 자식으로 상속)	o	o	o	o	o	o	o	o
e>f	e 요소의 자식인 f 요소만 선택	o	o	o	o	o	o	o	x
e+f	e 요소 바로 뒤에있는 모든 f 요소를 선택	o	o	o	o	o	o	o	x
e~f	e 엘리먼트가 앞에 있는 모든 f 엘리먼트를 선택	o	o	o	o	o	o	o	x
[target]	대상 속성을 가진 모든 요소를 선택합니다	o	o	o	o	o	o	o	x
e[target]	'target' 속성이 포함된 모든 e를 선택	o	o	o	o	o	o	o	x
e[target=_blank]	'target' 속성의 값이 '_blank'와 일치하는 e를 모두 선택	o	o	o	o	o	o	o	x
e[title~=flower]	'target' 속성의 값에 'flower'가 포함되는 e를 선택	o	o	o	o	o	o	o	x
e[lang|=en]	'lang' 속성의 값이 'en' 또는 'en-' 으로 시작되는  e를 선택	o	o	o	o	o	o	o	x
e:link	방문하지 않은 e를 선택	o	o	o	o	o	o	o	o
e:visited	방문한 e를 선택	o	o	o	o	o	o	o	o
e:hover	마우스가 올라가 있는 동안 e를 선택	o	o	o	o	o	o	o	o
e:active	마우스 클릭 또는 키보드(enter)가 눌린 동안 e를 선택	o	o	o	o	o	o	o	x
e:focus	focus가 머물러 있는 동안 e를 선택	o	o	o	o	o	o	x	x
e:first-letter	e 요소의 첫 번째 문자 선택	o	o	o	o	o	o	o	x
e:first-line	e 요소의 첫 번째 라인 선택	o	o	o	o	o	o	o	x
e:first-child	첫 번째 자식 인 모든 e 요소를 선택	o	o	o	o	o	o	o	x
e:lang(fr)	html lang 속성의 값이 'fr'로 지정된 e를 선택	o	o	o	o	o	o	x	x
e:before	e 요소 전에 생성된 요소 선택	o	o	o	o	o	o	x	x
e:after	e 요소 후에 생성된 요소 선택	o	o	o	o	o	o	x	x
a[src^="https"]	'a' 속성의 값이 'https'로 정확하게 시작하는 요소 선택	o	o	o	o	o	o	o	x
a[src$=".pdf"]	'a' 속성의 값이 '.pdf'로 정확하게 끝나는 요소 선택	o	o	o	o	o	o	o	x
a[src*="w3schools"]	'a' 속성의 값에 'w3schools'를 포함하는 요소 선택	o	o	o	o	o	o	o	x
e:first-of-type	e 요소 중 첫번째 e 선택	o	o	o	o	o	x	x	x
e:last-of-type	e 요소 중 마지막 e 선택	o	o	o	o	o	x	x	x
div e:only-of-type	div 안에 e 요소가 유일하면 선택	o	o	o	o	o	x	x	x
div e:only-child	div 안에 e 요소가 유일한 자식이면 선택 다른 형제 엘리먼트 존재하면 미선택	o	o	o	o	o	x	x	x
div e:nth-child(n)	그 부모 div의 n번째 자식이면서 e 일때 선택 (태그에관계없이 n번째 e)	o	o	o	o	o	x	x	x
div e:nth-last-child(5)	div 자식중 뒤로부터 5번째 자식이면서 e 일때 선택 (태그에관계없이 n번째 e)	o	o	o	o	o	x	x	x
e:nth-of-type(n)	e 요소 중 앞으로부터 순서가 일치하는 n번째 e 요소 선택 (자식중 e 만 순서로 세어짐)	o	o	o	o	o	x	x	x
e:nth-last-of-type(n)	e 요소 중 끝으로부터 순서가 일치하는 n번째 e 요소 선택 (자식중 e 만 순서로 세어짐)	o	o	o	o	o	x	x	x
e:last-child	e 요소 중 마지막 자식이라면 e 선택	o	o	o	o	o	x	x	x
e:root	문서의 최상위 루트 요소 선택	o	o	o	o	o	x	x	x
e:empty	텍스트 및 공백(있으면 선택안함)을 포함하여 빈 자식을 가진 e를 선택	o	o	o	o	o	x	x	x
:target	.html#news 형태로 anchor 이동 등으로 선택된 아이디(news)를 가진 엘리먼트 선택	o	o	o	o	o	x	x	x
input:enabled	활성화된 폼 컨트롤 e요소 선택	o	o	o	o	o	x	x	x
input:disabled	비활성화된 폼 컨트롤 e요소 선택	o	o	o	o	o	x	x	x
input:checked	선택된 폼 컨트롤(라디오버튼,체크박스)을 선택	o	o	o	o	o	x	x	x
e:not(selector)	e요소 중 selector가 아닌 e 요소 선택	o	o	o	o	o	x	x	x
::selection	사용자가 선택한 요소의 부분을 선택합니다	o	o	o	o	o	x	x	x

:nth-child(2n+1), :nth-child(4n+1), :nth-child(4n+4), :nth-child(4n), :nth-child(5n-2), :nth-child(-n+3)

nthtable출처: css-tricks.com

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	-	-	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	-
4	9	17	20	16	18	-
5	11	21	24	20	23	-

article time:last-of-type

?

1 2 3 4 5 6 7 8 9 10 11 12

<section>   <article>     <h1>How to tune your ukelele</h1>     <p>Article published at <time>8:00 AM</time>/* :last-of-type */</p>     <p>Article commented on at <time>8:02 AM</time>/* :last-of-type */</p>   </article>   <article>     <h1>Ukelele gets stolen!</h1>     <p>Article published at <time>8:00 AM</time>/* :last-of-type */</p>   <article> <section> </section></article></article></section>

벤더 별 확장 속성 및 브라우저 엔진

대부분의 브라우저 벤더들은 자신들의 브라우저가 현재 지원하는 속성이 표준과 상이하거나 변경될 수 있다라고 생각하고 벤더확장 속성을 만들었다.
실제로 속성을 지원하지만 100% 표준스펙이 나온 상태가 아니기 때문에 개선점이나 버그발생시 피드백을 쉽게 하기 위해 만든 것으로 보인다.

브라우저 밴더	safari	chrome	firefox	opera	i9	i8	i7	i6
벤더확장 속성	-webkit-	-webkit-	-moz-	-o-	-ms-/filter	-ms-/filter	-ms-/filter	-ms-/filter
브라우저 엔진	webkit 웹킷	webkit→Blink	gecko 겍코	presto→webkit	Gazelle 가젤	tasman 타스먼

css3주요속성

css3에는 정말 다양한 속성들이 공개 되었는데 css의 기존버전과는 다르게 모듈형태로 개발되고 있다.
이것은 각종 브라우저나 다양한 디바이스가 필요에 따라 원하는 css 모듈만을 탑재하거나 특정 모듈만을 빠르게 업데이트 할 수 있는 장점이 있다.
css3는 현재 text, fonts, color, backgrounds&borders, transforms, transitions, animations과 같은 종류의 모듈들을 개발하고 있다.
그 모듈형태의 css3 여러 속성 중에서 이번 연재에서 배워볼 css3 주요속성은 아래와 같다.

module	attribute	effect	s5	c8	f3.6	o11	i9	i8	i7	i6
background &border	border-image	테두리 이미지효과	o	o	o	o	x	x	x	x
	border-radius	테두리 라운드효과	o	o	o	o	o	x	x	x
	box-shadow	박스 그림자	o	o	o	o	o	x	x	x
	multiple backgrounds	배경 여러개 넣기	o	o	o	o	o	x	x	x
	radient	그라디언트 효과	o	o	o	x	x	x	x	x
color	rgba(r,g,b,a)/hsla	칼라와 투명도효과	o	o	o	o	o	x	x	x
	opacity	이미지 투명도효과	o	o	o	o	x	x	x	x
text	text-shadow	글자 그림자효과	o	o	o	o	x	x	x	x
	text-overflow	글자 넘칠 때 자동 개행	o	o	x	o	o	o	o	o
user-interface	resize	박스 사이즈 조절효과	o	o	o	o	x	x	x	x
other modules	multi-column layout	문단 다중 칼럼효과	o	o	o	o	x	x	x	x

자세한 활용은 클리어보스를 참고

리스트 말줄임 overflow:ellipsis

?

1	li{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

출처: http://dohoons.com

선택영역 색깔 바꾸기

웹페이지에서 선택된 영역은 보통 파란색 블록으로 표시되는데
이 부분에 대한 스타일도 지정할 수 있습니다.

?

1 2 3

::selection { background:#966; color:#fff; } ::-moz-selection { background:#966; color:#fff; } ::-webkit-selection { background:#966; color:#fff; }

inline 요소의 줄바꿈시 공백없이 표현하기

?

1 2 3 4 5 6 7

<div style="font-size: 0;">     <span style="font-size: 12px;">1</span>     <span style="font-size: 12px;">2</span>     <span style="font-size: 12px;">3</span>     <span style="font-size: 12px;">4</span>     <span style="font-size: 12px;">5</span> </div>