20231129 / 고정 홈 버튼 / github / UTF-8 / 방명록 / 와이어프레임

1. 우측 아래에 고정 홈버튼을 만들어 보았다.

body 안에 해당 div 넣으면 끝!

        <div style="position: absolute; right: 80px; bottom: 50px;">
            <a href="홈주소링크넣기">
                <img style="width: 50px; height: 50px;" src="홈버튼이미지주소넣기">
            </a>
        </div>

---

2. 우측 아래에 고정적인 위로가기 (top버튼)과 아래로가기(bottom버튼)를 만들었다.

<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow" href="#" title="Back to Top"
                style="font-size:2.0em">위로↑</a>
            <br />
            <a style="display:scroll;position:fixed;bottom:10px;right:3px;" rel="nofollow" href="#scrollbottom"
                title="Go to Bottom" style="font-size:2.0em">아래로↓</a>

여기서
href="#"는 기본적으로 위로가는 것이고,
href="#scrollbottom는 바텀 위치를 지정해주어야 하는데, 맨아래에있는 코드에 id="scrollbottom" id값을 지정해주면 된다.

*이것을 응용해서, 원하는 영역으로 스크롤을 이동시키고 싶으면 해당 부분에 id값을 주면된다!

---

3. github에 html파일을 올려서 github page로 배포해보았다.

1) new 클릭해서 새 Repository 만들기

2) Upload files 누르기

3) html파일을 drag해서 올린후 Commit chages 누르기

4) Settings 누르기

5) Page 누르기

6) Branch 부분에서 none을 main으로 바꾸기

7) 조금 기다린 후, 제공된 https:// 이하 주소를 받기

https://jeongminhan23.github.io/team300/

---

4. 코드를 하나씩 보다가 의미가 궁금해서 알아보았다.

https://antstudy.tistory.com/29 해당 사이트의 내용을 참고했다.

<meta chae <meta charset="utf-8"> 태그

. html 파일의 인코딩을 알려주는 태그 이다.
. 쉽게 말해 브라우저에게  text를 어떻게 그려달라는지 말해주는 것.
. 위 태그가 없으면 한글, 특수문자 들이 깨져서 나올 수 있음.

---

5. 인코딩이란?

웹브라우저, 컴퓨터의 HTML파일을 웹브라우저에서 표시될 수 있도록 변환하는 처리작업을 말한다.

파일의 정보 형태가 어떤 언어로 되어 있는지에 대한 지정이 필요한데 이것을 문자 코드셋(위키백과로 이동)이라고 한다.

https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbirEvG%2FbtqM64iblbj%2FDnGN7ioMl2FAK8MsxOPwSK%2Fimg.png

---

6. 팀페이지에 방명록을 만들었다.

<section id="guestbook">
        <h1 style="color:black">&#x1F4E3팀300 멤버 응원하기&#x1F4E3</h1>
        <form id="guestbook-form" style="margin-bottom: 30px;">
            <label for="name"></label>
            <input type="text" id="name" name="name" required placeholder="이름">
    
            <label for="message"></label>
            <input id="message" name="message" rows="1" required placeholder="메시지"></input>
    
            <button type="button" class="btn btn-dark" onclick="addGuestbookEntry()" id="guestbook_button">방명록 남기기</button>
        </form>
    
        <div id="guestbook-entries">
            <!-- 작성한 방명록이 표시되는 공간 -->
        </div>
    </section>

<script>
        function addGuestbookEntry() {
            // 이 함수를 통해 방명록에 새 항목을 추가할수 있다
            var nameInput = document.getElementById('name');
            var messageInput = document.getElementById('message');
    
            var name = nameInput.value;
            var message = messageInput.value;
    
            // 방명록에 새로운 항목 추가하기
            var guestbookEntries = document.getElementById('guestbook-entries');
            var entryDiv = document.createElement('div');
            entryDiv.innerHTML = '<strong>' + name + ':</strong> ' + message;
            guestbookEntries.appendChild(entryDiv);
    
            // 입력 필드 초기화
            nameInput.value = '';
            messageInput.value = '';
        }
    </script>

이렇게 코드를 추가하고 Github에 넣어서 페이지를 열었더니,
방명록이 글은 작성이 되지만 내용이 남지 않았다 ㅜㅜ
어떻게 하면 작성한글들을 저장 할수있을까?
알아봐야겠다.

---

7. 와이어프레임을 이용해서 팀원들과 함께 홈페이지를 도면화 해봤다