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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
너무 많은 색상 링크Apr 13, 2025 am 11:36 AM최근에 색상에 대한 도구, 기사 및 리소스가 많이있었습니다. 당신의 즐거움을 위해 여기에 반올림하여 몇 개의 탭을 닫을 수 있습니다.
Flexbox에서 자동 마진이 작동하는 방법Apr 13, 2025 am 11:35 AMRobin은 이전에 이것을 다루었지만 지난 몇 주 동안 그것에 대해 약간의 혼란을 듣고 다른 사람이 설명하는 데 찌르는 것을 보았습니다.
움직이는 무지개가 강조합니다Apr 13, 2025 am 11:27 AM나는 샌드위치 사이트의 디자인을 절대적으로 좋아합니다. 많은 아름다운 특징 중에는 무지개가있는이 헤드 라인이 스크롤 할 때 움직이는 밑줄이 있습니다. 그것은 아닙니다
새해, 새 직업? 그리드 구동 이력서를 만들자!Apr 13, 2025 am 11:26 AM많은 인기있는 이력서 디자인은 그리드 모양으로 섹션을 배치하여 사용 가능한 페이지 공간을 최대한 활용하고 있습니다. CSS 그리드를 사용하여 레이아웃을 만듭니다
너무 많이 재 장전하는 습관에서 사용자를 해소하는 한 가지 방법Apr 13, 2025 am 11:25 AM페이지 새로 고침은 일입니다. 때로는 반응이 없다고 생각하거나 새로운 콘텐츠를 사용할 수 있다고 생각할 때 페이지를 새로 고침합니다. 때때로 우리는 단지 화가났습니다
React를 사용한 도메인 구동 설계Apr 13, 2025 am 11:22 AMReact 세계에서 프론트 엔드 애플리케이션을 구성하는 방법에 대한 지침은 거의 없습니다. (“옳은 느낌”이 될 때까지 파일을 움직여도 롤). 진실
비활성 사용자 감지Apr 13, 2025 am 11:08 AM대부분의 경우 사용자가 응용 프로그램에 적극적으로 참여하거나 일시적으로 비활성화되어 있는지에 대해 신경 쓰지 않습니다. 비활성, 의미, 아마도 그들
Wufoo ZapierApr 13, 2025 am 11:02 AMWufoo는 항상 통합으로 훌륭했습니다. 캠페인 모니터, MailChimp 및 Typekit과 같은 특정 앱과 통합이 있지만
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
Dreamweaver Mac版
시각적 웹 개발 도구
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기
