Add files via upload

LikeLion-at-CAU-10th · Apr 5, 2022 · 0c95df3 · 0c95df3
1 parent b9481ab
commit 0c95df3
Show file tree

Hide file tree

Showing 4 changed files with 302 additions and 0 deletions.
diff --git a/assignment/assignment-02/과제/Q2(session2).css b/assignment/assignment-02/과제/Q2(session2).css
@@ -0,0 +1,170 @@
+body{
+  background-color: rgb(0, 0, 0);
+  margin: 100px;
+}
+
+div {
+  text-align: center;
+}
+
+.layout-container{
+  display: flex;
+  flex-direction: column;
+  width: 1200px;
+  height: 700px;
+  background-color: aliceblue;
+  justify-content: space-evenly;
+}
+
+.layout-first{
+  background-color: aliceblue;
+  display: flex;
+  justify-content: space-evenly;
+  flex-basis: 9.1%;
+  padding: 10px;
+}
+
+.first{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.first1{
+  background-color: blanchedalmond;
+  flex-basis: 19.2%;
+}
+
+.first2{
+  background-color: blanchedalmond;
+  flex-basis: 76.8%;
+}
+
+.layout-second{
+  background-color: aliceblue;
+  display: flex;
+  justify-content: space-evenly;
+  flex-basis: 9.1%;
+  padding: 10px;
+}
+
+.second{
+  background-color: rgb(57, 144, 211);
+  width: 31.3%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.layout-third{
+  background-color: rgb(86, 202, 165);
+  display: flex;
+  justify-content: space-evenly;
+  flex-basis: 22.7%;
+  padding: 10px;
+}
+
+.third{
+  background-color: rgb(28, 143, 225);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.third1{
+  flex-basis: 37.6%;
+}
+
+.third2{
+  flex-basis: 56.4%;
+}
+
+.layout-fourth{
+  background-color: rgb(203, 105, 116);
+  display: flex;
+  justify-content: space-evenly;
+  flex-basis: 22.7%;
+  padding: 10px;
+}
+
+.fourth{
+  background-color: rgb(146, 103, 203);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 15px;
+}
+
+.fourth1{
+  flex-basis: 37.6%;
+}
+
+.fourth2{
+  flex-basis: 56.4%;
+}
+
+.layout-fifth{
+  background-color: rgb(205, 224, 77);
+  display: flex;
+  justify-content: space-evenly;
+  flex-basis: 36.4%;
+  padding: 10px;
+}
+
+.fifth{
+  background-color:rgb(145, 200, 91);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fifth1{
+  flex-basis: 37.6%;
+}
+
+.fifth2{
+  display: flex;
+  flex-direction: column;
+  flex-basis: 56.4%;
+  justify-content: space-between;
+  background-color: rgb(205, 224, 77);
+}
+
+.layout-sixth{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  background-color:rgb(125, 183, 206);
+  padding: 10px;
+  width: calc(100% - 20px);
+  height: calc(44% - 20px);
+} 
+
+
+.layout-sixth div{
+  width: 46%;
+}
+
+.fifth3 {
+  width: 100%;
+  height: 44%;
+  background-color: orchid;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.sixth1 {
+  background-color: palegreen;
+  align-items: center;
+}
+
+.sixth2 {
+  background-color: palegreen;
+  align-items: center;
+}
+
+.letter{
+  margin-top: 25px;
+  margin-left: 80px;
+}
diff --git a/assignment/assignment-02/과제/Q2(session2).html b/assignment/assignment-02/과제/Q2(session2).html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>flex 연습</title>
+  <link rel="stylesheet" href="./Q2(session2).css">
+</head>
+<body>
+  <div class="layout-container">
+    <div class="layout-first">
+      <div class="first first1">1번</div>
+      <div class="first first2">2번</div>
+    </div>
+    <div class="layout-second">
+      <div class="second">3번</div>
+      <div class="second">4번</div>
+      <div class="second">5번</div>
+    </div>
+    <div class="layout-third">
+      <div class="third third1">6번</div>
+      <div class="third third2">7번</div>
+    </div>
+    <div class="layout-fourth">
+      <div class="fourth fourth1">8번</div>
+      <div class="fourth fourth2">9번</div>
+    </div>
+    <div class="layout-fifth">
+      <div class="fifth fifth1">10번</div>
+      <div class="fifth2">
+        <div class="fifth3">11번</div>
+        <div class="layout-sixth">
+          <div class="sixth1"><div class="letter">12번</div></div>
+          <div class="sixth2"><div class="letter">13번</div></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</body>
+</html>
diff --git a/assignment/assignment-02/필수과제/session2.html b/assignment/assignment-02/필수과제/session2.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> 필수과제 </title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <div class="layout-container">
+    <div class="layout-title">
+        <div class="title"> title </div>
+    </div>
+        <div class="layout-recent">  
+        <div class="recent"> 최근게시물1 </div>
+        <div class="recent"> 최근게시물2 </div>
+        <div class="recent"> 최근게시물3 </div>
+        <div class="recent"> 최근게시물4 </div>
+    </div>
+        <div class="layout-popular">
+        <div class="popular popular1"> 인기게시물1 </div>
+        <div class="popular popular2"> 인기게시물2 </div>
+    </div>
+
+</div>
+</body>
+</html>
diff --git a/assignment/assignment-02/필수과제/style.css b/assignment/assignment-02/필수과제/style.css
@@ -0,0 +1,62 @@
+body {
+  background-color: white;
+  margin:200px;
+}
+
+.layout-container {
+  background-color: black;
+  display: flex;
+  flex-direction: column;
+  width: 800px;
+  height: 600px;
+  justify-content: space-evenly;
+}
+
+.layout-title {
+  display: flex;
+  justify-content: center;
+  flex-basis: 13%;
+}
+
+.title {
+  background-color: red;
+  width:97%;
+  display:flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.layout-recent {
+  display: flex;
+  justify-content: space-evenly;
+  flex-basis: 28%;
+}
+
+.recent {
+  background-color: yellow;
+  display: flex;
+  width:23%;
+  justify-content: center;
+  align-items: center;
+}
+
+.layout-popular {
+  display: flex;
+  justify-content: space-evenly;
+  flex-basis: 53%;
+}
+
+.popular {
+  background-color: green;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.popular1 {
+  flex-basis: 71.4%;
+}
+
+.popular2 {
+  flex-basis: 23.8%;
+}