[기본 개념] 4 | (4.2) 가상 클래스와 가상 요소

[기본 개념] 4 | (4.2) 가상 클래스와 가상 요소

1 연결 선택자

2 속성 선택자

3> 가상 클래스와 가상 요소

3 가상 클래스와 가상 요소

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

 

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

 

1 방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자'

 웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다. 텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시된다. 이때 링크의 밑줄을 없애거나 색상을 바꿀 때 :link 선택자를 사용한다.

 

2 방문한 링크에 스타일을 적용하는 ':visited 가상 클래스 선택자'

 웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용한다. 한 번 이상 방문한 텍스트 링크는 보라색이 기본값이다. 이 때 사용자가 방문한 텍스트 링크와 색상이 달라지지 않게 하려면 :visited 선택자를 사용해 조절한다.

 

3 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 ':hover 가상 클래스 선택자'

 :hover 선택자는 웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용한다. 가상 클래스 선택자를 응용하면 이미지 위로 마우스 포인터를 올려놓았을 때 다른 이미지로 바꾸거나, 메인 메뉴 위로 마우스 포인터를 올려놓았을 때 서브메뉴가 나타나는 효과를 만들 수 있다.

 

4 웹 요소를 활성화했을 때 스타일을 적용하는 ':active 가상 클래스 선택자'

 :active 선택자는 웹 요소의 링크나 이미지 등을 활성화했을 때, 즉 클릭했을 때 스타일을 지정한다. 예를 들어 어떤 웹 요소의 링크를 클릭하는 순간의 스타일을 지정할 수 있다.

 

5 웹 요소에 초점이 맞춰졌을 때 스타일을 적용하는 ':focus 가상 클래스 선택자'

 :focus 선택자는 웹 요소에 초점이 맞춰졌을 때 스타일을 적용한다. 예를 들어 텍스트 필드 안에 마우스 포인터를 올려놓거나, 웹 문서에서 TAP을 눌러 입력 커서를 이동했을 때 스타일을 지정한다.

 

1 :link

2 :visited

3 :hover

4 :active

 

(ex. 가상 클래스 선택자 사용해 링크 스타일 적용하기)

 

...
  .navi ul li {
    float : left;
    width : 150px;
    padding : 10px;
  }
  .navi a:link, .navi a:visited {	// 방문한 링크와 방문하지 않은 링크 설정
    display : block;
    font-size : 14px;
    color : #000;
    padding : 10px;
    text-decoration : none;
    text-align : center;
  }
  .navi a:hover, .navi a:focus {	// 마우스 포인터를 올렸을 때와 초점을 맞췄을 때 설정
    background-color : #222;
    color : #fff;
  }
  .navi a:active {	// 마우스 포인터로 클릭했을 때 지정
    background-color : #f00;
  }
</style>
...
  <nav class="navi">
    <ul>
      <li><a href="#">이용 안내</a></li>
      <li><a href="#">객실 소개</a></li>
      <li><a href="#">예약 방법 및 요금</a></li>
      <li><a href="#">예약하기</a></li>
    </ul>
  </nav>
...

 

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

 

 웹 사이트나 애플리케이션 화면에서 요소의 상태에 따라 스타일을 적용할 때 가상 클래스 선택자를 사용한다.

 

앵커 대상에 스타일을 적용하는 ':target 가상 클래스 선택자'

 같은 문서안에서 다른 위치로 이동할 때 앵커를 사용하는데, 이때 :target 선택자를 사용하면 앵커로 연결된 부분의 스타일을 쉽게 적용할 수 있다.

 

(ex. 앵커 대상에 스타일 적용하기)

 

...
  #intro:target {
    background-color : #0069e0;
    color : #fff;
  }
</style>
...
  <nav class="navi">
    <ul>
      <li><a href="#intro">이용 안내</a></li>
      <li><a href="#room">객실 소개</a></li>
      <li><a href="#reservation">예약 방법 및 요금</a></li>
      <li><a href="ps-2.html">예약하기</a></li>
    </ul>
  </nav>
  <div id="intro" class="contents">
    <h2>이용 안내</h2>
    ...
  </div>
  <div id="room" class="contents">
    <h2>객실 소개</h2>
    ...
  </div>
  ...
...

 

요소의 사용 여부에 따라 스타일을 적용하는 ':enabled와 :disabled 가상 클래스 선택자'

 해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하려면 :enabled 선택자를 사용하고, 사용할 수 없는 상태일 때 스타일을 지정하려면 :disabled 선택자를 사용한다.

 

 

선택한 항목의 스타일을 적용하는 ':checked  가상 클래스 선택자'

 폼의 라디오 박스나 체크 박스에서 선택된 항목에는 checked라는 속성이 추가되는데 이 속성이 있는 요소의 스타일을 지정할 때 :checked 선택자를 사용한다. 

 

(ex. 선택된 라디오 버튼의 스타일 적용하기)

 

...
  #signup input:checked + label {	
  // input 요소에 checked 속성이 추가됐을 때 label 요소의 스타일
  // <input>과 <label> 태그가 형제관계이므로 + 선택자 사용
    color : red;
    font-weight : bold;
  }
</style>
...
  <ul>
    <li>
      <input type="radio" name="room" id="basic">
      <label for="basic">기본형(최대 2인)</label>
    </li>
    <li>
      <input type="radio" name="room" id="family">
      <label for="family">가족형(최대 8인)</label>
    </li>
  </ul>
...

 

특정 요소를 제외하고 스타일을 적용하는 ':not 가상 클래스 선택자'

 :not 선택자에서 not은 '괄호 안에 있는 요소를 제외한' 이란 의미이다. 스타일을 적용하려고 하는 필드를 나열하는 것보다 적용하지 않는 필드가 더 적기 때문에 :not 선택자를 사용하는 것이 더 낫다.

 

(ex. not 선택자로 라디오 필드를 제외한 텍스트 필드 선택하기)

 

...
  #signup input:not([type=radio]) {
    border : 1px solid #ccc;
    border-radius : 3px;
    padding : 5px;
    width : 200px;
  }
...

 

구조 가상 클래스

 

 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용한다.

 

특정 위치의 자식요소 선택하기

종류	설명
: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 class="contents">라는 태그 안에 <h2>, <p>, <p>, <h2>, <h2>, <p>태그가 순서대로 포함되어 있고 부모요소는 contents이다.

 

 :nth-child(3) 선택자는 contents의 모든 자식 요소 중에서 3번째인 p요소를 선택하고, p:nth-of-type(3) 선택자는 contents의 p 자식요소 중에서 3번째 <p>요소(가장 마지막에 있는 요소)를 선택한다.

 

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

 1, 3, 5번째처럼 위치가 계속 바뀔 때, 규칙을 찾아내서 an+b처럼 수식을 사용할 수도 있다.

 

 이때 n값은 0부터 시작하며, 홀수 번째에서 스타일을 줄 때는 :nth-child(odd), 짝수 번째에서 스타일을 줄 때는 :nth-child(even)을 사용한다.

 

가상 요소

 

 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다. 불필요한 태그를 사용하지 않아도 되며, 가상 클래스와 구별하도록 가상 요소 이름 앞에 콜론 2개(::)를 붙인다.

 

첫 번째 줄, 첫 번째 글자에 스타일을 적용하는 '::first-line 요소, ::first-letter 요소'

 ::first-line 요소와 ::first-letter 요소를 사용하면 첫 번째 줄, 첫 번째 글자에 스타일을 적용할 수 있다.

 

 ::first-letter 요소는 해당 요소의 첫 번째 글자를 가리키는데 이때 <p>태그안에 <br>태그가 있어 첫 번째 글자가 첫 줄에 없으면 안 되고, 반드시 첫 줄에 있어야 한다.

 

내용 앞뒤에 콘텐츠를 추가하는 '::before 요소, ::after 요소'

 ::before 요소와 ::after 요소를 사용하면 지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있다.

 

(ex. 가상 요소를 사용해 스타일 적용하기)

 

...
  li.new::after {
    content : "NEW!!";
    font-size : x-small;
    padding : 2px 4px;
    margin : 0 10px;
    border-radius : 2px;
    background : #f00;
    color : #fff;
  }
</style>
...
<div class="container">
  <h1>제품 목록</h1>
  <ul>
    <li class="new">제품 A</li>
    <li>제품 B</li>
    <li>제품 C</li>
    <li class="new">제품 D</li>
  </ul>
</div>
...

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)