smarti,스마트아이

 

CSS 선택자

CSS 선택자

선택자는 CSS에서 HTML의 특정 요소를 선택하기 위한 규칙으로, Selectors Level 3가 권고 표준안이며, 현재 Selectors Level 4가 개발 중에 있다. 특히 CSS3에서는 기존 CSS2.1에 비해 많은 선택자가 추가되었기 때문에 별도의 class나 id를 지정하지 않아도 요소를 다양하게 선택할 수 있다.

 

전체선택자(Universal Selector)

전체 선택자(Universal Selector)는 모든 요소를 선택하는 방법으로, '*'를 선택자로 선언한다.

/* 예시 */
* {
 margin : 0 ;
 padding : 0 ;
}

요소 선택자(Type Selector)

요소 선택자(Type Selector)는 HTML 요소를 선택하는 방법으로, 'h1', 'p', 'div' 등의 요소를 선택자로 지정할 수 있다.

선택자(Selector)	의미
E	"E" 요소를 선택함

/* 예시 */
div {
 color : rgba( 255 , 0 , 0 , 0.5 ) ;
}

클래스 선택자(Class Selector)

클래스 선택자(Class Selector)는 HTML 요소의 class 속성 값을 참조하여 선택하는 방법이다. 이때 class 속성 값은 하나의 HTML 요소에 여러 개를 지정할 수 있기 때문에 다중 class를 선택자로 지정할 수도 있다.

선택자(Selector)	의미
E.warning	Class 속성 값이 "warning"인 "E" 요소를 선택함
E.warning.note	Class 속성 값을 "warning"과 "notice"를 모두 가진 "E" 요소를 선택함

/* 예시 */
.note {
 font-size : 1.2em ;
}

아이디 선택자(ID Selector)

아이디 선택자(ID Selector)는 HTML 요소의 id 속성 값을 참조하여 선택하는 방법이다. 이때 id 속성 값은 하나의 HTML 문서에 한 번만 사용할 수 있기 때문에 아이디 선택자를 사용하면 유일한 요소를 선택할 수 있다.

선택자(Selector)	의미
E#usefu	id 속성 값이 "useful"인 "E" 요소를 선택함

/* 예시 */
#main {
 font-weight : bold ;
}

속성 선택자(Attribute Selector)

속성 선택자(Attribute Selector)는 HTML 요소의 속성을 참조하여 선택하는 방법을 의미하며, 이때 속성의 지정 여부나 속성 값의 일치 여부로 선택할 수 있다.

선택자(Selector)	의미
E[attr]	"attr" 속성을 가진 "E" 요소를 선택함
E[attr="val"]	"attr" 속성 값이 "val"인 "E" 요소를 선택함
E[attr~="val"]	"attr" 속성 값 중에 공란으로 분리된 "val" 단어가 있는 "E" 요소를 선택함
E[attr^="val"]	"attr" 속성 값이 "val"로 시작되는 "E" 요소를 선택함
E[attr$="val"]	"attr" 속성 값이 "val"로 끝나는 "E" 요소를 선택함
E[attr*="val"]	"attr" 속성 값이 "val"을 포함하는 "E" 요소를 선택함
E[attr	="en"]

/* 예시 */
a[title] {
 text-decoration : underline ;
}

가상 클래스 선택자(Pseudo-classes Selector)

가상 클래스 선택자(Pseudo-classes Selector)는 요소의 상태나 상황에 따라 선택하는 방법으로, 링크의 경우 방문하기 전, 방문한 후, 링크 위에 마우스를 올려놓거나 포커스 시 등의 상황을 선택하여 스타일을 지정할 수 있다. 또한 언어에 따른 구분이나 마크업 구조에 따라 특정 요소를 선택할 수도 있다.

 - 동적 가상 클래스(Dynamic pseudo-classes)–:link, :visited, :active, :hover, :focus
 - 타깃 가상 클래스(Target pseudo-classes)– :target
 - 언어 가상 클래스(Language pseudo-classes)–:lang
 - UI 요소 상태 가상 클래스(UI element states pseudo-classes)–:enabled, :disabled, :checked
 - 구조 가상 클래스(Structural pseudo-classes)–:root, :nth-child( ), :nth-last-child( ), :nth-of-type( ), :nth-lastof-type( ),      :first-child, :last-child, :first-of-type( ), :last-of-type( ), :only-child, :only-of-type( ), :empty
 - 부정 가상 클래스(Negation pseudo-classes)–:not( )

선택자(Selector)	의미
E:link	아직 방문하지 않는 하이퍼링크를 가진 "E" 요소를 선택함
E:visited	이미 방문한 하이퍼링크를 가진 "E" 요소를 선택함
E:active	현재 사용자 액션을 받고 있는 "E" 요소를 선택함
E:hover	마우스 포인터가 올라간 "E" 요소를 선택함
E:focus	키보드의 포커스를 받은 "E" 요소를 선택함
E:target	"E" 요소가 하이퍼링크 타깃이 되는 경우에 선택함
E:lang(fr)	lang 속성이 "fr(프랑스어를 나타내는 속성 값)"인 "E" 요소를 선택
E:enabled	사용 가능 상태의 "E" 요소를 선택함
E:disabled	사용 불가 상태의 "E" 요소를 선택함
E:checked	체크된 "E" 요소를 선택함
E:root	문서 최상위의 요소를 선택함
E:nth-child(n)	상위 요소의 n 번째 자식 요소가 "E"이면 선택함
E:nth-last-child(n)	상위 요소의 역순으로 n 번째 자식 요소가 "E"이면 선택함
E:nth-of-type(n)	동일한 "E" 타입의 형제 요소중 n 번째 "E" 요소를 선택함
E:nth-last-of-type(n)	동일한 "E" 타입의 형제 요소 중 역순으로 n 번째 "E" 요소를 선택함
E:frist-child	첫 번째 자식 요소의 타입이 "E"이면 선택함
E:last-child	마지막 자식 요소가 타입이 "E"이면 선택함
E:first-of-type()	상위 요소에 대하여 첫 번째 자식 요소의 타입이 "E"이면 선택함
E:last-of-type()	상위 요소에 대하여 마지막 자식 요소의 타입이 "E"이면 선택함
E:only-child	상위 요소에 대하여 유일한 자식 요소가 타입이 "E"이면 선택함
E:only-of-type	상위 요소에 대하여 자식 요소중 다른 "E" 요소가 없이 유일한 "E"일 경우 선택함
E:empty	텍스트 노드를 포함하여 아무런 자식 요소를 갖고 있지 않는 "E" 요소를 선택함
E:not(S)	"S"로 지정된 선택자와 일치하지 않는 "E" 요소를 선택함

/* 예시 */
a:link {
 color : rgba( 255 , 100 , 100 , 0.8 ) ;
}

가상 요소 선택자(Pseudo-element Selector)

가상 요소 선택자(Pseudo-element Selector)는 요소의 첫글자나 첫줄 또는 요소 앞이나 뒤 등 가상의 영역을 선택하고자 할 때 사용한다.

선택자(Selector)	의미
E::first-line	"E" 요소의 문자열 중 첫 번째 줄을 선택함
E::first-letter	"E" 요소의 문자열 중 첫 번째 문자를 선택함
E::before	"E" 콘텐츠 앞으로 생성된 가상 요소를 선택함
E::after	"E" 콘텐츠 뒤로 생성된 가상 요소를 선택함
E::selection	사용자가 선택한 "E" 요소의 범위를 선택함

/* 예시 */
p:first-letter {
 color : #ff0000 ;
 font-size : 5em ;
}

선택자 결합

선택자 결합(Selector Combinators)은 앞서 살펴본 선택자를 문맥이나 요소의 구조를 기반으로 결합하여 사용하는 방법으로, 그 종류에는 하위 선택자(Descendant Combinator), 자식 선택자(Child Combinators), 형제 선택자(Sibling Combinators) 등이 있다.

하위 선택자(Descendant Combinator)

하위 선택자(Descendant Combinator) 방식은 선택자와 선택자를 공란으로 선언하며, 선행 선택자의 하위 요소 중 후행 선택자에 해당하는 요소를 선택하는 방법이다.

선택자(Selector)	의미
선택자 선택자	후행 선택자가 반드시 선행 선택자가 안에 포함되어 있을 경우 선택함

/* 예시 */
#main div {
 border : 3px solid currentcolor ;
}

자식 선택자(Child Combinator)

자식 선택자(Child Combinators) 방식은 선행 선택자인 부모 요소 하위에 포함된 후행 선택자인 자식 요소를 선택하는 방법이다. 이때 부모 선택자와 자식 선택자는 ">"로 구분하여 선언한다.

선택자(Selector)	의미
선택자 >선택자	후행 선택자가 부모 요소로 선행 선택자를 가지고 있는 경우 선택함

/* 예시 */
#main > div {
 border : 3px solid red ;
}

형제 선택자(Sibling Combinators)

형제 선택자(Sibling Combinators)는 기본 형제 선택자(General Sibling Combinators)와 인접 형제 선택자(Adjacent Sibling Combinators)로 구분할 수 있다. 이때 기본 형제 선택자는 선행 선택자와 후행 선택자를 "+"로 구분하여 선언하고, 인접 형제 선택자는 "~"로 구분하여 선언한다.

선택자(Selector)	의미
선택자 + 선택자	선행 선택자 뒤에 후행 선택자를 선택함
선택자 ~ 선택자	선행 선택자 뒤에 인접하여 등장하는 모든 후행 선택자를 선택함

/* 예시 */
h1 + p {
 color : red ;
}
.note ~ p {
 color : blue ;
}

선택자 그룹화

앞에서 살펴본 모든 선택자는 콤마(,)를 사용하여 그룹으로 한 번에 선언할 수 있다. 선택자를 그룹으로 선언할 경우, 선언된 모든 선택자에는 동일한 선언이 적용된다.

선택자(Selector)	의미
선택자, 선택자	콤마(,)로 구분된 모든 선택자에 동일한 선언이 적용됨

/* 예시 */
h1 , h1 + p , .note, #main, p[title] {
 font-size : 1.2em ;
}

선택자의 우선 순위

CSS에서는 하나의 요소에 여러 스타일이 중복 지정될 경우, 선택자의 우선순위에 따라 구체성(specificity)이 높은 선택자의 스타일이 적용된다. 구체성(specificity)은 선택자의 우선순위를 결정하는 방법으로, 다음과 같은 방법에 의해 결정된다.

 - "A"는 id 선택자의 구체성 값으로, 선택자의 구성에 id가 사용된 횟수 
 - "B"는 Class 선택자의 구체성 값으로, 선택자에 class가 사용된 횟수 
 - "C"는 type 선택자와 pseudo-elements의 구체성 값으로 선택자 구성에 요소 type과 가상 요소가 사용된 횟수 
 - 전체 선택자(universal selector)는 구체성 값을 가지지 않는다.
 - 부정 선택자(Negation pseudo-class(:not)) 안에 포함된 선택자는 다른 선택자와 같은 방법으로 구체성을 계산

    하지만, 부정 선택자 자체는 구체성 값을 가지지 않는다.
 - 결합자나 선택자 그룹은 구체성에 영향을 끼치지 않는다.
 - 최종적인 구체성 값은 a-b-c의 숫자를 연속으로 나열한 값으로, 이 숫자 값이 클수록 우선순위가 높다.

 

선택자 구체성

|선택자(Selector)|A|B|C|구체성| |---|---| |li|0|0|1|1|⑤| |ul li|0|0|2|2|④| |div.note|0|1|1|11|③| |#list li|1|0|1|101|②| |ul#list li|1|0|2|102|①|

/* 예시 */
h1 { color : red ; }
.note { color : blue ; }
#main { color : green ; }

 

 

[코딩공부] - CSS fixedNavigation1 예제 다운로드

CSS fixedNavigation1 예제 다운로드

[디자인공부] - 포토샵으로 치즈 텍스트 효과 만들기 (다운로드 포함)

포토샵으로 치즈 텍스트 효과 만들기 (다운로드 포함)

[세상살이] - 유튜브 자막 다운로드 하는 방법

유튜브 자막 다운로드 하는 방법

[세상살이] - 언택트 뜻

언택트 뜻

[코딩공부] - HTML 텍스트 요소

HTML 텍스트 요소