차이

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

--- language:css:basic [2013/06/06 16:06] – [Attribute Selectors] kieuns
+++ language:css:basic [2024/04/23 22:44] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
+~~Title: CSS 시작 정보~~
 ====== 레퍼런스 ======
@@ 줄 4: / 줄 5: @@
   * 참고 사이트 : [[http://www.w3schools.com/css/]]
-====== 문법 요소 ======
+====== 구문 형식 ======
 {{:css:css-selector.gif}}
-주석 : /* ~ */
+====== 주석 ======
+<code css>
+/* ~ */
+</code>
+====== 포함 시키는 방법 ======
+**외부 파일을 읽어오는 방식**
+<code html>
+<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
+</code>
+**html 내부에 선언하는 방식**
+<code html>
+<head>
+  <style>
+  hr { color:sienna; }
+  p { margin-left:20px; }
+  body { background-image:url("images/back40.gif"); }
+  </style>
+</head>
+</code>
+**인라인 방식**
+<code html>
+<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
+</code>
+====== 요소 선택 ======
 ===== id 선택 =====
+  * css에서 id는 '#'으로 시작된다.
   * html 요소 중에 id 속성을 가진 것(들)을 선택한다.
   * 한개 또는 하나 뿐인 요소를 선택한다.
-  * '#'으로 시작된다.
 <code html>
-<!DOCTYPE html>
+<head>
-<html>
+  <style>
-<head> <style> #para1 { text-align:center; color:red; }  </style> </head>
+    #para1 { text-align:center; color:red; }
+  </style>
+</head>
 <body>
   <p id="para1">Hello World!</p>
   <p>This paragraph is not affected by the style.</p>
-</body></html>
+</body>
 </code>
 ===== class 선택 =====
+  * css에서 클래스는 '.'으로 시작된다.
   * 몇개의 요소를 동시에 선택할때 사용한다.
   * html 상의 많은 요소에 같은 class를 정의해서 한번에 선택한다.
-  * '.'으로 시작된다.
 <code html>
-<!DOCTYPE html>
+<html><head>
-<html> <head> <style>
+  <style>
-.center { text-align:center; }
+    .center { text-align:center; } /* 모든 center 클래스 인것 */
-</style> </head>
+  </style>
+</head>
 <body>
   <h1 class="center">Center-aligned heading</h1>
@@ 줄 46: / 줄 88: @@
 <code html>
-<!DOCTYPE html>
+<html><head>
-<html> <head>
+  <style>
-<style>
+    p.center { text-align:center; } /* p 구문에 center 클래스 인것 */
-p.center { text-align:center; }
+  </style>
-</style>
 </head>
 <body>
@@ 줄 57: / 줄 98: @@
 </body>
 </html>
-</code>
-===== 포함 시키는 방법 =====
-==== 외부 파일을 읽어오는 방식 ====
-<code html>
-<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
-</code>
-==== html 내부에 선언하는 방식 ====
-<code html>
-<head>
-<style>
-hr {color:sienna;}
-p {margin-left:20px;}
-body {background-image:url("images/back40.gif");}
-</style>
-</head>
-</code>
-==== 인라인 방식 ====
-<code html>
-<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
 </code>
@@ 줄 234: / 줄 248: @@
 </body></html>
 </code>
+===== z-index =====
+[[{}https://www.w3schools.com/cssref/pr_pos_z-index.asp|z-index (w3school)]]
+''z-index''
+z order를 결정하여 오브젝트간의 가림 상태를 정한다.
+사용하기 위해서는 조건이 필요하다.
+  * ''position''으로 위치를 정하거나
+    * ''position: absolute'', ''position: relative'', ''position: fixed'', ''position: sticky''
+  * ''display:flex'' 사용된 오브젝트의 자식 오브젝트
+  * 일반적인 경우라면, ''position: relative'' 사용하고 ''z-index''를 쓰면 될 것 같다.
+CSS Syntax
+  z-index: auto|initial|inherit| (number);
+JavaScript syntax
+<code>object.style.zIndex="-1"</code>
 ===== Positioning =====