wiki:css:css_note:css_combinators

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:css:css_note:css_combinators [2021/03/04 19:56]
emblim98
+++ wiki:css:css_note:css_combinators [2023/01/13 18:44] (현재)
@@ 줄 29: / 줄 29: @@
 \\
 기본형\\
-<code>
+<code css>
 div p {
    background-color: yellow;
@@ 줄 36: / 줄 36: @@
 \\
 예제\\
-<code>
+<HTML>
 <html>
 <head>
@@ 줄 60: / 줄 60: @@
 </body>
 </html>
-</code>
+</HTML>
 \\
 =====자식 선택자 (Child Selector) - (표시 : >)=====
@@ 줄 67: / 줄 67: @@
 \\
 기본형\\
-<code>
+<code css>
 div > p {
    background-color: yellow;
@@ 줄 74: / 줄 74: @@
 \\
 예제\\
-<code>
+<HTML>
 <html>
 <head>
@@ 줄 100: / 줄 100: @@
 </body>
 </html>
-</code>
+</HTML>
 \\
 =====인접 형제 선택자 (Adjacent Sibling Selector) - (표시: + )=====
@@ 줄 108: / 줄 108: @@
 \\
 기본형\\
-<code>
+<HTML>
 **div + p** {
    background-color: yellow;
 }
-</code>
+</HTML>
 \\
 예제\\
-<code>
+<HTML>
 <html>
 <head>
@@ 줄 150: / 줄 150: @@
 </body>
 </html>
-</code>
+</HTML>
 \\
 =====(일반) 형제 선택자 ((General) Sibling Selector) - (표시: ~ )=====
@@ 줄 157: / 줄 157: @@
 \\
 기본형\\
-<code>
+<HTML>
 **div ~ p** {
    background-color: yellow;
 }
-</code>
+</HTML>
 \\
 예제\\
-<code>
+<HTML>
 <html>
 <head>
@@ 줄 190: / 줄 190: @@
 </body>
 </html>
-</code>
+</HTML>
 \\
 =====CSS Combinator Selectors =====
-{{:wiki:css:css_note:css_combinator_selector.png|}}
+^ 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> 요소들을 선택합니다.        |

/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_combinators.1614855411.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)