Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[5주차 과제] 이윤서 #3

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[5주차 과제] 이윤서 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e80022b
feat: velog clone
dldbstj22 Oct 8, 2023
e43d7f7
week3
dldbstj22 Nov 3, 2023
1bee4d7
init project
dldbstj22 Dec 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velog </title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/def66b134a.js" crossorigin="anonymous"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=AR+One+Sans&display=swap');
</style>
</head>

<body>
<header>
<h1>velog </h1>
<button>트렌딩</button>

<button>최신</button>

</header>
<main>

<article>
<ul>
<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png" alt ="게시물1" ></span></a></li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/856/143/png-clipart-yellow-emoji-iphone-emoji-emoticon-smiley-emoji-face-electronics-face-thumbnail.png" alt = "게시물2" ></a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/630/871/png-clipart-heart-eyes-emoji-emoji-heart-iphone-love-emoji-smiley-sticker-thumbnail.png" alt = "게시물3"> </a> </li>

<li>
<a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/842/921/png-clipart-emoji-perspiration-text-messaging-smiley-face-laughing-face-smiley-thumbnail.png" alt = "게시물4"> </a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/866/942/png-clipart-emoji-love-heart-sticker-emoticon-emoji-love-emoticon-love-heart-thumbnail.png" alt = "게시물5"> </a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/856/143/png-clipart-yellow-emoji-iphone-emoji-emoticon-smiley-emoji-face-electronics-face-thumbnail.png" alt = "게시물6" ></a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/1018/609/png-clipart-sleepy-emoji-illustration-emoji-domain-iphone-sleep-face-smiley-thumbnail.png" alt = "게시물7"> </a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/66/827/png-clipart-emoji-iphone-emoji-hug-text-messaging-emoji-electronics-heart-thumbnail.png" alt = "게시물8" ></a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/881/437/png-clipart-emoji-emoji-tongue-icon-smiley-miscellaneous-heart-thumbnail.png" alt = "게시물9"> </a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/746/343/png-clipart-emoji-shocked-apple-color-emoji-surprise-sticker-emoji-smiley-anger-thumbnail.png" alt = "게시물10" ></a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/906/700/png-clipart-emoji-illustration-apple-color-emoji-sticker-iphone-emoticon-dead-island-orange-smiley-thumbnail.png" alt = "게시물11"> </a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/688/190/png-clipart-emoji-illustration-emoji-devil-emoticon-purple-innovation-smile-emoji-face-violet-thumbnail.png" alt = "게시물12" ></a> </li>

<li>
<a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/842/921/png-clipart-emoji-perspiration-text-messaging-smiley-face-laughing-face-smiley-thumbnail.png" alt = "게시물4"> </a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png" alt ="게시물1" ></span></a></li>
<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/881/437/png-clipart-emoji-emoji-tongue-icon-smiley-miscellaneous-heart-thumbnail.png" alt = "게시물9"> </a> </li>

</ul>


</article>
</main>



</body>
</html>
37 changes: 37 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
128 changes: 128 additions & 0 deletions week3/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velog </title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/def66b134a.js" crossorigin="anonymous"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=AR+One+Sans&display=swap');

.new-post-button {
padding: 6px 12px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f7f7f7;
}
</style>
</head>

<body>
<header>

<h1>velog</h1>
<div class="nav-box">
<a href="#none" class="trending">
<i class="fa-solid fa-arrow-trend-up"></i>
<p>트렌딩</p>
</a>
<a href="#none" class="recent">
<i class="fa-solid fa-arrow-trend-up"></i>
<p>최신</p>
</a>
</div>

<a href="new_page.html" class="new-post-button">새글작성</a>
<div class="dropdown">
<button class="dropbtn" id="menuButton" onclick="toggleDropdown()">메뉴</button>
<div class="dropdown-content" id="dropdownContent">
<a href="#" onclick="changeMenu('오늘')">오늘</a>
<a href="#" onclick="changeMenu('이번주')">이번주</a>
<a href="#" onclick="changeMenu('이번달')">이번달</a>
<a href="#" onclick="changeMenu('올해')">올해</a>
</div>
</div>

</header>

<main>
<div class="wrap">
<a href="#pop_info_1" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
<a href="#pop_info_2" class="btn_open"><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></a>
</div>
</main>
<div class="modal" id="modalContainer">
<div class="modalBox" style="text-align: center;">
<p><img src="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png"></p>
<button id="modalCloseButton" onclick="closeModal()">닫기</button>
</div>
</div>


<script>
function goToNewPage() {
window.location.href = 'new_page.html';
}

const modal = document.getElementById('modalContainer');
const menuButton = document.getElementById('menuButton');
const dropdownContent = document.getElementById('dropdownContent');

function toggleDropdown() {
dropdownContent.classList.toggle('show');
}

function changeMenu(text) {
menuButton.innerText = text;
dropdownContent.classList.remove('show');
}

const images = document.querySelectorAll('.wrap a');
images.forEach(image => {
image.addEventListener('click', (event) => {
event.preventDefault();
modal.classList.remove('hidden');
});
});

const closeModalButton = document.getElementById('modalCloseButton');
closeModalButton.addEventListener('click', () => {
modal.classList.add('hidden');
});
window.onload = function() {
modal.classList.add('hidden');
}
</script>

</body>
</html>
128 changes: 128 additions & 0 deletions week3/new_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}

ul {
padding: 16px 0;
}

ul li {
display: inline-block;
margin: 0 5px;
font-size: 14px;
letter-spacing: -.5px;
}

form {
padding-top: 16px;
}

ul li.tag-item {
padding: 4px 8px;
background-color: #777;
color: #000;
}

.tag-item:hover {
background-color: #262626;
color: #fff;
}

.del-btn {
font-size: 12px;
font-weight: bold;
cursor: pointer;
margin-left: 8px;
}
</style>
<head>
<meta charset="utf-8">
<title>태그 추가삭제하기</title>
<link rel="stylesheet" type="text/css" href="/tag_create.css">
<script type="module" src="/tag_create.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

<div style="margin-top:40px; margin-left:40px;" class="content">
<div style="display: flex;">
<h1 style="width: 150px; margin-right:30px;">태그 입력<h1 />
<input type="text" id="tag" size="20" placeholder="태그입력" />
</div>

<ul id="tag-list">
</ul>

</div>
<script> $(document)
.ready(function () {

var tag = {};
var counter = 0;

// 태그를 추가한다.
function addTag(value) {
tag[counter] = value; // 태그를 Object 안에 추가
counter++; // counter 증가 삭제를 위한 del-btn 의 고유 id 가 된다.
}

// 최종적으로 서버에 넘길때 tag 안에 있는 값을 array type 으로 만들어서 넘긴다.
function marginTag() {
return Object.values(tag)
.filter(function (word) {
return word !== "";
});
}

$("#tag")
.on("keyup", function (e) {
var self = $(this);
console.log("keypress");

// input 에 focus 되있을 때 엔터 및 스페이스바 입력시 구동
if (e.key === "Enter" || e.keyCode == 32) {

var tagValue = self.val(); // 값 가져오기

// 값이 없으면 동작 안합니다.
if (tagValue !== "") {

// 같은 태그가 있는지 검사한다. 있다면 해당값이 array 로 return 된다.
var result = Object.values(tag)
.filter(function (word) {
return word === tagValue;
})

// 태그 중복 검사
if (result.length == 0) {
$("#tag-list")
.append("<li class='tag-item'>" + tagValue + "<span class='del-btn' idx='" + counter + "'>x</span></li>");
addTag(tagValue);
self.val("");
} else {
alert("태그값이 중복됩니다.");
}
}
e.preventDefault(); // SpaceBar 시 빈공간이 생기지 않도록 방지
}
});

// 삭제 버튼
// 삭제 버튼은 비동기적 생성이므로 document 최초 생성시가 아닌 검색을 통해 이벤트를 구현시킨다.
$(document)
.on("click", ".del-btn", function (e) {
var index = $(this)
.attr("idx");
tag[index] = "";
$(this)
.parent()
.remove();
});
})</script>
</body>
</html>
Loading