📅 2024-01-19, 30일차

---

TODO

[프론트엔드]

• 영상복습
  • <카카오페이증권 4차시도>
  • <카카오페이증권 5차시도>
  • <카카오페이증권 6차시도>
  • <카카오페이증권 7,8,9차시도>
• transform: translatex (-50%) translatey (-50%) -> 뭐야 이거 복습해
• display 어쩌구도 복습해
• TOMCAT 설치 및 세팅

---

카카오페이금융 페이지 모작

요구사항: 메뉴바에 마우스 올리면, 2차메뉴가 내려오면서 2차메뉴의배경도 함께 내려오는 효과 적용시키기 (2차메뉴아이템의 길이만큼 길이도 조절되기)

내 생각의 흐름

버튼1 2 3 4 5 -> 1차메뉴아이템 같은 역할? o

검정색박스 -> 2차메뉴아이템과 같은 역할? transparent로 바꿔보기 o

초록색박스-> 1차메뉴아이템텍스트 뒤에있는 하얀색 박스. o

하얀박스위에 1차메뉴아이템텍스트 float사용? x 필요없었음

---

Cubic Bezier

• https://cubic-bezier.com/
• "cubic-bezier() function은 CSS에서 transition 속성 혹은 transition-timing-function 속성에서 전환 시작과 끝까지의 효과를 제어하는데 쓰인다."
• more info -> https://kutar37.tistory.com/entry/CSS-cubic-bezier%EB%9E%80

동영상 넣기

• 유튜브 소스코드 복사해서 HTML에 붙여넣기
• 바로 재생 및 음소거로 시작하기는

<!--소스코드 안에 추가-->
영상주소?autoplay=1&mute=1

---

소켓프로그래밍

JSP (Java Servlet/Server Page) / TOMCAT

• 사용자의 요청을 받을 수 있는 송수신기 -> tomcat
  • 브라우저 <-> tomcat <-> 프로그램 <-> DB
• 프로그램에서 TOMCAT을 연결해주는건 JSP

STS4에서 JSP 에러 났을때

1. 실행 중지 시킨 후
2. 톰캣 서버 삭제한 후
3. create new server하고
4. 아파치에서 아파치 10.1 선택 후 next
5. 파일을 오른쪽으로 add all 하고 finish
6. tomcat server 다시 더블클릭 후
7. 8080을 8081로 바꾸고 저장하고
8. 다시 실행(F11)
9. 톰캣 선택 후 next -> finish