[3주차] 과제 이윤서 #2
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
|
Comment on lines
+84
to
+89
There was a problem hiding this comment. 이 코드가 지금은 모든 카드의 내용이 동일하기 때문에 괜찮은데, 나중에 확장해서 카드의 내용이 각기 다르고 그에 따른 모달창도 각자 달라진다고 할 때는 문제가 발생할 것 같아요😭 저도 처음에 카드별로 모달창을 하나하나 다 만들면서... 하고 노가다(...)를 했었습니다... 자바스크립트 코드로 카드를 누를 때마다 동적으로 모달을 생성하는 방법이 있는데, 코어님 코드 꼭꼭 확인해보시길 추천드려요! |
||
|
|
||
|
|
||
| <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> | ||
|
Comment on lines
+92
to
+125
There was a problem hiding this comment. .html 파일 안에 자바스크립트를 넣을 수도 있지만 따로 .js 파일을 빼면 가독성이 더 좋아질 것 같아요!! |
||
|
|
||
| </body> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
|
Comment on lines
+3
to
+42
There was a problem hiding this comment. style.css 처럼 별도의 파일(ex. new_page.css)을 만들어서 html 파일과 분리해주세요! |
||
| <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> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style.css에 넣어주시면 가독성이 더 좋아질 것 같아요!