From e80022b20c117513c44b437cd3239d6c35d14acc Mon Sep 17 00:00:00 2001
From: dldbstj22 <03dldbstj0915@gmail.com>
Date: Mon, 9 Oct 2023 00:47:59 +0900
Subject: [PATCH 1/2] feat: velog clone
---
index.html | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
style.css | 37 +++++++++++++++++++++++++++++
2 files changed, 105 insertions(+)
create mode 100644 index.html
create mode 100644 style.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b34bf6c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+ Velog
+
+
+
+
+
+
+
+ velog
+
+
+
+
+
+
+
+
+
+ ![게시물1](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+ ![게시물1](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a29f252
--- /dev/null
+++ b/style.css
@@ -0,0 +1,37 @@
+
+h1{
+ text-align: left;
+ color:black;
+ font-family: 'AR One Sans', sans-serif;
+ letter-spacing: 0.2em;
+
+}
+
+
+ img {
+ width: 210px;
+ height: 210px;
+ object-fit: cover;
+ }
+
+li{
+ display:flex;
+ display:inline-block;
+ border-radius: 25px;
+ width: 210px;
+ padding:20px;
+ margin: 0 20px;
+ height: 210px;
+ border-style: solid;
+ border-width: 2px;
+ flex-direction: row;
+ margin-bottom:30px;
+ position: relative;
+}
+button{
+
+ margin: 10px;
+ font-size: 20px;
+ position :relative;
+ border: 0;
+}
From e43d7f7bf7773d9efdd4e02da7cb81337214dd8c Mon Sep 17 00:00:00 2001
From: dldbstj22 <03dldbstj0915@gmail.com>
Date: Sat, 4 Nov 2023 00:11:47 +0900
Subject: [PATCH 2/2] week3
---
index.html | 6 +-
week3/index.html | 128 ++++++++++++++++++++++++++++++
week3/new_page.html | 128 ++++++++++++++++++++++++++++++
week3/style.css | 186 ++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 444 insertions(+), 4 deletions(-)
create mode 100644 week3/index.html
create mode 100644 week3/new_page.html
create mode 100644 week3/style.css
diff --git a/index.html b/index.html
index b34bf6c..7285872 100644
--- a/index.html
+++ b/index.html
@@ -15,14 +15,12 @@
+
![게시물1](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
diff --git a/week3/index.html b/week3/index.html
new file mode 100644
index 0000000..87e3b91
--- /dev/null
+++ b/week3/index.html
@@ -0,0 +1,128 @@
+
+
+
+
+
+ Velog
+
+
+
+
+
+
+
+
+ velog
+
+
+ 새글작성
+
+
+
+
+
+
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
+
+
+
+
![](https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png)
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/week3/new_page.html b/week3/new_page.html
new file mode 100644
index 0000000..a751a28
--- /dev/null
+++ b/week3/new_page.html
@@ -0,0 +1,128 @@
+
+
+
+
+
+ 태그 추가삭제하기
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/week3/style.css b/week3/style.css
new file mode 100644
index 0000000..f43aa07
--- /dev/null
+++ b/week3/style.css
@@ -0,0 +1,186 @@
+
+h1{
+ text-align: left;
+ color:black;
+ font-family: 'AR One Sans', sans-serif;
+ letter-spacing: 0.2em;
+
+}
+.trending, .recent{
+ text-decoration: none;
+ color: inherit;
+ font-size: 20px;
+ width: 100px;
+ height: 40px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ line-height: 40px;
+ border: 1px solid gray;
+ top:10px;
+}
+/* .nav-box{
+ display:relative;
+ display: flex;
+ flex-direction: row;
+ width: 200px;
+ height: 80px;
+} */
+header{
+ top:5px;
+ width: 100%;
+ height: 120px;
+ display: flex;
+ flex-direction: column;
+}
+h1{
+ text-align: left;
+ color: black;
+ font-family: 'AR One Sans', sans-serif;
+ letter-spacing: 0.2em;
+}
+
+img {
+ width: 210px;
+ height: 210px;
+ object-fit: cover;
+ }
+
+ .wrap{
+ display: grid;
+ grid-template-columns: repeat(5, 240px);
+ grid-gap: 30px;
+ border-radius: 25px;
+ padding: 20px;
+ margin: 0 20px;
+ border: 2px solid;
+ margin-bottom: 30px;
+ position: relative;
+}
+
+
+ .dropbtn {
+ background-color: #f3eded;
+ color: rgb(8, 8, 8);
+ padding: 16px;
+ font-size: 16px;
+ border: none;
+ }
+
+ .dropdown {
+
+ display: inline-block;
+ position: absolute;
+ top: 50px;
+ right: 5px;
+}
+
+
+ .dropdown-content {
+ display: none;
+ position: absolute;
+ background-color:white;
+ min-width: 160px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+ }
+
+ .dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ }
+
+ .dropdown-content a:hover {background-color: #ddd;}
+
+ .dropdown:hover .dropdown-content {display: block;}
+
+ .dropdown:hover .dropbtn {background-color: white;}
+
+
+
+
+#modalOpenButton, #modalCloseButton {
+ cursor: pointer;
+ }
+
+ #modalContainer {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: rgba(0, 0, 0, 0.5);
+ }
+
+ #modalContent {
+ position: absolute;
+ background-color: #ffffff;
+ width: 300px;
+ height: 150px;
+ padding: 15px;
+ }
+
+ #modalContainer.hidden {
+ display: none;
+ }
+ #modalContainer {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: rgba(0, 0, 0, 0.5);
+ }
+
+ #modalContainer.hidden {
+ display: none;
+ }
+ #modalContent {
+ position: absolute;
+ background-color: #ffffff;
+ width: 300px;
+ height: 150px;
+ padding: 15px;
+ }
+
+
+.new-post-button::before {
+ content: "새글작성";
+ position: relative;
+ color: black;
+}
+
+.new-post-button {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: black;
+ color: white;
+ padding: 6px;
+ border: none;
+ border-radius: 50%;
+ width: 100px;
+ height: 40px;
+ font-size: 14px;
+ z-index: 1;
+}
+
+.nav-box {
+ display: flex;
+ flex-direction: row;
+ width: 200px;
+ height: 80px;
+ position: relative;
+ z-index: 1;
+}
\ No newline at end of file