CSS 구조 가상 클래스란?

 

CSS 구조 가상 클래스란?

CSS 구조 가상 클래스는 HTML 문서의 구조를 기반으로 특정 요소를 선택하여 스타일을 적용할 수 있도록 해주는 기능입니다. 즉, 요소의 위치나 형제 관계 등을 기준으로 스타일을 지정할 수 있다는 의미입니다.

왜 사용할까요?

• 중복된 코드 감소: 반복적인 스타일을 줄여 코드를 간결하게 만들 수 있습니다.
• 유지보수 용이: 구조가 변경될 때 스타일을 한 번에 수정할 수 있어 편리합니다.
• 선택적 스타일링: 특정 위치에 있는 요소에만 스타일을 적용하여 디자인의 유연성을 높일 수 있습니다.

주요 구조 가상 클래스

• :first-child: 부모 요소의 첫 번째 자식 요소
• :last-child: 부모 요소의 마지막 자식 요소
• :nth-child(n): 부모 요소의 n번째 자식 요소
• :nth-last-child(n): 부모 요소의 뒤에서 n번째 자식 요소
• :only-child: 부모 요소의 유일한 자식 요소
• :empty: 내용이 없는 요소
• :not(selector): 특정 선택자에 해당하지 않는 요소

예제: 목록 스타일링

HTML

<ul>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ul>

코드를 사용할 때는 주의가 필요합니다.

 

CSS

ul li:first-child {
  color: blue;
}

ul li:last-child {
  font-weight: bold;
}

ul li:nth-child(odd) {
  background-color: lightgray;
}

코드를 사용할 때는 주의가 필요합니다.

 

실행 결과:

• 첫 번째 항목은 파란색으로 표시됩니다.
• 마지막 항목은 굵은 글씨로 표시됩니다.
• 홀수 번째 항목은 밝은 회색 배경을 가집니다.

예제: 체크박스 스타일링

HTML

<form>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">첫 번째 체크박스</label>
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">두 번째 체크박스</label>
</form>

코드를 사용할 때는 주의가 필요합니다.

 

CSS

input[type="checkbox"]:checked + label {
  text-decoration: line-through;
}

코드를 사용할 때는 주의가 필요합니다.

 

실행 결과:

• 체크박스를 선택하면 해당 라벨에 텍스트 취소선이 추가됩니다.

더 많은 예제와 활용

• 네비게이션 메뉴: 현재 활성화된 메뉴 항목에 다른 스타일을 적용할 수 있습니다.
• 테이블 스타일링: 짝수 행과 홀수 행에 다른 배경색을 적용할 수 있습니다.
• 카드형 레이아웃: 카드의 첫 번째와 마지막에 특별한 스타일을 적용할 수 있습니다.

주의할 점

• 구조 가상 클래스는 HTML 문서의 구조에 의존하기 때문에, 구조가 변경되면 스타일도 함께 수정해야 합니다.
• 너무 복잡한 선택자는 코드 가독성을 저하시킬 수 있으므로 적절하게 사용해야 합니다.

결론

CSS 구조 가상 클래스는 웹 페이지의 디자인을 더욱 세련되고 효율적으로 만들 수 있는 강력한 도구입니다. 다양한 예제를 통해 연습하고, 자신만의 스타일을 만들어 보세요.

 

 

 

:first-child

• 설명: 부모 요소의 첫 번째 자식 요소를 선택합니다.
• 예제:
  HTML

  <ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
  </ul>
  

  코드를 사용할 때는 주의가 필요합니다.

   
  CSS

  ul li:first-child {
    color: blue;
  }
  

  코드를 사용할 때는 주의가 필요합니다.

   
• 실행 결과: 첫 번째 리스트 항목의 글자 색이 파란색으로 변경됩니다.

:last-child

• 설명: 부모 요소의 마지막 자식 요소를 선택합니다.
• 예제: 위의 HTML 코드를 사용하고 CSS를 다음과 같이 변경합니다.
  CSS

  ul li:last-child {
    font-weight: bold;
  }
  

  코드를 사용할 때는 주의가 필요합니다.

   
• 실행 결과: 마지막 리스트 항목의 글자 굵기가 변경됩니다.

:nth-child(n)

• 설명: 부모 요소의 n번째 자식 요소를 선택합니다. n에는 숫자 또는 키워드(even, odd)를 사용할 수 있습니다.
• 예제: 위의 HTML 코드를 사용하고 CSS를 다음과 같이 변경합니다.
  CSS

  ul li:nth-child(odd) {
    background-color: lightgray;
  }
  

  코드를 사용할 때는 주의가 필요합니다.

   
• 실행 결과: 홀수 번째 리스트 항목의 배경색이 밝은 회색으로 변경됩니다.

:nth-last-child(n)

• 설명: 부모 요소의 뒤에서 n번째 자식 요소를 선택합니다.
• 예제: 위의 HTML 코드를 사용하고 CSS를 다음과 같이 변경합니다.
  CSS

  ul li:nth-last-child(2) {
    text-decoration: underline;
  }
  

  코드를 사용할 때는 주의가 필요합니다.

   
• 실행 결과: 뒤에서 두 번째 리스트 항목에 밑줄이 그어집니다.

:only-child

• 설명: 부모 요소의 유일한 자식 요소를 선택합니다.
• 예제:
  HTML

  <div>
    <p>나는 유일한 자식입니다.</p>
  </div>
  

  코드를 사용할 때는 주의가 필요합니다.

   
  CSS

  div p:only-child {
    font-size: 20px;
  }
  

  코드를 사용할 때는 주의가 필요합니다.

   
• 실행 결과: p 태그의 글자 크기가 20px로 변경됩니다.

:empty

• 설명: 내용이 없는 요소를 선택합니다.
• 예제:
  HTML

  <div>
    <p>내용이 있는 요소</p>
    <span></span> </div>
  

  코드를 사용할 때는 주의가 필요합니다.

   
  CSS

  div span:empty {
    border: 1px solid red;
  }
  

  코드를 사용할 때는 주의가 필요합니다.

   
• 실행 결과: 내용이 없는 span 태그에 빨간색 테두리가 생깁니다.

:not(selector)

• 설명: 특정 선택자에 해당하지 않는 요소를 선택합니다.
• 예제: 위의 HTML 코드를 사용하고 CSS를 다음과 같이 변경합니다.
  CSS

  div p:not(:first-child) {
    color: gray;
  }
  

  코드를 사용할 때는 주의가 필요합니다.

   
• 실행 결과: 첫 번째 p 태그를 제외한 나머지 p 태그의 글자 색이 회색으로 변경됩니다.

 

추가 설명 및 활용 예시

• 복합 선택자: 다른 선택자와 조합하여 더욱 세밀하게 스타일을 지정할 수 있습니다. 예를 들어, ul li:first-child:hover는 첫 번째 리스트 항목에 마우스를 올렸을 때 적용되는 스타일을 정의합니다.
• 동적 콘텐츠: 자바스크립트를 이용하여 요소에 클래스를 동적으로 추가하거나 제거하여 가상 클래스를 활용할 수 있습니다.
• 반응형 디자인: 화면 크기에 따라 다른 스타일을 적용할 때 유용하게 사용됩니다.

주의:

• 구조 가상 클래스는 요소의 구조적인 위치에 따라 선택하기 때문에, HTML 구조가 변경되면 스타일이 예상치 못하게 변경될 수 있습니다.
• 너무 복잡한 선택자는 코드 가독성을 저하시킬 수 있으므로 적절하게 사용해야 합니다.