is 및 where 선택기 익히기: 동적 및 대화형 CSS 레이아웃 만들기-CSS 튜토리얼-php.cn

is 및 where 선택기 익히기: 동적 및 대화형 CSS 레이아웃 만들기

PHPz

풀어 주다： 2023-09-08 16:55:57

원래의

873명이 탐색했습니다.

is 및 where 선택기 익히기: 동적 및 대화형 CSS 레이아웃 만들기

is 및 where 선택기 능숙: 동적이고 대화형 CSS 레이아웃 만들기

CSS는 프런트 엔드 개발에 없어서는 안 될 부분으로, 웹 페이지에 다양하고 절묘한 디자인 효과를 제공할 수 있습니다. 그중 선택자는 CSS의 핵심 중 하나이며, 페이지에서 요소를 선택하고 스타일을 지정하는 데 도움을 줍니다. 이 기사에서는 일반적으로 사용되는 두 가지 CSS 선택자인 is와 where를 소개합니다. 이를 유연하게 사용하면 보다 동적이고 대화형인 CSS 레이아웃을 만들 수 있습니다.

1. is 선택기

is 선택기는 CSS 레벨 4에 도입된 새로운 선택기입니다. 요소의 속성 일치를 기반으로 특정 요소를 선택할 수 있습니다. is 선택기는 쉼표로 구분된 하나 이상의 선택기를 인수로 사용합니다. 예:

nav.is-active,
.header.is-active {
  background-color: #ff0000;
  color: #ffffff;
}

로그인 후 복사

위 코드에서 선택기 nav.is-active 및 .header.is-active는 is-active 클래스가 있는 nav 요소 및 .header 요소의 선택을 나타냅니다. 이러한 요소를 선택하면 배경색인 빨간색과 글꼴 색상인 흰색을 포함하여 해당 스타일이 적용됩니다.

is 선택기를 사용하면 다양한 속성 값을 기반으로 요소를 선택하여 동적 스타일 전환 효과를 얻을 수 있습니다. 예를 들어 탐색 모음에서 현재 선택된 탐색 항목을 기반으로 is-active 클래스를 추가한 다음 is 선택기를 사용하여 다양한 탐색 항목에 다양한 스타일을 추가하여 현재 선택한 항목을 강조 표시할 수 있습니다.

2. Where 선택기

where 선택기는 CSS 레벨 4에 도입된 새로운 선택기입니다. CSS 논리 연산자와 유사하게 지정된 선택기 조건을 기반으로 요소를 선택할 수 있습니다. 예:

div:where(.is-active) {
  background-color: #ff0000;
  color: #ffffff;
}

로그인 후 복사

위 코드에서 선택기 div:where(.is-active)는 클래스가 is-active인 div 요소를 선택한다는 의미입니다. 요소를 선택하면 배경색은 빨간색, 글꼴 색상은 흰색 등 해당 스타일이 적용됩니다.

where 선택기를 사용하면 첫 번째 하위 요소 선택, 마지막 하위 요소 선택, 문서 흐름에서 요소 위치에 따른 선택 등 특정 조건의 요소를 보다 유연하게 선택할 수 있습니다. 이러한 방식으로 요소의 위치와 상태에 따라 해당 스타일을 설정하여 보다 동적이고 대화형인 레이아웃 효과를 얻을 수 있습니다.

3. 샘플 애플리케이션

다음은 동적 및 대화형 CSS 레이아웃을 생성하기 위해 is 및 where 선택기를 사용하는 방법을 보여주는 간단한 예입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div:where(.is-active) {
        background-color: #ff0000;
        color: #ffffff;
      }
      
      nav.is-active,
      .header.is-active {
        background-color: #ff0000;
        color: #ffffff;
      }
      
      .nav-item:hover {
        background-color: #0000ff;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div class="is-active">Div 1</div>
    <div>Div 2</div>
    
    <nav class="is-active">Nav 1</nav>
    <nav>Nav 2</nav>
    
    <div class="header is-active">Header 1</div>
    <div class="header">Header 2</div>
    
    <ul class="nav-list">
      <li class="nav-item">Item 1</li>
      <li class="nav-item">Item 2</li>
      <li class="nav-item">Item 3</li>
    </ul>
  </body>
</html>

로그인 후 복사

위 코드를 통해 클래스 이름이 is-active인 요소를 선택하면 해당 클래스가 있는 요소 위에 마우스를 올리면 배경색과 글꼴 색상이 동시에 빨간색으로 바뀌는 것을 볼 수 있습니다. nav-item 이름을 지정하면 배경색과 글꼴 색상이 파란색으로 변합니다.

이 예에서는 상태 및 속성을 기반으로 요소에 특정 스타일을 추가하여 동적이고 대화형 CSS 레이아웃 효과를 얻는 방법을 보여줍니다.

요약:

is 선택기와 where 선택기를 사용하면 요소를 보다 유연하게 선택하고 스타일을 지정할 수 있으므로 보다 동적이고 대화형인 CSS 레이아웃을 만들 수 있습니다. 이러한 도입은 프런트엔드 개발을 위한 더 많은 선택과 가능성을 제공하여 다양한 디자인 요구 사항과 사용자 상호 작용 경험을 더 잘 충족할 수 있게 해줍니다. is 선택기와 where 선택기의 사용법과 예에 대한 자세한 내용을 보려면 관련 문서와 튜토리얼을 참조하고, 응용 기술을 익히고, 페이지 디자인과 레이아웃에 더 많은 창의성과 하이라이트를 추가할 수 있습니다.

위 내용은 is 및 where 선택기 익히기: 동적 및 대화형 CSS 레이아웃 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!