[CSS] Pseudo-element 설명과 Pseudo-class 와 차이

Pseudo-element

 

특정 HTML 요소의 안쪽 일부만 스타일을 주고 싶을 때 Pseudo-element 셀렉터를 이용4

내 안에 있는 특정 부분만 스타일링 하고싶을 때 사용

---

Pseudo-class 와 차이

 

pseudo-element와 pseudo-class는

CSS에서 특정 요소의 부분이나 상태를 선택하고 스타일을 적용하는 데 사용됩니다

Pseudo-class (가상 클래스)

Pseudo-class는 HTML 요소의 특정 상태나 상황을 선택하는 데 사용됩니다.

예를 들어, 마우스를 올렸을 때, 방문한 링크,

또는 첫 번째 자식 요소 등 특정 상황에서 스타일을 적용할 수 있습니다.

예시:

• :hover: 요소에 마우스를 올렸을 때
• :focus: 요소가 포커스를 받았을 때 (주로 입력 필드나 버튼)
• :nth-child(n): n번째 자식 요소

Pseudo-element (가상 요소)

Pseudo-element는 HTML 요소의 특정 부분을 선택하는 데 사용됩니다.

요소의 특정 부분을 생성하여 스타일을 적용할 수 있습니다.

예를 들어, 첫 글자, 첫 줄, 또는 요소의 내용 앞이나 뒤에 추가 콘텐츠를 생성하는 데 사용됩니다.

예시:

• ::before: 요소의 내용 앞에 가상 요소를 생성
• ::after: 요소의 내용 뒤에 가상 요소를 생성
• ::first-line: 요소의 첫 번째 줄
• ::first-letter: 요소의 첫 글자

---

주요 차이점 요약

• Pseudo-class는 요소의 상태나 특정 조건을 기반으로 스타일을 적용합니다.
  • 예: :hover, :focus, :nth-child(n)
• Pseudo-element는 요소의 특정 부분이나 새로운 부분을 생성하여 스타일을 적용합니다.
  • 예: ::before, ::after, ::first-letter

Pseudo-class는 조건을 나타내고,

Pseudo-element는 요소의 특정 부분을 선택하거나 생성한다는 점을 기억하면

쉽게 이해할 수 있습니다.

---

Pseudo-element를 활용

 

- CSS 만으로 버튼에 마우스 올리면 배경 어둡게하기 https://codepen.io/css-tricks/pen/dxyfA

- CSS만으로 3D 느낌 리본모양만들기 https://codepen.io/team/css-tricks/pen/mVZGKa

- ol 태그의 숫자 스타일링하기 https://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/

- table 반응형으로 만드는 여러가지 방법 https://css-tricks.com/responsive-data-tables/

---

pseudo-element 종류

::before

/* 각 항목 앞에 화살표 추가 */
li::before {
  content: '→ ';
  color: blue;
}

설명: 선택한 요소의 콘텐츠 앞에 가상 요소를 생성합니다.

content 속성을 사용하여 텍스트나 이미지를 추가할 수 있습니다.

---

::after

/* 각 항목 뒤에 느낌표 추가 */
li::after {
  content: '!';
  color: red;
}

설명: 선택한 요소의 콘텐츠 뒤에 가상 요소를 생성합니다.

content 속성을 사용하여 텍스트나 이미지를 추가할 수 있습니다.

---

::first-letter

/* 첫 글자를 대문자와 색상 변경 */
p::first-letter {
  font-size: 2em;
  color: green;
}

설명: 선택한 요소의 첫 글자를 선택합니다.

이 pseudo-element는 주로 첫 글자를 강조하는 데 사용됩니다.

---

::first-line

/* 첫 번째 줄을 굵게 */
p::first-line {
  font-weight: bold;
}

설명: 선택한 요소의 첫 번째 줄을 선택합니다.

주로 텍스트 블록의 첫 번째 줄을 스타일링하는 데 사용됩니다.

---

::selection

/* 선택된 텍스트의 배경색과 색상을 변경 */
::selection {
  background: yellow;
  color: black;
}

설명: 사용자가 텍스트를 선택했을 때 선택된 텍스트의 스타일을 지정합니다.

---

::placeholder

/* placeholder 텍스트의 색상 변경 */
input::placeholder {
  color: grey;
}

설명: 입력 필드(<input>, <textarea>)의 placeholder 텍스트를 스타일링하는 데 사용됩니다.

---

::marker

/* 리스트 아이템의 마커 색상 변경 */
li::marker {
  color: red;
}

설명: 리스트 아이템의 마커(기호)를 선택합니다.

주로 리스트 스타일링에 사용됩니다.

---

::backdrop

/* 활성화된 dialog의 배경 스타일링 */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

설명: <dialog> 요소가 활성화되었을 때 배경을 스타일링하는 데 사용됩니다.

---

::part

/* Shadow DOM의 특정 부분 스타일링 */
my-element::part(button) {
  color: blue;
}

설명: Shadow DOM의 특정 부분을 스타일링할 수 있게 합니다.

part 속성을 사용하여 Shadow DOM 내부의 특정 부분을 선택할 수 있습니다.

---

::cue

/* 비디오 텍스트 트랙의 특정 큐 스타일링 */
::cue {
  color: yellow;
  background: black;
}

설명: 웹 비디오에서 텍스트 트랙의 특정 큐를 스타일링하는 데 사용됩니다.