요소 상태에 따라 스타일 지정 - 가상 요소

가상 요소는 내용의 일부만 선택해 스타일을 적용할 때 사용합니다.

2 min read

선택자로도 지정하기 어려운 대상이 있습니다. 예를 들어 몇 번째 항목이라든가 문단의 첫 번째 글자 등의 경우 어떻게 지정해야 할까요? 이럴 때 가상 요소와 가상 클래스를 사용합니다.

가상 요소는 내용의 일부만 선택해 스타일을 적용할 때 사용합니다.

가상 요소

::first-line은 요소의 첫번째 줄을 선택합니다. 예를 들어 다음은 <p> 요소의 첫번째 줄의 글자색을 빨간색으로 만듭니다.

p::first-line {
  color: red;
}

::first-letter는 요소의 첫번째 문자를 선택합니다. 예를 들어 다음은 <p> 요소의 첫번째 문자의 색깔을 빨간색으로 만듭니다.

p::first-letter {
  color: red;
}

::before는 요소의 앞을 선택하여 이미지나 텍스트 등 내용을 추가할 수 있습니다. 예를 들어 다음은 <p> 요소 앞에 ABC라는 단어를 넣고 색을 빨간색으로 만듭니다.

p::before {
  content: "ABC";
  color: red;
}

::after는 요소의 뒤를 선택하여 이미지나 텍스트 등 내용을 추가할 수 있습니다. 예를 들어 다음은 <p> 요소 뒤에 ABC라는 단어를 넣고 색을 빨간색으로 만듭니다.

p::after {
  content: "ABC";
  color: red;
}

::selection은 마우스 드래그 등으로 선택한 텍스트를 선택합니다. 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기를 참고하세요.

사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들거나 웹 요소의 상태에 따라 스타일을 지정할 때 가상 클래스 선택자를 사용합니다.

Copy