css study2

cst9221 · May 24, 2020 · 03b03b7 · 03b03b7
1 parent 0adc7a1
commit 03b03b7
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 0 deletions.
diff --git a/css2.css b/css2.css
@@ -0,0 +1,15 @@
+div, span {
+  width: 70px;
+  height: 70px;
+  margin: 20px;
+}
+
+div {
+  background: red;
+  display: inline;
+}
+
+span {
+  background: blue;
+  display: block;
+}
diff --git a/css2.html b/css2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="kr" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>css_study</title>
+    <link rel="stylesheet" href="css2.css">
+  </head>
+  <body>
+  <!-- Block level -->
+  <!-- div는 기본적으로 block level이다 -->
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+
+  <!-- Inline level -->
+  <!-- span은 기본적으로 inline level이다 -->
+  <span>4</span>
+  <span>5</span>
+  <span>6</span>
+
+  <!-- inline은 내용 자체를 꾸며주므로 내용이 없으면 보여지지 않는다. -->
+  <!-- 반대로 block은 박스 형태를 가지며 내용이 없더라도 보여진다. -->
+  <!-- 추가적으로 block, inline에 따라 중심축이 달라져 정렬방향이 다르다 -->
+  </body>
+</html>
diff --git a/css3.css b/css3.css
@@ -0,0 +1,42 @@
+div {
+  width: 50px;
+  height: 50px;
+  margin-bottom: 20px;
+  background: red;
+}
+
+.container {
+  background: yellow;
+  left: 20px;
+  top: 20px;
+  position: relative;
+}
+
+.box {
+  background: blue;
+  left: 20px;
+  top: 20px;
+  position: relative;
+}
+
+.box1 {
+  background: green;
+  left: 20px;
+  top: 20px;
+  position: absolute;
+}
+
+.box2 {
+  background: black;
+  left: 20px;
+  top: 20px;
+  position: sticky;
+  color: #fff;
+}
+
+.box3 {
+  background: purple;
+  left: 20px;
+  top: 20px;
+  position: fixed;
+}
diff --git a/css3.html b/css3.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="kr" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>css_study</title>
+    <link rel="stylesheet" href="css3.css">
+  </head>
+  <body>
+    <!-- position -->
+    <!--  left, top으로 position을 조정했지만 변화가 없다.
+    이유는 position의 default는 static이기 때문이다.  -->
+    <article class="container">
+      <div></div>
+      <!-- .box의 position을 relative로 하고 위치값을 준다면
+    .box는 원래의 위치에서 주어진 위치값만큼 '상대적으로' 이동한다.   -->
+      <div class="box">relative</div>
+      <div></div>
+      <!-- .box1의 position은 absolute로 지정하니 container내에서
+    주어진 위치값만큼 이동한다. -->
+      <div class="box1">absolute</div>
+      <div></div>
+      <!-- position을 sticky로 지정하면 원래 위치에 있지만 화면이 지나가면 따라붙게(?)된다  -->
+      <div class="box2">sticky</div>
+      <div></div>
+      <!-- position을 fixed로 지정하면 처음에는 웹페이지의 지정된 곳에 고정된다.
+    화면이 움직이여도 사용자에게 고정되어 보여진다. -->
+      <div class="box3">fixed</div>
+    </article>
+  </body>
+</html>