가상 클래스와 유용한 CSS 선택자

가상 클래스와 유용한 CSS 선택자

CSS에서 가상 클래스(pseudo-class)는 특정 상태에 따라 요소에 스타일을 적용할 수 있게 합니다. 또한 유용한 선택자들을 사용하면 스타일을 더욱 효율적으로 관리할 수 있습니다. 이번 글에서는 가상 클래스와 유용한 CSS 선택자에 대해 알아보겠습니다.

가상 클래스 (Pseudo-class)

가상 클래스는 특정 상태에 있는 요소에 스타일을 적용할 때 사용됩니다. 가상 클래스는 : 기호로 시작하며, 이름이 미리 정해져 있습니다.

• :hover: 사용자가 요소 위에 마우스를 올려놓았을 때 적용됩니다.
• :active: 사용자가 요소를 클릭했을 때 적용됩니다.
• :focus: 사용자가 요소를 포커스했을 때 적용됩니다.
• :visited: 사용자가 방문한 링크에 적용됩니다.

예를 들어, 링크 요소에 다양한 가상 클래스를 적용해보겠습니다.

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: orange;
}

위 예제에서는 링크의 기본 상태, 방문한 상태, 마우스를 올려놓은 상태, 클릭한 상태에 따라 각각 다른 색상이 적용됩니다.

유용한 가상 클래스

• :first-child: 부모 요소의 첫 번째 자식 요소를 선택합니다.
• :last-child: 부모 요소의 마지막 자식 요소를 선택합니다.
• :nth-child(n): 부모 요소의 n번째 자식 요소를 선택합니다.
• :not(selector): 특정 선택자를 제외한 요소를 선택합니다.

p:first-child {
  font-weight: bold;
}

p:last-child {
  color: blue;
}

p:nth-child(2) {
  text-decoration: underline;
}

p:not(.highlight) {
  color: gray;
}

위 예제에서는 첫 번째, 마지막, 두 번째 자식 요소와 특정 클래스를 제외한 모든 p 요소에 스타일을 적용합니다.

Force State

가상 클래스를 테스트할 때 개발자 도구의 "Force State" 기능을 사용할 수 있습니다. 이를 통해 요소가 특정 상태에 있을 때의 스타일을 쉽게 확인할 수 있습니다.

알아두면 유용한 선택자

• 전체 선택자 (Universal Selector): 모든 요소를 선택합니다.

  * {
    margin: 0;
    padding: 0;
  }

• n번째 자식 선택자 (nth-child Selector): 부모 요소의 n번째 자식을 선택합니다.

  .gallery :nth-child(3) {
    border: 1px solid red;
  }
  
  .gallery :nth-child(even) {
    background-color: #f0f0f0;
  }
  
  .gallery :nth-child(odd) {
    background-color: #e0e0e0;
  }
  
  .gallery :first-child {
    font-size: 20px;
  }
  
  .gallery :last-child {
    font-size: 18px;
  }

위 예제에서는 gallery 클래스의 세 번째 자식, 짝수 번째 자식, 홀수 번째 자식, 첫 번째 자식, 마지막 자식에 각각 다른 스타일이 적용됩니다.

선택자 관련 팁

• 선택자는 최대한 단순하게 사용하세요: 복잡한 선택자는 유지보수가 어려워질 수 있습니다.
• 의미 있는 클래스 이름을 사용하세요: 가독성과 유지보수를 위해 의미 있는 클래스 이름을 사용합니다.
• 불필요한 중복을 피하세요: 여러 선택자에 동일한 스타일을 적용할 때는 선택자 목록을 사용합니다.

추천하는 선택자 조합

1. 모든 곳에서 border-box를 사용하고 싶을 때:

   * {
     box-sizing: border-box;
   }

   모든 요소에 box-sizing: border-box;를 적용하여, 요소의 크기를 더 쉽게 관리할 수 있습니다.

2. 같은 클래스지만 변화를 주고 싶을 때:
   품절된 상품의 버튼 스타일을 다르게 하고 싶다면, 클래스 조합을 사용합니다.

   .button.sold-out {
     background-color: gray;
     cursor: not-allowed;
   }

3. 클래스를 넣어 줄 태그가 너무 많을 때:
   공통 클래스를 사용하여 여러 요소에 동일한 스타일을 적용합니다.

   .common-style {
     margin: 10px;
     padding: 5px;
   }

4. 가로 마진을 일정하게 하고 싶을 때:
   세로 마진은 마진 상쇄로 인해 일괄 적용해도 일정하게 되지만, 가로 마진은 중간에 중복 적용될 수 있습니다.

   .element {
     margin-right: 10px;
   }
   .element:first-child {
     margin-left: 10px;
   }

   이 방법은 첫 번째 요소에만 왼쪽 마진을 주고 나머지 요소에 오른쪽 마진을 줌으로써 가로 마진을 일정하게 유지합니다.

결론

가상 클래스와 유용한 CSS 선택자를 잘 활용하면, 더 정교하고 다채로운 스타일링을 구현할 수 있습니다. 가상 클래스는 특정 상태에 따라 스타일을 적용할 수 있게 하며, 유용한 선택자는 다양한 상황에서 효율적으로 스타일을 관리할 수 있게 해줍니다. CSS 선택자를 잘 이해하고 활용하면, 더욱 깔끔하고 일관된 웹 페이지를 만들 수 있습니다.