day2_sound_warts: 연결과 페이지 구조 작성

(분명 머릿말에 구구절절한 프로젝트 진행 사연을 적었는데... 티스토리가 알아서 걸러줬다.
tistory: "어, 이건 말 안해도 되잖아. 괜찮지? 안괜찮아도 지울거임ㅇㅇ"
ㅋㅋㅋㅋㅋ 못내아쉽다.ㅋㅋㅋㅋ)

생활코딩 웹앱 만들기 강의를 따라가다가 JS실습 파트에서 뭔가 오류가 계속 발생했다. Nigth/day 버튼이 제대로 작동되질 않았다. 코딩상 문제가 있는 것 같긴 한데..... 지난번에 작성했던 방식과 조금 다르다고 금새 오류를 만들어버리는 내가 참 답답했다.
그래도 물고 늘어져 해결해보려 했으나, 도무지 찾질 못하겠어서 프로젝트 구체화로 방향을 전환했다. 머리 환기시킬 겸!

내일은 문제가 보이겠지. :D

---

목표치

• 오늘의 목표는 오직 하나였다: 기숙사 선택 페이지의 구조 작성하기

실제 실행 내용

• index 정보구조 수정
• huff lobby & 기숙사 선택 페이지 구조 작성
  • 기숙사 선택 페이지에서, '링크로 이동하기'구현하기가 까다롭기에
    목표하던 <select>는 잠시 내려두고 <a>태그로 기숙사명을 감싸는 방식으로 우선적 구현.
• index & 기숙사 선택 페이지 겸용 css 수정: h1, ul과 li 정렬. 그리고 li의 dot 없앰
• 기차 페이지에 h1 대사 추가, 버튼을 만들어서 기숙사 선택 페이지와 연결
• 영상 무한루프를 시도했으나 실패...ㅜㅜ
• 9와 3/4승강장(index임ㅋㅋㅋ)에서 영상 자동재생
  • clome에서 자동재생하기 위해서는 음소거로 영상이 시작되도록 지정해둬야 한다는 의견이 있었다. 아직 정확한 파악이 안 되었지만, 실행해봤음. === 자동재생 성공. 그러나 음소거로 시작됨.

---

진행 중 알게 된 것

• <li>태그 내에 속성으로 href값을 입력하진 못한다. 뒤따르는 텍스트를 <a>로 감싸 link를 걸어야 한다.
• 페이지 전체의 배경화면으로 이미지를 첨부할 때, 굳이 다운로드하지 않아도 된다.

<style>
  body{
  	background-image: url("https://images.unsplash.com/photo-1518727713078-80d11060492e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1546&q=80");
  }
</style>

• 비율 계산기가 있다!!!! 임베드할 영상 프레임 조정에 유용하다. 훗날 이미지 조정에도 쓰일 것 같다. 굿굿!
  • homzzang.com/ratio
• 텍스트를 횡적으로 중앙정렬하려면 text-align: center;
  글자 테두리 색을 지정하려면, text-shadow!
  text-shadow에서 앞의 1px은 "그림자의 horizontal(가로) 너비"를 나타내고, 뒤의 0은 "그림자의 vertical(세로) 너비"를 의미한다. 맨 마지막 10px은 그림자를 뿌옇게 블러blur처리하는 정도를 나타낸다. 0에 가까울 수록 그림자가 텍스트에 밀착한다.

h1{
  text-align: center;
  color:#f7f1e3;
  text-shadow: black 1px 0 10px;
}

---

향후 진행 예정 & 구현하고 싶은 기능

• 무엇보다도, 각 기숙사 페이지 작성
  • 이런 반복적인 걸 php로 해결하는건가? ....?
    • 일단은 할 수 있는 html 반복 노동으로 구현, 훗날 리팩토링해야지...하....ㅋㅋㅋㅋ
• 호그스미드, 
• 각 페이지 영상 자동재생(음소거 없이 제대로)
• 각 페이지 영상 무한루프
• 게이밍 요소 삽입하기
  • 예시1) 버튼 클릭 시, alert, alert 클릭 시 해당 페이지로 이동하는 link구조 구현하기
• index와 기숙사 선택 등 일부 페이지에서 텍스트를 화면 정중앙에 align
  • 이거 해본 적 있는데 그새 까먹었다.... 역시 복습, 실습 중요해 ㅜㅜㅜㅜ
• 채팅 api활용
• 채팅에 특색 있는 봇 운영
  • 1시간 or 뽀모도로(15분 또는 그 배수)에 맞추어 챗
• 각 '기간'에 맞추어 영상 리스트 변경
  • 예) 시험기간, 핼러윈 기간, 크리스마스 기간...
  • 시간 어딜 기준으로 할지는 미정
  • 해당 기간에 자동으로 리스트를 바꾸는 자동시스템 (꿈도 크지...ㅋㅋㅋㅋ)

---

하고 싶은 게 참 많다. 가야 할 길이 멀다.
*배운 것을 다 써보고 싶었는데, 분명 바쁘게 코딩했는데, JS는 아직 많이 쓰이지도 못했다! 미안하다 JS!!!!ㅋㅋㅋㅋㅋㅋ

그런데, 우스운 것은, 이 프로젝트를 하면서 다른 프로젝트'들'도 구상했고, 몹시 하고 싶다는 것이다.

부지런히 강의를 따라가며 인풋을 왕창 넣고, 프로젝트 구체화에 써먹고, 머리와 눈과 손에 익혀야지!

---

커버 이미지 출처: Photo by Tuyen Vo on Unsplash