language:css:기본_요약

차이

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

차이 보기로 링크

--- language:css:기본_요약 [2021/06/03 16:19] – kieuns
+++ language:css:기본_요약 [2024/04/23 22:44] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
-주석
+~~Title:CSS 선택자에 대해서~~
+{{section>language:jquery:jquery_문서_목록#jQuery_문서_목록&nofooter&noeditbtn}}
+======CSS 선택자에 대해서======
+====== 주석 ======
 <code css>
 /* 한줄 주석 */
 /*
   여러줄 주석
@@ 줄 8: / 줄 15: @@
 </code>
-기본문법
+====== 기본문법 ======
+  선택자 { 선언부 }
+선언부에는, 속성명과 값을 써서 CSS를 설정한다.
   선택자 { 속성명: 속성의값; 속성명: 속성의값; }
@@ 줄 15: / 줄 26: @@
   * 속성의 값 : Value
-선택자
+====== 선택자 ======
 <code html>
@@ 줄 22: / 줄 33: @@
 </code>
-  * { color: blue; }
+<code css>
+* { color: blue; }
+</code>
-선택자를 ''*''로 해두면 모든 요소를 선택하는 것이 된다.
+선택자를 '' * ''로 해두면 모든 요소를 선택하는 것이 된다.
-태그 요소 선택자
+===== 태그 요소 선택자 =====
 <code html>
@@ 줄 34: / 줄 47: @@
 </code>
-  h2 { color: red; }
+<code css>h2 { color: red; }</code>
+선택자 '' h2 ''를 사용한 부분만 선택된다.
+===== 아아디 선택자 =====
+  * ''#'' ← 아이디 선택자 in CSS
+<code html>
+<div>hello</div>
+<h2>hello2</h2>
+<p id="hello">hello3</p>
+</code>
+<code css>#hello { color: red; }</code>
+html 태그에 '' id ''를 사용해서 값을 설정하고 css 에서는 아이디 선택자 '' # ''를 사용해서 요소를 선택한다.
+  * ?? : '' id ''는 여러개 쓰게 되면 어떤게 선택되는걸까?
+===== 클래스 선택자 =====
+  * ''.'' ← 클래스 선택자 in CSS
+<code html>
+<div class="first">1번 그룹</div>
+<div class="first">2번 그룹</div>
+<div class="second">3번 그룹</div>
+<div class="second">4번 그룹</div>
+</code>
+html에서 ''class''를 사용해서 속성 값을 부여한다. CSS 에서는 ''.'' 기호를 붙여 해당 클래스를 사용하는 요소를 선택한다.
+<code css>
+.first { color:red; }
+.second { background-color: green; }
+</code>
+===== 다중선택자 =====
+  * 선택자를 '' , ''를 사용해서 여러개를 선택자에 같은 스타일을 지정할 수 있다.
+<code css>
+h1,
+#hello,
+.first {
+  color: red;
+}
+</code>
+===== 결합선택자 =====
+html 문서에서 계층 관계에 따른 부모,자식 요소를 선택하기 위한 선택자
+<code html>
+<div>
+  <p>1번 자식 요소</p>
+</div>
+<div class="parent">
+  <p>2번 자식 요소</p>
+</div>
+</code>
+<code css>div p { color:blue; }</code>
+  * ''<div>'' 태그 하위에 있는 모든 ''<p>'' 태그를 선택한다.
+<code css>.parent > p { color: green; }</code>
+  * ''.parent > p'' 는 ''parent'' 클래스를 가진 요소에서 모든 ''<p>'' 태그만을 선택한다.
-선택자 ''h2''를 사용한 부분만 선택된다.
+두개의 차이가 미묘..

language/css/기본_요약.1622704754.txt.gz · 마지막으로 수정됨: 2024/04/23 22:43 (바깥 편집)