Universal *
type Tag
ID #id
Class .class
State :
Attribute [ ]
하나의 문서에서는 하나의 id만 사용할 수 있으며, id는 중복될 수 없다.
selector{
property : value;
}
.box {
width : 200px;
hegith : 200px;
color : #ffffff;
font-size : 16px;
}
h1(선택자) / color(속성) / red(값)
선택자(selector) : 페이지 위에 있는 많은 요소들 중에 어떤 아이들을 선택할것인지 결정
속성(property) : 어떤 속성들을 꾸며줄지 결정
값(value) : 속성에 해당하는 값
전체 셀렉터 (Universal)
* { style properties }
전체 선택자(*)는 HTML 문서내의 모든 요소를 선택
*{
color : blue;
}
태그 셀렉터 (Type Selector)
element { style properties }
문서 내에서 주어진 유형의 모든 요소를 선택
/* All <a> elements. */
a {
color: red;
}
>> 모든 a태그에 적용
ID 셀렉터 (ID Selector)
선택자 앞에 #태그를 붙여 사용
하나의 문서에 반드시 id는 하나밖에 사용하지 못합니다.
#id_value { style properties }
/* id="demo" 요소 선택 */
#demo {
border: red 2px solid;
}
클래스 셀렉터 (Class Selector)
.class_name { style properties }
클래스 속성(Attribute)의 값을 지정하여 일치하는 요소들을 선택
ID 셀렉터와 다르게 class 셀렉터는 중복될 수 있습니다.
/* All elements with class="spacious" */
.spacious {
margin: 2em;
}
/* All <li> elements with class="spacious" */
li.spacious {
margin: 2em;
}
/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
margin: 2em;
}
속성 선택자 (attribute selector)
주어진 특성의 존재 여부나 그 값에 따라 요소를 선택
[attr]
attr이라는 이름의 특성을 가진 요소를 선택합니다.
[attr=value]
attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다.
[attr~=value]
attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다. attr 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있습니다.
[attr|=value]
attr이라는 특성값을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 -(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택합니다. 보통 언어 서브코드(en-US, ko-KR 등)가 일치하는지 확인할 때 사용합니다.
[attr^=value]
attr이라는 특성값을 가지고 있으며, 첫 시작단어가 value라면 이 요소를 선택합니다.
[attr$=value]
attr이라는 특성값을 가지고 있으며, value 끝나면 요소를 선택합니다.
[attr*=value]
attr이라는 특성값을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다.
[attr operator value i]
괄호를 닫기 전에 i 혹은 I를 붙여주면 값의 대소문자를 구분하지 않습니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)
[attr operator value s] Experimental
괄호를 닫기 전에 s 혹은 S를 붙여주면 값의 대소문자를 구분합니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)
a[href] > href라는 이름의 특성을 가진 a태그만
( = 링크가 있는 것들만)
a[href=”naver.com”] > href라는 특성값이 정확히naver.com 인 a태그
( = 링크 중 naver.com인 것만 )
a[href^=”naver”] > href 라는 특성값이 naver로 시작하는 a태그
( = 링크가 naver로 시작하는 것만)
a[href$=”.com”] > href 라는 특성값이 .com으로 끝나는 a태그
( = 링크가 .com으로 끝나는 것들만 )
[class~=class_name] { style properties }
/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
padding: 2px;
}
>>속성 선택자
class 특성에 logo라는 단어가 포함되어있는 a태그