문제사항
오늘은 방명록을 만들었다!
이렇게 만들고 보여줬는데 '방명록 작성하기' 버튼이 아래로 갔으면 좋겠다는 팀원의 의견이 있어서 아래로 내리기로 했다.
당연히 "아래로 내리기"에 초점이 맞춰져있어서 html과 css의 문제라고 생각했다. 근데 css를 수정을 해도 꿈쩍도 안하는것..
.guest-book {
width: 1320px;
height: 600px;
border: 3px solid black;
box-shadow: 20px 10px;
margin: 20px 20px 50px;
background-color: #FFD0A1;
list-style-type: none;
padding: 20px;
overflow-y: auto;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #F6DF67;
border: 2px solid black;
box-shadow: 2px 2px;
color: #333;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
border-radius: 5px;
transition: transform 0.2s;
margin-bottom: 20px;
}
이렇게 이래저래 해봤는데..꿈쩍도 안한다..
이렇게 코드를 짰는데, 완전 위로 올라가서, margin-top을 1000px까지 줘야하게 되었다.
이건 아니다 싶어서 html 코드를 뜯어봤는데,,,해결하지 못했다.
팀원분들이 도움을 줘서 내려가기까진 성공!
.guest-book {
width: 1320px;
height: 600px;
border: 3px solid black;
box-shadow: 20px 10px;
margin: 20px 20px 50px;
background-color: #FFD0A1;
list-style-type: none;
padding: 20px;
overflow-y: auto;
position:relative;
}
#showEntryForm{
position: absolute;
bottom: 0;
left: 0;
}
이렇게 겹쳐지는 것이다...
해결방안
결국 튜터님께 가서 원인을 같이 찾았다.. js의 문제
나는 무조건 css일거라고만 생각했지 js의 문제일거라고는 생각하지 못했다.
<div class="guest-book" id="guestBook">
<div class="message">3조에게 응원의 한마디 남겨주세요!</div>
<button class="showbtn" id="showEntryForm">방명록 작성하기</button>
</div>html 코드를 보면 지금 div 안에 message랑 버튼을 다 넣었더니 겹쳐지는 사태가 일어난 것.
사진을 다시 봐보자.
지금 보면 post랑 버튼이 겹쳐지는 상황이다.
message
post = btn내가 원하는건 post 아래에 버튼이 가게하는것
message
post
btn이렇게 되려면 코드도 저렇게 정렬이 되어야한다고 하셨다.
하지만 나는 firebase를 이용한거기 떄문에 post를 html로 작성하지 않고 js로 작성해놨다.
그러니 냅다 css로 수정해도 소용이 없었던 것
튜터님과 함께 이렇게 수정하였다.
<div class="guest-book" id="guestBook">
<div class="message">3조에게 응원의 한마디 남겨주세요!</div>
<div id="btnbtn"></div> // 여기에 div추가
<button class="showbtn" id="showEntryForm">방명록 작성하기</button>
</div>
이렇게 div 추가하고
나는 Snapshot을 사용해서 데이터가 바로 화면에 나오게 해놨기때문에 Snapshot 부분을 수정했다.
// Firebase에서 방명록 데이터 가져오기 및 실시간 업데이트
db.collection("guest-book")
.onSnapshot((snapshot) => {
const guestBook = document.getElementById("guestBook");
const guestBookhi = document.createElement("div")//const guestBookhi = document.createElement("div")
HTML 문서 내에 새로운 요소를 생성하였다.
새로운 div를 만들고 guestBookhi라는 변수에 할당하였다! 그럼 guestBookhi는 div요소를 참조하는 것이렇게 요소를 하나 추가하였다.
그리고
// 포스트를 게스트북에 추가
guestBook.appendChild(li);
guestBookhi.appendChild(li); // 추가guestBookhi.appendChild(li);
// guestBookhi라는 <div> 요소에 다른 HTML 요소를 추가하는 것 여기서 appendChild() 메서드는 guestBookhi라는 <div> 요소에 li라는 다른 HTML 요소를 추가한다. li 변수에는 화면에 보여질 리스트 아이템(<li>)이나 다른 HTML 요소가 할당되어 있어야 한다. newDiv.appendChild(guestBookhi)
//appendChild() 메서드는 newDiv라는 HTML 요소에 guestBookhi를 추가한다.
그럼 여기서, newDiv가 뭐냐?
newDiv는 코드 상에서 어딘가 이전에 정의되었거나 생성된 HTML 요소이다. 일반적으로 newDiv는 JavaScript로 새로운 HTML 요소를 만들 때 사용되는 변수 이름. 따라서 newDiv는 HTML 문서 내에 추가될 새로운 div 요소를 참조하는 변수이다.
처음에 저 newDiv를 forEach 반복문에 넣어서 아예 데이터가 안나오는 사태가 일어났으므로 만약, 데이터가 안나온다면 반복문 꼭 확인해보길 바란다.
const newDiv = document.getElementById("btnbtn");
newDiv.innerHTML = ""; //초기화 내가 위에서 추가한 li를 btnbtn으로 가져오는 코드를 넣었다. 지금 이 코드는 id가 btnbtn인 요소를 찾아서 해당 요소에 대한 참조를 반환하도록하였다. 지금 이 코드는 btnbtn을 newDiv 변수에 할당하였다.
그리고 초기화!
초기화 부분은 안넣어도 되는데, 그래도 넣어주는게 좋다고 하셨다!
이렇게 하니 내가 원하는 대로 된 것을 확인하였다.
느낀점
-
디자인 적인 요소라고 무조건 css의 문제일 거라고 생각하지 않기로 했다. js의 문제일 수도 있기에 내가 원하는 디자인이 뭔지 확인하고 수정할 것.
-
position을 함부로 쓰지말것
튜터님께서 position을 남용하는것은 좋지 않다고 하셨다. position을 쓰면 고정이 되기 때문에 다른 것들 수정이 어려워질 수 있다고 하셨다. 명심할 것! -
또 하나 이렇게 배워나간다.. 모르는건 물어봐야한다고 다짐한다
