[3주차] 과제 이윤서 #2
Open
[3주차] 과제 이윤서 #2
Conversation
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
CSE-pebble
reviewed
Nov 23, 2023
Comment on lines
+92
to
+125
| <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> |
There was a problem hiding this comment.
.html 파일 안에 자바스크립트를 넣을 수도 있지만 따로 .js 파일을 빼면 가독성이 더 좋아질 것 같아요!!
코어님 3주차 강의자료 "JS로 웹 브라우저 조작하기"에서 목차 2.5 참고하시면 됩니다!
CSE-pebble
reviewed
Nov 23, 2023
Comment on lines
+9
to
+19
| <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> |
CSE-pebble
reviewed
Nov 23, 2023
Comment on lines
+3
to
+42
| <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> |
There was a problem hiding this comment.
style.css 처럼 별도의 파일(ex. new_page.css)을 만들어서 html 파일과 분리해주세요!
CSE-pebble
reviewed
Nov 23, 2023
Comment on lines
+84
to
+89
| <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> |
There was a problem hiding this comment.
이 코드가 지금은 모든 카드의 내용이 동일하기 때문에 괜찮은데, 나중에 확장해서 카드의 내용이 각기 다르고 그에 따른 모달창도 각자 달라진다고 할 때는 문제가 발생할 것 같아요😭
저도 처음에 카드별로 모달창을 하나하나 다 만들면서... 하고 노가다(...)를 했었습니다...
자바스크립트 코드로 카드를 누를 때마다 동적으로 모달을 생성하는 방법이 있는데, 코어님 코드 꼭꼭 확인해보시길 추천드려요!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
✨ 구현 기능 명세
드롭다운구현
모달창 구현
새글 작성 시 새로운 html로 이동 후 새로운 html에서는 태그추가 기능이 존재하도록 했습니다
🎁 PR Point
드롭다운을 최신과 트랜딩 옆에 두게하고싶었는데 css 바꿔보다가 시간이 없어서 실패했습니다.... 새글 작성 박스도 제가 쓴 css대로 구현이 안된 것 같아 이유를 찾아봤지만 찾아내지 못해서 많이 아쉽네요..
😭 어려웠던 점
html과 java는 구글링을 통해서 계속 보다보니 어느 부분이 어떤 기능을 하는지 아주 조금 감이 오지만 css가 아직 어려운 것 같아요 그래서 책을 사서 보고 해봤는데 시간이 여유롭지 못해서 많이 하찮은 결과물이라 속상하네요.. 시험 끝나고 좀 더 css에 대해서 공부해보고싶습니다 !
😎 구현 결과물
https://youtu.be/1n8Gdu4AwFs