221122 화요일
test 12,13,14,15
ex 18
2.속성 선택자
1. [속성] : 선택(조건)
태그[속성]{ ... }- HTML 태그를 작성할 때 여러가지 속성을 함께 사용하는데 그 속성값에 따라 원하는 요소를 선택할 때 사용한다.
ex) a요소 중에서 href 속성이 있는 요소를 선택
a[href]{
color : red;
}2. [속성=속성값]
태그[속성=속성값]{ ... }- 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용한다.
ex) a요소 중에서 target 속성값이 '_blank'인 것만 선택
a[target=_blank]{
background-color: yellow;
}3. [속성 ^= 값] : 속상값으로 시작하는 속성요소
태그[속성^=속성값]{ ... }- 속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾을 때 사용한다.
a[title ^= m]{
background-color: pink;
}
→ ex) 속성값 "menu"에 적용이 된다.4. [속성 $= 값] : 속성값으로 끝나는 속성요소
태그[속성$=속성값]{ ... }- 지정한 속성값으로 끝나는 요소를 찾을 때 사용한다.
a[href $= png]{
background-color: skyblue;
}
→ ex) 속성값 "mic.png"에 적용이 된다.5. [속성 *= 값] : 속성값으로 포함하는 속성요소
태그[속성*=속성값]{ ... }- 속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있을 때 사용한다.
a[href *= st]{
background-color: purple;
}
→ ex) 속성값 "test1.html"에 적용이 된다. 6. [속성 ~= 값] : 속성값으로 단어별 포함하는 속성요소
태그[속성~=값]{ ... }- 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택한다.
a[class ~= button]{
background-color: green;
}
→ button값과 정확히 일치하는 요소만 선택 O
flat-button 이나 buttons처럼 button 외에 다른 글자가 속성값에 포함되어 있다면 선택 X7. [속성 |= 값] : 속성값으로 단어별(하이픈) 포함하는 속성요소
태그[속성|=값]{ ... }- 특정 속성값이 포함된 속성에 스타일을 적용한다.
a[class |= us]{
background-color: blue;
}✔ 그렇다면 6. [속성 ~= 값]과 7. [속성 |= 값]은 뭐가 다를까?
→ [속성 ~= 값] 지정한 값과 정확하게 일치하는 단어만!
→ [속성 |= 값] 지정한 값과 정확하게 일치하는 단어 + 하이픈(-)으로 연결된 단어도 선택!
3. 가상클래스와 가상요소
사용자 동작에 반응하는 가상클래스
- 사용자 동작에 반응하는 가상 클래스 : 사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶을 때 쓰는 것이 가상클래스 선택자이다.
1. :link
- 웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다.
- 텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시
→ 링크의 밑줄을 없애거나 색상 변경할 때 사용
2. :visited
- 웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용한다.
- 한 번 이상 방문한 텍스트 링크는 기본적으로 보라색
→ 사용자가 방문한 텍스트 링크와 색상이 달라지지 않게 할 때 사용
태그:link, 태그:visited{
스타일 규칙
}3. :hover
- 웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용한다.
태그:hover{
스타일 규칙
} 4. :active
- 웹 요소의 링크나 이미지등을 클릭했을 때 스타일을 적용한다.
태그:active {
스타일 규칙
}요소 상태에 따른 가상클래스
5. :target
- 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 적용한다.
(앵커: 페이지가 긴 웹문서에서 특정요소를 클릭하면 그 위치로 한번에 이동하도록 도와주는 기능이다.)
태그:target{
스타일 규칙
}6. :enabled
- 해당 요소가 사용할 수 있는 상태일 때 스타일을 지정한다.
태그:enabled{
스타일 규칙
}7. :disabled
- 해당 요소가 사용할 수 없는 상태일 때 스타일을 지정한다.
태그:disabled{
스타일 규칙
}8. :checked
- checked 속성이 있는 요소의 스타일을 지정할 때 사용한다.
- 'input' 과 'label' 태그가 형제 관계이므로 +선택자를 사용한다.
input:checked + label{
스타일 규칙
}9. :not
- 괄호에 있는 요소를 제외하고 스타일을 적용한다.
태그:not([href ^= m]){
스타일 규칙
}