From f521666035fcf524a03e499b4d6f73f3771399e5 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Tue, 25 Jun 2024 17:25:00 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B8=94=EB=A1=9C=EA=B7=B8=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Practice/P3_MyBlog/myblog.html | 239 +++++++++++++++++++++++++++++++++
 1 file changed, 239 insertions(+)
 create mode 100644 Practice/P3_MyBlog/myblog.html
diff --git a/Practice/P3_MyBlog/myblog.html b/Practice/P3_MyBlog/myblog.html
new file mode 100644
index 0000000..b91dcb9
--- /dev/null
+++ b/Practice/P3_MyBlog/myblog.html
@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width"/>
+    <title>My Blog</title>
+
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: sans-serif;
+            padding: 10px;
+            background-color: #f1f1f1;
+        }
+
+        /* Nav */
+        nav ul {
+            width: 100%;
+            background-color: rgba(44, 42, 39, 0.983);
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav ul li {
+            display: inline-block;
+        }
+
+        .home {
+            background-color: darkorange;
+            width: 100px;
+            text-align: center;
+            font-weight: bold;
+            float: right;
+        }
+
+        .home a {
+            display: block;
+            text-decoration: none;
+            color: white;
+            padding: 16px 16px;
+        }
+
+        .dropdwon {
+            position: relative;
+        }
+
+        .dropdown-menu {
+            color: white;
+            padding: 16px 16px;
+            cursor: pointer;
+        }
+
+        .dropdown-content {
+            position: absolute;
+            background-color: #f9f9f9;
+            min-width: 160px;
+            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+        }
+
+        .dropdown-content a {
+            color: black;
+            padding: 12px 16px;
+            text-decoration: none;
+            display: block;
+        }
+
+        /* 서브메뉴 숨기기 */
+        .dropdown-content {
+            display: none;
+        }
+
+        /* 호버 효과 추가 */
+        .dropdown-menu:hover:not(.home) {
+            background-color: darkorange;
+            color: white;
+        }
+
+        /* 드롭다운 만들기 */
+        .dropdown:hover .dropdown-content {
+            display: block;
+        }
+
+        .dropdown-content a:hover {
+            background-color: lightgray;
+        }
+
+        /* Content */
+        .header {
+            padding: 30px;
+            text-align: center;
+            background-color: white;
+        }
+
+        .header h1 {
+            font-size: 50px;
+        }
+
+        .leftcolumn {
+            float: left;
+            width: 75%;
+        }
+
+        .rightcolumn {
+            float: right;
+            width: 25%;
+            padding-left: 20px;
+        }
+
+        .fakeimg {
+            background-color: rgb(228, 216, 216);
+            width: 100%;
+            padding: 20px;
+        }
+
+        .card {
+            background-color: white;
+            padding: 20px;
+            margin-top: 20px;
+        }
+
+        .contents::after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+
+        .footer {
+            padding: 30px;
+            text-align: center;
+            background-color: #ddd;
+            margin-top: 20px;
+        }
+
+        /* 반응형 웹 설정, 폭이 600px 이하인 경우 적용 */
+    @media screen and (max-width: 600px) {
+        .leftcolumn, .rightcolumn {
+            width: 100%;
+            padding: 0;
+        }
+    }
+
+    /* 반응형 웹 설정, 폭이 400px 이하인 경우 적용 */
+    @media screen and (max-width: 500px) {
+      nav {
+          display: none;
+      }
+    }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>My Blog</h1>
+        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur.</p>
+    </div>
+
+    <nav>
+        <ul>
+            <li class="dropdown">
+                <div class="dropdown-menu">Menu1</div>
+                <div class="dropdown-content">
+                    <a href="#">Menu1-1</a>
+                    <a href="#">Menu1-2</a>
+                    <a href="#">Menu1-3</a>
+                    <a href="#">Menu1-4</a>
+                </div>
+            </li>
+            <li class="dropdown">
+                <div class="dropdown-menu">Menu2</div>
+                <div class="dropdown-content">
+                    <a href="#">Menu2-1</a>
+                    <a href="#">Menu2-2</a>
+                    <a href="#">Menu2-3</a>
+                    <a href="#">Menu2-4</a>
+                </div>
+            </li>
+            <li class="dropdown">
+                <div class="dropdown-menu">Menu3</div>
+                <div class="dropdown-content">
+                    <a href="#">Menu3-1</a>
+                    <a href="#">Menu3-2</a>
+                    <a href="#">Menu3-3</a>
+                    <a href="#">Menu3-4</a>
+                </div>
+            </li>
+            <li class="dropdown">
+                <div class="dropdown-menu">Menu4</div>
+            </li>
+            <li class="home">
+                <a href="#">Home</a>
+            </li>
+        </ul>
+    </nav>
+
+    <div class="contents">
+        <div class="leftcolumn">
+            <div class="card">
+                <h2>TITLE HEADING</h2>
+                <h5>Title description, June 25, 2024</h5>
+                <div class="fakeimg" style="height: 200px;">Image</div>
+                <p>Some text...</p>
+                <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
+            </div>
+            <div class="card">
+                <h2>TITLE HEADING</h2>
+                <h5>Title description, May 25, 2024</h5>
+                <div class="fakeimg" style="height: 200px;">Image</div>
+                <p>Some text...</p>
+                <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
+            </div>
+        </div>
+
+        <div class="rightcolumn">
+            <div class="card">
+                <h2>About Me</h2>
+                <div class="fakeimg" style="height: 100px;">Image</div>
+                <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
+            </div>
+            <div class="card">
+                <h3>Popular Post</h3>
+                <div class="fakeimg"><p>Image</p></div>
+                <div class="fakeimg"><p>Image</p></div>
+                <div class="fakeimg"><p>Image</p></div>
+              </div>
+              <div class="card">
+                <h3>Follow Me</h3>
+                <p>Some text..</p>
+              </div>
+        </div>
+    </div>
+
+    <div class="footer">
+        <h2>Footer</h2>
+    </div>
+</body>
+</html>
\ No newline at end of file
