선택자(selector)
1. type 선택자
- HTML 요소의 태그 이름을 이용해 스타일을 적용합니다.
- 예를 들어, p 선택자는 모든 <p> 태그에 스타일을 적용합니다.
2. id 선택자
- # 기호를 사용하여 정의됩니다.
- ID 선택자는 특정 요소의 ID 속성을 기반으로 스타일을 적용합니다.
- 예를 들어, #wrap는 <div id="wrap"> 요소를 선택합니다.
3. class 선택자
- .(마침표) 기호를 사용하여 정의합니다.
4. 전체 선택자
- * 기호로 표현합니다.
- 문서 내의 모든 요소를 선택하며, 다른 선택자와 함께 사용하여 특정 요소를 선택할 때 유용합니다.
5. 하위 선택자
- 하위 선택자는 부모 요소 안에 있는 자식 요소를 선택하는 선택자입니다.
- 하위 선택자는 부모 요소와 자식 요소 사이에 공백을 사용하여 표시됩니다.
- 예를 들어, div p는 <div> 요소 내부에 있는 모든 <p> 요소를 선택합니다.
6. 자식 선택자.
- CSS에서 자식 선택자는 부모 요소의 직접적인 자식 요소를 선택하는 방법입니다.
- 자식 선택자는 > 기호를 사용하여 표현됩니다. 예를 들어, ul > li는 ul 요소의 직접 자식인 li 요소를 선택합니다.
7. 인접 선택자
- 인접 선택자는 형제 요소 중 첫 번째 요소 바로 다음에 오는 요소를 선택합니다.
- 예를 들어, p + ul은 p 요소 바로 다음에 오는 ul 요소를 선택합니다.
8. 형제 선택자
- 형제 선택자는 선택한 요소와 관련된 요소 중 특정 위치에 있는 요소를 선택할 때 사용됩니다.
- 형제 선택자에는 두 가지 종류가 있습니다.
- X + Y : X 요소 바로 다음에 오는 Y 요소를 선택합니다.
- X ~ Y : X 요소 다음에 오는 모든 Y 요소를 선택합니다.
- 예를 들어, p + span 선택자는 p 요소 다음에 오는 span요소를 선택하고, h2 ~ p 선택자는 h2 요소 다음에 오는 모든 p 요소를 선택합니다.
9. 그룹 선택자
- 그룹 선택자 (Group Selector)는 여러 선택자를 그룹으로 묶는 기능입니다.
- 보통 선언 블록의 명령문이 서로 같아서 중복될 때 코드를 줄이는 방법입니다.
10. 속성 선택자
- CSS 속성 선택자 의미는 HTML 태그에서 src, href, style과 같은 속성을 선택자로 지정할 수 있는 기능을 말합니다.
- = 기호를 중심으로 *, ~ 등의 특수문자를 조합해서 종류가 나눠집니다.
-속성 선택자 (Attribute Selector)는 HTML 태그의 속성명과 속성값을 선택자로 지정할 수 있는 기능입니다.
- 속성 선택자에서는 [ ], ~=, *=, |=, ^=, $= 등의 기호를 사용합니다.
11. 가상클래스 선택자
- 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다.
- :link - 방문한 적이 없는 링크
- :visited - 방문한 적이 있는 링크
- :hover - 마우스를 롤오버 했을 때
- :active - 마우스를 클릭했을 때
- :focus - 포커스 되었을 때 (input 태그 등)
- :first - 첫번째 요소
- :last - 마지막 요소
- :first-child - 첫번째 자식
- :last-child - 마지막 자식
- :nth-child(2n+1) - 홀수 번째 자식
- 위는 대표적인 가상 클래스의 예시이며 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면 HTML, CSS 및 JavaScript의 코드를 효과적으로 줄일 수 있습니다.
12. 가상요소 선택자
- 가상 클래스
- 여러 태그 중에서 원하는 태그를 선택하기 위해 사용하는 선택자
- 자주 사용하는 가상 클래스 종류 :hover / :actuve / :forcus /:visited
가상 요소 선택자(가상 클래스 선택자) ::before, ::after
- 내용의 앞과 뒤에 콘텐츠를 추가하고, 이 콘텐츠는 content="" 라는 속성으로 정의합니다.
- 특정 요소의 앞(::before)이나 뒤(::after)에 지정한 내용(텍스트 또는 이미지)을 추가할 수 있습니다.
- 가성 요소는 인라인 요소입니다.
- ::before 마크업 : 태그 또는 클래스명::before {추가 콘텐츠, style}
- ::after 마크업 : 태그 또는 클래스명::after {추가 콘텐츠, style}
13. 종속 선택자
- 종속 선택자는 type 선택자와 id 선택자, class 선택자가 결합된 형태입니다.
<p id="atet"> 선택자의 다양한 표현 </p>- 마크업이 위와 같은때 #atxt 는 같은 선택자입니다. 다만 이후에 나오겠지만 둘의 우선순위는 다릅니다.
- p#atxt가 #arxt 보다 높은 우선순위를 가지게 됩니다.
14. 선택자의 우선순위
같은 선택자가 여러 CSS 명령을 중복으로 받으면 만약 우선순위가 같은 선택자라면 나중에 기술한 것이 먼저 기술한 것보다 우선순위가 높습니다.
6. 부모 요소에 의해 상속된 속성