차이

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

--- wiki:css:css_note:css_selectors [2021/03/04 11:00]
emblim98
+++ wiki:css:css_note:css_selectors [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
-====== Document ======
+====== CSS Selectors ======
 <WRAP left notice 80%>
   * description : CSS Selectors
@@ 줄 23: / 줄 23: @@
   - 속성 선택자 (Attribute selectors) : 속성 또는 속성 값에 기반한 요소들을 선택합니다.
 \\
-====CSS 요소 선택자====
+====CSS 요소 선택자 (element Selector)====
 요소 선택자는 요소 이름에 기반하여 HTML 요소들을 선택합니다.\\
 <code>
@@ 줄 31: / 줄 31: @@
 </code>
 \\
-====CSS id 선택자====
+====CSS 아이디 선택자 (id Selector)====
 id 선택자는 특정 요소를 선택하기 위해 HTML 요소의 id 속성을 사용합니다.\\
 요소의 id는 페이지 내에서 고유하므로, id 선택자는 하나의 고유한 요소를 선택하기 위해 사용됩니다.\\
@@ 줄 42: / 줄 42: @@
 </code>
 \\
-====CSS class 선택자====
+====CSS 클래스 선택자 (Class Selector)====
 class 선택자는 특정 class 속성을 가진 HTML 요소들을 선택합니다.\\
 특정 class룰 가진 요소들을 선택하기 위해, 마침표 (**.**, period, 피어리어드)를 쓰고, class 이름을 기재합니다.\\
@@ 줄 85: / 줄 85: @@
    <p class="center large">This paragraph refers to two classes</p>
 </code>
-상기 예제에서 <p>태그의 요소들은 class="center"와 class="large"에 따라서 디자인됩니다.
+상기 예제에서 <p>태그의 요소들은 class="center"와 class="large"에 따라서 디자인됩니다.\\
 \\
 예제\\
@@ 줄 105: / 줄 105: @@
 <h1 class="center">This heading will not be affected</h1>
+<p class="center">This paragraph will be red and center-aligned.</p>
+<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
 </body>
 </html>
 </code>
+====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}}

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

사용자 도구

사이트 도구

차이

문서 도구