가상 클래스와 가상 요소

1. UI 요소 상태에 따른 가상 클래스

• 웹 사이트나 앱 화면을 디자인할 때 웹 요소의 상태에 따라 스타일을 지정하기 위해 UI 요소 상태에 따른 가상 클래스를 사용합니다.

 

:enabled 와 :disabled 가상 클래스 선택자

• 해당 요소가 사용 가능한 상태일 때의 스타일을 지정하려면 :enabled 클래스를 사용하고 해당 요소가 사용 불가능한 상태일 때의 스타일을 지정하려면 :disabled 클래스를 사용합니다.
• 예를 들어 여러 줄의 텍스트를 입력할 수 있는 텍스트 영역 필드를 게시판 입력 화면으로 사용할 때는 enabled 상태이지만 회원 약관 등을 보여 줄 때는 사용자가 내용을 보기만 해야 하므로 disabled 상태로 만들어야 합니다.

 

:checked 가상 클래스 선택자

• 라디오 박스나 체크 박스에서 사용자가 해당 항목을 선택했을 때(체크했을 때)의 스타일을 지정합니다.

2. 그 외 가상 클래스

:taget 가상 클래스 선택자

• 웹 문서에서 같은 사이트의 페이지나 다른 사이트의 페이지로 이동할 때 링크(link)를 이용하고 같은 문서 안에서 다른 위치로 이동할 때는 앵커(anchor)를 이용합니다. 이때 :taget 선택자를 이용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 지정할 수있습니다.

 

:not 가상 클래스 선택자

• :not 선택자에서 not은 '괄호 안에 있는 요소를 제외한'이라는 의미입니다.
• 예를 들어 p:not(#ex) {color:blue} 일 때 #ex가 아닌 모든 p요소에서의 글자 색을 파란 색으로 지정하는 스타일입니다.

3. 가상 요소

• 가상 클래스 선택자가 여러 태그 중에서 원하는 태그를 선택하기 위해 사용하는 선택자라면 가상 요소는 내용의 일부만 선택해 스타일을 적용할 때 사용합니다.
• 가상 요소는 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 두 개(::)를 붙여 표시합니다.
  (가상 요소 앞에 콜론 하나(:)를 붙여도 브라우저에서 가상 요소로 인식합니다)

 

::first-line 요소와 ::first-letter 요소

• ::first-line 요소는 지정한 요소의 첫 번째 줄의 스타일을 지정할 수 있으며 ::first-letter 요소는 지정한 요소의 첫 번째 글자의 스타일을 지정할 수 있습니다.
• ::first-letter 요소 사용시 첫 번째 글자는 반드시 첫 번째 줄에 있어야 합니다. 만약 <p>태그안에 <br> 태그가 있어 첫 번째 글자가 첫 번째 줄에 없을 경우, 적용할 수 없습니다.

 

::before, ::after 요소

• ::before 요소는 특정 요소의 내용 앞에 지정한 내용을 넣을 수 있으며 ::after 요소는 특정 요소의 내용 뒤에 지정한 내용을 넣을 수 있습니다.
• 즉 요소의 앞뒤에 텍스트나 이미지 등을 추가할 수 있습니다.