Add files via upload

Likelion-Inha-11 · Feb 27, 2023 · 4441974 · 4441974
commit 4441974
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,16 @@
+# week2 - css실습
+
+영상 결과물을 보고 따라만들어 보세요! 단 아래의 조건을 지키셔야 합니다!
+
+1. html 코드는 ‘*** 블로그입니다’를 제외하고 수정하지 않을것!(특히 태그에 class나 id 부여 금지!)
+2. height 높이는 마음대로! 단, 배경색이 있는 모든 태그들은 width를 꽉 채운다.
+3. nav의 오른쪽 정렬은 float속성을 사용할것!(display = flex or grid금지)
+4. 색은 원하는 색으로 해도 된다! 다른 색인걸 확인만 할 수 있으면 OK!
+
+
+
+
+
+[추가로 하고 싶은 말]
+
+원래 타입선택자로 css를 꾸미는 건 안티패턴이에요!(float도 잘 안씁니다) 하지만 이번 실습은 환경이 제한된 상황에서 어려움을 겪고 이게 왜 안좋은지 알아보는 데에 의미가 있어요! 실전에서는 css로 꾸밀때 class를 사용하도록 합시다!
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="solution.css" />
+  </head>
+  <body>
+    <header>*** 블로그 입니다</header>
+    <nav>
+      <ul>
+        <li><a href="#">HOME</a></li>
+        <li><a href="#">DIARY</a></li>
+        <li><a href="#">MEDIA</a></li>
+      </ul>
+    </nav>
+    <article>
+      <section>
+        <form action="">
+          <input type="text" placeholder="ID" />
+          <input type="password" placeholder="PW" />
+        </form>
+      </section>
+      <section>
+        <h2>안녕하세요!</h2>
+        <p>HTML 실습입니다.</p>
+      </section>
+    </article>
+    <footer>
+      <p>이곳은 footer입니다.</p>
+    </footer>
+  </body>
+</html>
diff --git a/solution.css b/solution.css
@@ -0,0 +1,63 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+  color: #ffffff;
+}
+header {
+  width: 100%;
+  padding: 15px;
+  background: #000000;
+  color: white;
+  text-align: center;
+  position: sticky;
+  top: 0;
+}
+nav {
+  background: #1c641c;
+  height: 50px;
+  width: 100%;
+  padding: 15px;
+}
+ul {
+  list-style: none;
+  display: flex; /* 금요일에 배울 내용입니다! */
+  justify-content: flex-end;
+}
+
+ul > li {
+  margin: 0px 5px;
+}
+
+article {
+  width: 100%;
+}
+section {
+  width: 100%;
+  padding: 15px;
+}
+section:nth-child(1) {
+  background: #973618;
+  height: 500px;
+}
+section:nth-child(2) {
+  background: orange;
+  height: 500px;
+}
+section input {
+  display: block;
+  border: 0px;
+  padding: 20px;
+  border-radius: 3px;
+  margin-top: 5px;
+}
+footer {
+  background-color: #829967;
+  width: 100%;
+  padding: 15px;
+  text-align: center;
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,15 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+ul {
+  list-style: none;
+  display: flex; /* 금요일에 배울 내용입니다! */
+  justify-content: flex-end;
+}
+
+ul > li {
+  margin: 0px 5px;
+}