프로젝트 일지(40)
-
(김유선) 개인프로젝트 SSR로 처음부터 끝까지 진행하기 - 상세 페이지 제작
이제 모든 페이지는 연결됐고, 상세페이지만 하면 된다. 상세 페이지 같은 경우에는 팀플에서 백엔드 쪽에서 쿼리스트링을 사용해서 api를 만들었는데,문제는 내가 쿼리스트링이 익숙하지 않다는 거다. http://localhost:8080/category/food 에서 .detailbtn을 클릭하면 'http://localhost:8080/detail&name=가게명' 이런식으로 이동해야하는데'http://localhost:8080/category/detail&name=가게명' 아마 카테고리의 url이 유지되면서 그런 것 같은데$('.detailbtn').click(function() { window.location.replace('/detail?name=' + $(this).parent().da..
2024.05.28 -
(김유선) 애플티비 사이트 퍼블리싱하기 (2일차)
video 태그 안의 요소와 테두리 요소의 비율이 맞지가 않았다. $('.first-vi').css('width','85.101vw'); $('.first-vi').css('height',$('.first-box').height()-5+'px');그래서 이렇게 높이를 조절하면 너비도 지정했음에도 불구하고 비율을 지키기 위해 내가 지정한 크기에 맞게 사이즈가 조절되지 않았다.그렇다고 높이를 지정하지 않으면 틀에서 넘쳐버렸다. 이건 overflow도 아니고 어떻게 해결해야 할지 고민이 됐는데,뤼튼의 도움을 좀 받았다 ㅎ object-fit이라는 게 있는데, object-fit: contain;을 사용하면 동영상의 비율을 유지하면서 크기를 조절할 수 있고,..
2024.05.28 -
(김유선) 애플티비 사이트 퍼블리싱하기 (1일차)
요거 퍼블리싱하려고 한다 ㅎㅎhttps://www.apple.com/apple-tv-4k/ Apple TV 4KApple TV 4K. Our best audio and video quality. Dolby Vision, HDR10+, and Dolby Atmos. Works seamlessly with Apple devices, services, and smart home.www.apple.com 근데 하다가 뤼튼 도움으로 되게 신기한 걸 발견했다!! background-color : transparent라는 건데, Apple TV 4K 줄의 z-index가 더 위에 있는데 뒤에 있는 요소가 보인다!내가 볼 때는 opacity 0을 준 것과 같아 보이는데 되게 신기했다. https://computer..
2024.05.27 -
(김유선) 풀스텍 양성과정 팀프로젝트 프론트엔드 05.22 전체 디자인 변경 - 프론트엔드 좋은 사이트
이번에 디자인을 살짝 변경하려고 했는데팀원이 전체적인 디자인 분위기가 웹사이트 같지 않다고 하셔서 전체 디자인 변경을 진행했다. 디자인을 변경하는 부분은 어렵지 않으니 적지 않고 이번에 퍼블리싱을 하면서 알게 된 좋은 몇 가지 사이트를 작성해둔다. gif 편집 사이트https://ezgif.com/effects?err=expired Add effects to animated gifsAdd effects and modify animated GIF images online. Rotate, reverse, flip, convert GIFs to grayscale or sepia. Change hue, saturation and lightness values. Add second counter and chang..
2024.05.22 -
(김유선) 풀스텍 양성과정 팀프로젝트 프론트엔드 05.16
카테고리 페이지랑 검색결과 페이지가 합쳐져서 한 디자인이 됐다.그래서 그거 디자인함요걸이렇게 바꿨다.이제 디자인은 너무나 쉽게 뚝딱이다 ㅎㅎ 그리고 이제 더 딱히 뭐 지금할 건 없는 것 같아서쉰당 ㅎ
2024.05.16 -
(김유선) 개인프로젝트 SSR로 처음부터 끝까지 진행하기 - 페이지 제작(5)
며칠 동안 못 찾은 문제(폰트와 이미지) 중 하나를 이제 해결했다. http://localhost:8080/search에선 잘만 뜨던 이미지가http://localhost:8080/category/food 에서는 이미지가 뜨지 않던 문제였다.경로 문제라고 생각했지만, 그렇다기엔 똑같은 경로로 이미지를 적은 위의 url 에서는 이미지가 잘 뜨니까 너무 이상했다. 며칠을 헤매다가 이상한 점을 발견했다.왼쪽은 정상작동하는 이미지의 경로고 오른쪽은 뜨지 않는 이미지의 경로다.태그 안에 입력된 경로는 같은데 마우스를 올려보니 둘의 실질적인 경로가 다르다.대체 왜 그런건지 잘 몰라서 뤼튼에게 물어봤다.어떻게 질문해야할지 고민이 많이 됐는데 그래도 뤼튼이 잘 이해해서 다행히 괜찮은 답이 나왔다. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ..
2024.05.16