Merge pull request #20 from gaaahee/main

UMC-Inha · Sep 30, 2024 · 29709f2 · 29709f2
2 parents 4132a6a + 3a47795
commit 29709f2
Show file tree

Hide file tree

Showing 21 changed files with 2,766 additions and 0 deletions.
diff --git a/keyword/chapter00/css/absolute.html b/keyword/chapter00/css/absolute.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    /** 전체 선택자 기본적으로 설정된 마진을 없앰. */
+    * {
+      margin: 0;
+      box-sizing: border-box;
+    }
+
+    .box1 {
+      width: 500px;
+      height: 500px;
+      background-color: purple;
+      color: white;
+      position: relative;
+    }
+
+    .box2 {
+      position: absolute; /* .box1을 기준으로 위치 결정 */
+      width: 200px;
+      height: 200px;
+      background-color: yellow;
+      top: 0px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="box1">BOX1</div>
+  <h1 class="box2">BOX2</h1>
+</body>
+
+</html>
diff --git a/keyword/chapter00/css/animation.html b/keyword/chapter00/css/animation.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Animation 예제</title>
+  <style>
+    .box {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      background-color: purple;
+      margin : auto;
+      animation-name: slide;
+      animation-duration: 0.8s;
+      animation-delay: 0s;
+      animation-direction: alternate;
+      animation-iteration-count: infinite;
+      animation-play-state: running;
+      animation-timing-function: ease-in-out;
+      animation-fill-mode: forwards;
+    }
+
+    @keyframes slide {
+      from {
+        transform: translateY(0);
+      }
+      to {
+        transform: translateY(200px);
+        width: 120px;
+      }
+    }
+  </style>
+</head>
+<body>
+
+  <div class="box"></div>
+
+</body>
+</html>
diff --git a/keyword/chapter00/css/border_outline.html b/keyword/chapter00/css/border_outline.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .box {
+      width: 100px;
+      height: 100px;
+      background-color: purple;
+      margin-bottom: 40px;
+      box-sizing: border-box; /* w와 h 각각 100px로 유지 */
+    }
+
+    .box1 {
+      border: 10px solid black;
+    }
+
+    .box2 {
+      outline: 20px solid red; /* outline은 두께가 커지면 박스 크기에 영향 안 주고 바깥으로 두꺼워짐 */
+    }
+  </style>
+</head>
+
+<body>
+  <div class="box box1">border-box</div>
+  <div class="box box2">content-box</div>
+</body>
+
+</html>
diff --git a/keyword/chapter00/css/center.html b/keyword/chapter00/css/center.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    * {
+      margin: 0;
+      box-sizing: border-box;
+    }
+
+    .box1 {
+      width: 500px;
+      height: 500px;
+      background-color: purple;
+      color: white;
+      margin : auto;
+    }
+
+    .box2 {
+      width: 200px;
+      height: 200px;
+      background-color: yellow;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="box1">BOX1</div>
+  <h1 class="box2">BOX2</h1>
+</body>
+
+</html>
diff --git a/keyword/chapter00/css/flex.html b/keyword/chapter00/css/flex.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Flexbox 예제</title>
+  <style>
+    .container {
+      display: flex;
+      justify-content: center; /* 가로 방향 중앙 정렬 */
+      align-items: center;     /* 세로 방향 중앙 정렬 */
+      height: 100vh;
+    }
+
+    .box {
+      width: 100px;
+      height: 100px;
+      background-color: lightblue;
+      margin: 10px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+  </div>
+</body>
+</html>
diff --git a/keyword/chapter00/css/grid.html b/keyword/chapter00/css/grid.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Grid 예제</title>
+  <style>
+    .container {
+      display: grid;
+      grid-template-columns: 2fr 3fr 1fr; /* 3개의 열을 설정 */
+      grid-gap: 10px; /* 그리드 셀 간의 간격 설정 */
+    }
+
+    .box {
+      background-color: lightblue;
+      padding: 20px;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+
+  <div class="container">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+  </div>
+
+</body>
+</html>