wiki:css:css_note:css_selectors

차이

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

차이 보기로 링크

--- wiki:css:css_note:css_selectors [2021/03/04 11:33]
emblim98
+++ wiki:css:css_note:css_selectors [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
-====== Document ======
+====== CSS Selectors ======
 <WRAP left notice 80%>
   * description : CSS Selectors
@@ 줄 113: / 줄 113: @@
 ====CSS 전체 선택자 (Universal Selector)====
   * 전체 선택자 (** * **)는 웹 페이지의 모든 HTML 요소들을 선택합니다.
-  *
+\\
+<code>
+* {
+   text-align: center;
+   color: blue;
+}
+</code>
+\\
+====CSS 그룹 선택자 (Grouping Selector)====
+그룹 선택자는 동일한 스타일 정의를 가지고 있는 모든 HTML 요소들을 선택합니다.\\
+하기의 예제는 h1, h2, 그리고 p 요소는 동일한 스타일 정의를 가지고 있습니다.
+<code>
+h1 {
+   text-align: center;
+   color: red;
+}
+h2 {
+   text-align: center;
+   color: red;
+}
+P {
+   text-align: center;
+   color: red;
+}
+</code>
+\\
+선택자들을 그룹으로 묶어서 코드를 최소화하는 것이 더 좋습니다.\\
+선택자들을 그룹으로 묶기 위하여, 쉼표 (**,** comma)를 사용하여 각각의 선택자들을 하기의 예제처럼 구별합니다.\\
+<code>
+h1, h2, p {
+   text-align: center;
+   color: red;
+}
+</code>
+\\
+====CSS 단순 선택자 (Simple Selectors)====
+^**Selector**       ^**Example**  ^**Example description**                      ^
+| #id               | #firstname  | id="firstname"을 가진 요소를 선택합니다.       |
+| .class            | .intro      | class="intro"를 가진 모든 요소들을 선택합니다.  |
+| element.class     | p.intro     | class="intro"를 가진 <p>요소들만을 선택합니다.  |
+| *                 | *           | 모든 요소들을 선택합니다.                      |
+| element           | p           | 모든 <p>요소들을 선택합니다.                   |
+| element, element  | div, p      | 모든 <div>요소들과 모든 <p>요소들을 선택합니다. |
 {{tag>오션 CSS introduction, syntax}}

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