✨요소 선택자 (Element Selector)
HTML 요소의 이름을 사용하여 요소를 선택한다.
예시: div, p, h1, span
✨클래스 선택자 (Class Selector)
class 속성을 사용하여 특정 클래스를 가진 요소를 선택한다.
예시: .class-name
✨아이디 선택자 (ID Selector):
id 속성을 사용하여 특정 아이디를 가진 요소를 선택한다.
예시: #id-name
✨자손 선택자 (Descendant Selector):
요소의 하위 요소를 선택한다.
예시: .container p
li a {
color: black;👍🏻li태그 안에 있는 모든 a (a만 적용)
✨자식 선택자 (Child Selector):
요소의 직접적인 자식 요소를 선택한다.
예시: .container > p
div > li {
color: white;
}👍🏻div태그 바로 아래 li태그 선택 (li만 적용)
✨인접 선택자 (Adjacent Selector):
특정 요소의 바로 다음에 오는 형제 요소를 선택한다.
예시: h1 + p
h1 + p {
color: red;
}👍🏻h1태그 다음에 오면서 같은 단계에 있는 p태그 선택 (p만 적용)
✨일반 선택자 (General Selector):
특정 요소의 다음에 오는 형제 요소 중 어떤 것이든 선택한다.
예시: h1 ~ p
<h1>제목</h1>
<p>첫 번째 문단</p>
<p>두 번째 문단</p>
<p>세 번째 문단</p>
<h2>소제목</h2>
<p>네 번째 문단</p>👍🏻h1 요소의 바로 다음 형제인 모든 p요소를 선택 (코드4줄까지 선택)
✨속성 선택자 (Attribute Selector):
특정 속성을 가진 요소를 선택한다.
예시: [type="text"]
input[type="text"] {
width: 300px;
color: yellow;
}👍🏻type="text"인 모든 input 선택
✨가상 클래스 선택자 (Pseudo-Class Selector):
특정 상태나 위치에 있는 요소를 선택한다.
✔️:hover:
마우스가 요소 위에 올라가 있는 동안 선택한다.
예시: a:hover는 마우스가 링크 위로 올라갈 때의 스타일을 정의한다.
✔️:active:
요소가 활성화된(active) 동안 선택. 일반적으로 클릭되었을 때의 상태를 가리킨다.
예시: button:active는 버튼이 클릭되었을 때의 스타일을 정의한다.
✔️:focus:
요소가 포커스를 받은(focus) 동안 선택된다. 주로 입력 요소나 링크를 사용자가 선택할 때를 가리킨다.
예시: input:focus는 입력 필드가 포커스를 받았을 때의 스타일을 정의한다.
✔️:first-child:
요소의 첫 번째 자식 요소를 선택한다.
예시: li:first-child는 리스트의 첫 번째 항목을 선택한다.
✔️:last-child:
요소의 마지막 자식 요소를 선택한다.
예시: div:last-child는 div 요소의 마지막 자식 요소를 선택한다.
✔️:nth-child(n):
요소의 n번째 자식 요소를 선택한다. n에는 숫자 또는 수식을 사용할 수 있다.
예시: tr:nth-child(2n)는 테이블의 짝수 번째 행을 선택한다.
✔️:nth-of-type(n):
동일한 유형(태그 이름)의 요소 중에서 n번째 요소를 선택한다.
예시: p:nth-of-type(3)는 문서 내에서 세 번째 p 요소를 선택합니다.
✨가상 요소 선택자 (Pseudo-Element Selector):
요소의 특정 부분을 선택하여 스타일을 적용한다.
✔️::before:
선택한 요소의 내용 이전에 가상 요소를 생성한다.
p::before {
content: "→ ";
font-weight: bold;
}👍🏻p 요소 앞에 화살표와 함께 텍스트를 추가한다.
예를 들어, <p>Hello, world!</p>는 화면에 "→ Hello, world!"로 표시된다.
✔️::after:
선택한 요소의 내용 이후에 가상 요소를 생성한다.
a::after {
content: "(link)";
color: red;
font-size: 12px;
}👍🏻a 링크 뒤에 "(link)" 텍스트를 추가합니다.
예를 들어, <a href="#">Click here</a>는 화면에 "Click here (link)"로 표시된다.
✔️::first-line:
선택한 요소의 첫 번째 줄을 선택한다.
p::first-line {
font-weight: bold;
font-size: 18px;
color: blue;
}👍🏻p 요소의 첫 번째 줄에 대해 글꼴의 굵기를 강조하고, 글꼴 크기를 크게하고, 파란색으로 설정한다.
✔️::first-letter:
선택한 요소의 첫 번째 글자를 선택한다.
h1::first-letter {
font-size: 36px;
color: #ff0000;
}👍🏻h1 요소의 첫 번째 글자에 대해 글꼴 크기를 크게하고, 빨간색으로 설정한다.
