diff --git a/index.html b/index.html new file mode 100644 index 0000000..7285872 --- /dev/null +++ b/index.html @@ -0,0 +1,66 @@ + + + + + + Velog + + + + + + +
+

velog

+ + + + +
+
+ +
+ + + +
+
+ + + + + \ 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; +} 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

+
+ + +

트렌딩

+ + + +

최신

+ +
+ + 새글작성 +
+ +
+ 오늘 + 이번주 + 이번달 + 올해 +
+
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + \ 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