문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Combinators ======
<WRAP left notice 80%>
  * description : CSS Combinators
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-04
</WRAP>
<WRAP clear></WRAP>
\\
====Source of the article==== 
  * "Do it! HTML5 + CSS3 웹표준의 정석" / 이지스 퍼블리싱 / 고경희 지음 / 개정1판 9쇄 발행 2019년 6월 3일 / 
  * [[https://www.w3schools.com/css/css_combinators.asp]]

\\
====CSS 연결(자) 선택자 (Combinator or Combination Selectors)====
연결선택자는 선택자들 사이의 관계를 설명해주는 것이다.\\
\\
CSS 선택자는 단순 선택자 하나 이상을 포함할 수 있습니다. 단순 선택자들 사이에서 연결자를 포함시킬 수 있습니다.\\
\\
CSS에는 4개의 연결자가 있습니다. 
  * 하위(자손, 후손) 선택자 (Descendant Selector) - (표시: space )
  * 자식 선택자 (Child Selector) - (표시: > )
  * 인접 형제 선택자 (Adjacent Sibling Selector) - (표시: + )
  * (일반) 형제 선택자 ((General) Sibling Selector) - (표시: ~ )
\\
=====하위(자손, 후손) 선택자 (Descendant Selector) - (표시 : space)=====
하위 선택자는 특정 요소의 하위 요소들인 모든 요소들을 연결합니다.\\
하기 예제는 <div> 요소 내의 모든 <p> 요소들을 선택합니다. \\
\\
기본형\\
<code css>
div p {
   background-color: yellow;
}
</code>
\\
예제\\
<HTML>
<html>
<head>
<style>
div p {
   background-color: yellow;
}
</style>
</head>
<body>

<h2>Descendant Selector</h2>
<p>The Descendant selector matches all elements that are descendants of a specified element.</p>

<div>
   <p>Paragraph 1 in the div</P>                           // 배경이 yellow
   <p>Paragraph 2 in the div</P>                           // 배경이 yellow 
   <selection><p>Paragraph 3 in the div</P></selection>    // 배경이 yellow
</div>

<p>Paragraph 4. Not in a div</p>
<p>Paragraph 5. Not in a div</p>
</body>
</html>
</HTML>
\\
=====자식 선택자 (Child Selector) - (표시 : >)=====
자식 선택자는 특정 요소의 모든 자식 요소들을 선택합니다.\\
%%하기 예제는 <div>요소 내에서 자식들인 모든 <p>요소들을 선택합니다.%%\\
\\
기본형\\
<code css>
div > p {
   background-color: yellow;
}
</code>
\\
예제\\
<HTML>
<html>
<head>
<style>
div > p {
   background-color: yellow;
}
</style>
</head>
<body>

<h2>Child Selector</h2>
<p>The Child selector (>) selects all elements that are the children of a specified element.</p>

<div>
   <p>Paragraph 1 in the div</P>                           // 배경이 yellow
   <p>Paragraph 2 in the div</P>                           // 배경이 yellow 
   <selection><p>Paragraph 3 in the div</P></selection>    // not child but Descendant
   <p>Paragraph 4 in the div</P>                           // 배경이 yellow 
</div>

<p>Paragraph 5. Not in a div</p>
<p>Paragraph 6. Not in a div</p>

</body>
</html>
</HTML>
\\
=====인접 형제 선택자 (Adjacent Sibling Selector) - (표시: + )=====
인접 형제 선택자는 다른 특정 요소 바로 다음에 있는 요소들을 선택하기 위해 사용됩니다.\\
형제 요소들은 동일한 부모 요소를 가져야 하고, "인접(adjacent)"은 "즉시 연이어 나오는"것을 의미합니다.\\
%%하기 예제는 <div>요소 다음에 위치한 첫 번째 <p>요소를 선택합니다.%%\\
\\
기본형\\
<HTML>
**div + p** {
   background-color: yellow;
}
</HTML>
\\
예제\\
<HTML>
<html>
<head>
<style>
div + p {
   background-color: yellow;
}
</style>
</head>
<body>

<h2>Adjacent Sibling Selector</h2>

<p>The + selector is used to selects an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>

<div>
   <p>Paragraph 1 in the div</P>                           
   <p>Paragraph 2 in the div</P>                            
</div>

<p>Paragraph 3. After a div</p>                // 배경이 yellow
<p>Paragraph 4. After a div</p>

<div>
   <p>Paragraph 5 in the div</P>                           
   <p>Paragraph 6 in the div</P>                            
</div>

<p>Paragraph 7. After a div</p>                // 배경이 yellow
<p>Paragraph 8. After a div</p>


</body>
</html>
</HTML>
\\
=====(일반) 형제 선택자 ((General) Sibling Selector) - (표시: ~ )=====
(일반) 형제 선택자는 어떤 특정 요소의 모든 형제 요소들을 선택합니다.\\
%%하기 예제는 <div>요소의 형제들인 모든 <p> 요소들을 선택합니다.%%\\
\\
기본형\\
<HTML>
**div ~ p** {
   background-color: yellow;
}
</HTML>
\\
예제\\
<HTML>
<html>
<head>
<style>
div ~ p {
   background-color: yellow;
}
</style>
</head>
<body>

<h2>General Sibling Selector</h2>
<p>The general sibling selector (~) selects all elements that are siblings of a specified element.</p>

<p>Paragraph 1.</P>

<div>
   <p>Paragraph 2</P>                           
</div>

<p>Paragraph 3.</p>     // 배경이 yellow                
<h4>Some code</h4>
<p>Paragraph 4</p>      // 배경이 yellow

</body>
</html>
</HTML>
\\
=====CSS Combinator Selectors =====
^ Selector           ^ Example  ^ Example Description                      ^
| element element    | div p    | <div> 요소들 내의 모든 <p> 요소들을 선택합니다.          |
| element>element    | div > p  | 부모가 <div> 요소인 곳의 모든 <p> 요소들을 선택합니다.      |
| element+element    | div + p  | <div> 요소 바로 뒤에 배치되는 첫 번째 <p> 요소를 선택합니다.  |
| element1~element2  | p ~ ul   | <p> 요소 다음에 오는 모든 <ul> 요소들을 선택합니다.        |








{{tag>오션 CSS combinator selector, combination selector}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
