CSS | CSS 선택자 : 기본 선택자, 복합 선택자, 동작 기반 가상 클래스 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자

 

⭕ CSS | CSS 선택자 : 기본 선택자, 복합 선택자, 동작 기반 가상 클래스 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자

➡️ 기본 선택자

1. 전체 선택자 (*)
   • 모든 HTML 요소
   • * { margin: 0; padding: 0; }
     • 모든 요소의 마진과 패딩을 0으로 적용함
2. 태그 선택자
   • 지정된 태그를 의미
   • p { font-size: 16px; }
     • 모든 <p> 태그에 16픽셀의 글꼴 크기를 적용함
3. 클래스 선택자 (.)
   • 지정된 클래스를 가진 모든 요소
   • .menu { background-color: blue; }
     • menu 클래스에 파란색 배경을 적용함
4. ID 선택자 (#)
   • 특정 ID를 가진 단일 요소
   • 자주 사용하지는 않음
   • #header { height: 100px; }
     • header ID에 높이를 100픽셀로 적용함

 

[프론트엔드/CSS] - CSS | 요소(Element)와 클래스(Class)의 차이

CSS | 요소(Element)와 클래스(Class)의 차이

 

 

 

➡️ 복합 선택자

1. 일치 선택자
   • 두 선택자를 연결하여, 두 조건을 동시에 만족하는 요소
   • div.box { border: 1px solid black; }
     • <div> 태그이며, 클래스 box를 포함하는 모든 요소에 검은색 테두리를 적용함
2. 자식 선택자 (>)
   • 지정한 요소의 직접적인 자식 요소
   • ul > li { color: red; }
     • <ul>의 직접적인 자식인, <li>에 적색을 적용함
3. 하위 선택자 (공백)
   • 지정한 요소의 모든 하위 요소
   • nav a { font-style: italic; }
     • <nav> 내부의 모든 <a> 요소에 이탤릭체를 적용함
4. 인접 형제 선택자 (+)
   • 지정한 요소 바로 다음의 형제 요소
   • h1 + p { margin-top: 0; }
     • <h1> 바로 다음의 <p>에 상단 마진을 적용함
5. 일반 형제 선택자 (~)
   • 지정한 요소 다음의 모든 형제 요소
   • h1 ~ p { color: green; }
     • <h1> 다음의 모든 <p>에 초록색을 적용함

 

➡️ 동작 기반 가상 클래스 선택자

• 동작은 주로 자바스크립트로 제어되지만, CSS를 통해서도 일부 기능을 제어할 수 있음

---

1. :hover
   • 요소 위에 마우스 커서가 위치하는 동안
   • button:hover { background-color: grey; }
     • <button> 태그 위에 마우스 커서가 위치하는 동안, 배경색을 회색으로 적용함
2. :active
   • 요소를 마우스로 클릭하고 있는 동안
   • a:active { background-color: grey; }
     • <a> 링크를 클릭하고 있는 동안, 배경색을 회색으로 적용함
3. :focus
   • 요소가 포커스를 받는 동안 (입력 필드, 선택 필드, 텍스트 영역, 혹은 **tabindex**가 -1 이상인 요소)
   • input:focus { background-color: grey; }
     • <input> 필드가 포커스를 받는 동안, 배경색을 회색으로 적용함

 

➡️ 가상 클래스 선택자

1. :first-child
   • 부모 요소의 첫 번째 자식 요소
   • li:first-child { font-weight: bold; }
     • 모든 <li> 요소 중 첫 번째 요소만 글꼴을 굵게 적용함
2. :last-child
   • 부모 요소의 마지막 자식 요소
   • li:last-child { font-weight: bold; }
     • 모든 <li> 요소 중 마지막 요소만 글꼴을 굵게 적용함
3. :nth-child(n)
   • 부모 요소의 n번째 자식 요소
   • li:nth-child(2) { font-weight: bold; }
     • 두 번째 <li> 요소의 글꼴을 굵게 적용함
4. :not
   • 지정된 조건을 만족하지 않는 모든 요소
   • div:not(.highlight) { opacity: 0.8; }
     • .highlight 클래스가 없는 모든 <div> 요소의 투명도를 0.8로 적용함

 

➡️ 가상 요소 선택자

• 요소를 실제로 생성하지 않고도, 콘텐츠의 일부로 스타일을 추가할 수 있음
• 인라인 요소로 처리되지만, display 속성을 변경하여 블록 요소처럼 가로 및 세로 높이를 조정할 수 있음

---

1. ::before:
   • 특정 요소의 내용 전, 콘텐츠를 삽입하고 스타일을 적용함
   • p::before { content: "시작: "; color: red; }
     • 모든 <p> 요소의 텍스트 시작 부분에 "시작: "이라는 텍스트를 삽입함
2. ::after:
   • 특정 요소의 내용 후, 콘텐츠를 삽입하고 스타일을 적용함
   • p::after { content: " 끝."; color: red; }
     • 모든 <p> 요소의 텍스트 끝 부분에 " 끝."이라는 텍스트를 삽입함

 

➡️ 속성 선택자

1. [attr]
   • 특정 속성(attr)을 가진 모든 요소
   • [disabled] { background-color: yellow; }
     • disabled 속성을 가진 모든 요소의 배경색을 노란색으로 적용함
2. [attr=value]
   • 속성(attr)의 값이 value와 일치하는 요소
   • [type="text"] { background-color: yellow; }
     • type 속성의 값이 "text"인 요소의 배경색을 노란색으로 적용함
3. [attr^=value]
   • 속성(attr)의 값이 value로 시작하는 요소
   • [id^="prefix-"] { background-color: yellow; }
     • id 속성의 값이 "prefix-"로 시작하는 모든 요소의 배경색을 노란색으로 적용함
4. [attr$=value]
   • 속성(attr)의 값이 value로 끝나는 요소
   • [href$=".pdf"] { background-color: yellow; }
     • href 속성의 값이 ".pdf"로 끝나는 모든 링크의 배경색을 노란색으로 적용함