language:css:basic

차이

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

차이 보기로 링크

--- language:css:basic [2021/05/11 22:00] – kieuns
+++ language:css:basic [2024/04/23 22:44] (현재) – 바깥 편집 127.0.0.1
@@ 줄 5: / 줄 5: @@
   * 참고 사이트 : [[http://www.w3schools.com/css/]]
-====== 문법 요소 ======
+====== 구문 형식 ======
 {{:css:css-selector.gif}}
-주석 : /* ~ */
+====== 주석 ======
-====== 포함 시키는 방법 ======
+<code css>
+/* ~ */
+</code>
-===== 외부 파일을 읽어오는 방식 =====
+====== 포함 시키는 방법 ======
+**외부 파일을 읽어오는 방식**
 <code html>
@@ 줄 21: / 줄 25: @@
 </code>
-===== html 내부에 선언하는 방식 =====
+**html 내부에 선언하는 방식**
 <code html>
 <head>
-<style>
+  <style>
-hr {color:sienna;}
+  hr { color:sienna; }
-p {margin-left:20px;}
+  p { margin-left:20px; }
-body {background-image:url("images/back40.gif");}
+  body { background-image:url("images/back40.gif"); }
-</style>
+  </style>
 </head>
 </code>
-===== 인라인 방식 =====
+**인라인 방식**
 <code html>
@@ 줄 43: / 줄 47: @@
 ===== 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>
@@ 줄 78: / 줄 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>
@@ 줄 239: / 줄 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 =====

language/css/basic.1620738019.txt.gz · 마지막으로 수정됨: 2024/04/23 22:43 (바깥 편집)