css study

cst9221 · May 24, 2020 · 0adc7a1 · 0adc7a1
1 parent 50d3491
commit 0adc7a1
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 2 deletions.
diff --git a/css.css b/css.css
@@ -0,0 +1,47 @@
+/* selector {
+  property: value;
+} */
+* {
+  color: green;
+}
+
+li {
+  color: blue;
+}
+
+#special {
+  color: pink;
+}
+
+li#special {
+  background: yellow;
+}
+
+.red {
+  width: 100px;
+  height: 100px;
+  background: yellow;
+}
+
+button:hover {
+  color: red;
+  background: beige;
+}
+
+a[href] {
+  color: purple;
+}
+a[href^="naver"] {
+  color: black;
+}
+a[href$=".com"] {
+  background: green;
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  padding: 5px 10px 15px 20px;
+  border: 5px solid blue;
+  background: red;
+}
diff --git a/css.html b/css.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="kr" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>css_study</title>
+    <link rel="stylesheet" href="css.css">
+  </head>
+  <body>
+  <p>Selectors : <br>universal *, type Tag, ID #id, Class .class, State :, Attribute []</p>
+
+  <!-- ol(Ordered List)는 container이기 때문에  -->
+  <ol>
+    <li id="special">First</li>
+    <li id="special">Second</li>
+    <li>Third</li>
+  </ol>
+  <h1 id="special">Hello</h1>
+
+  <button>Button 1</button>
+  <button>Button 2</button>
+
+  <div class="red"></div>
+  <div class="blue"></div>
+
+  <a href="naver.com">Naver</a>
+  <a href="googlenaver.com">Google</a>
+  <a>Empty</a>
+
+  <div class="box"></div>
+
+  <!-- https://flukeout.github.io/에서 selectors에 대해 공부가능-->
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -2,8 +2,7 @@
 <html lang="kr" dir="ltr">
   <head>
     <meta charset="utf-8">
-    <title>css_study</title>
-    <link rel="stylesheet" href="study_1">
+    <title>html_study</title>
   </head>
   <body>
   <!-- div.container>div.item.item${$}*10 -->

diff --git a/study_1.css b/study_1.css