가상 클래스와 가상 요소

사용자 동작에 반응하는 가상 클래스

 

- 사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용한다.

• 방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자'
  - 사용자가 아직 방문하지 않은 링크에 스타일을 적용
  - 텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시한다.
  - 링크의 밑줄을 없애거나 색상을 바꾸려면 :link 선택자를 사용한다.
• 방문한 링크에 스타일을 적용하는 ':visited 가성 클래스 선택자'
  - 한 번 이상 방문한 링크에 스타일을 적용
  - 한 번 이상 방문한 텍스트 링크는 보라색이 기본값이다.
  - 이때 사용자가 방문한 텍스트 링크와 색상이 달라지지 않게 하게 하려면 :visited 선택자를 사용해 조절한다.
• 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 ':hover 가상 클래스 선택자'
  - 웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용한다.
  - 이미지 위로 마우스 포인터를 올려놓았을 때 다른 이미지로 바뀌거나, 메인 메뉴 위로 마우스 포인터를 올려놓았을 때 서브메뉴가 나타나는 효과를 만들 수 있다.
• 웹 요소를 활성화했을 때 스타일을 적용하는 ':active 가상 클래스 선택자'
  - 웹 요소의 링크나 이미지 등을 활성화했을 때, 즉 클릭했을 때 스타일을 지정한다.
• 웹 요소에 초점이 맞추어졌을 때 스타일을 적용하는 ':focus 가상 클래스 선택자'
  - 웹 요소에 초점이 맞추어졌을 때 스타일을 적용한다.
  - 텍스트 필드 안에 마우스 포인터를 올려놓거나, 웹 문서에서 Tab을 눌러 입력 커서를 이동했을 때 스타일을 지정한다.

 

요소 상태에 따른 가상 클래스

 

• 앵커 대상에 스타일을 적용하는 ':target 가상 클래스 선택자'
  - 문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때에는 링크를 이용하고, 같은 문서 안에서 다른 위치로 이동할 때에는 앵커를 사용한다.
  - :target 선택자를 사용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있다.
• 요소의 사용 여부에 따라 스타일을 적용하는 ':enabled와 :disabled 가상 클래스 선택자'
  - 해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하려면 :enabled 선택자를 사용
  - 사용할 수 없는 상태일 때 스타일을 지정하려면 :disabled 선택자를 사용
• 선택한 항목의 스타일을 적용하는 ':checked 가상 클래스 선택자'
  - 폼의 라디오 박스나 체크 박스에서 선택된 항목에는 checked라는 속성이 추가된다.
  - checked 속성이 있는 요소의 스타일을 지정할 때 :checked 선택자를 사용하면 편리하다.
• 특정 요소를 제외하고 스타일을 적용하는 ':not 가상 클래스 선택자'
  - 부정의 의미가 있다.
  - not은 '괄호 안에 있는 요소를 제외한'이라는 의미이다.

 

구조 가상 클래스

 

웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용 할 때 사용하는 가상 클래스 선택자이다.

• 특정 위치의 자식 요소 선택하기
  - 요소가 여러 개 나열되어 있는 경우에는 class나 id를 사용하지 않고도 스타일을 지정할 요소가 몇 번째인지를 따져서 스타일을 적용할 수도 있다.
  

  종류	설명
  :only-child	부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택한다.
  A:only-type-of	부모 안에 A 요소가 하나뿐일 때 선택한다.
  :first-child	부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택한다.
  :last-child	부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택한다.
  A:first-of-type	부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택한다.
  A:last-of-type	부모 안에 있는 A 요소 중에서 마지막 요소를 선택한다.
  :nth-child(n)	부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택한다.
  :nth-last-child(n)	부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택한다.
  A:nth-of-type(n)	부모 안에 있는 A 요소 중에서 n번째 요소를 선택한다.
  A:nth-last-of-type(n)	부모 안에 있는 A 요소 중에서 끝에서 n번째 요소를 선택한다

• 수식을 사용해 위치 지정하기
  

  /* div 요소에서 세 번째 자식인 p 요소에 스타일을 적용 */
  div p:nth-child(3)
  
  /* div 요소에서 홀수 번째로 나타나는 자식인 p 요소에 스타일 적용 */
  div p:nth-child(odd), div p:nth-child(2n+1)
  
  /* div 요소에서 짝수 번째로 나타나는 자식인 p 요소에 스타일 적용 */
  div p:nth-child(even), div p:nth-child(2n)​

 

가상 요소

 

- 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다.
- 특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 하기 위한 것
- 가상 요소 이름 앞에 콜론 2개(::)를 붙여서 표시한다.

• 첫 번째 줄, 첫 번째 글자에 스타일을 적용하는 '::first-line 요소, ::first-letter 요소'
  - 지정한 요소의 첫 번째 줄이나 첫 번째 글자에 스타일을 적용할 수 있다.
  - ::first-letter 요소는 해당 요소의 첫 번째 글자를 가리키는데, 첫 번째 글자는 반드시 첫 번째 줄에 있어야 한다.
• 내용 앞뒤에 콘텐츠를 추가하는 '::before 요소, ::after 요소'
  - 지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있다.
  - 요소의 앞뒤에 텍스트나 이미지 등을 추가할 수 있다.