##Portfolio1-FreeMusicLibrary
<<<<<<< HEAD
- dark mode에서 모바일 화면의 gnb가 색 적용이 안되고 있다.
- 어둡게 설정했는데 적용이 안됨. -- 띄어쓰기 문제로 복붙하다가 이상한 곳에서 띄어쓰기가 생겨서 적용이 안됬었음.
- 슬라이드 아이템에 대해서 display를 flex로 적용했는데 원하는대로 안굴러가기 때문에 기존 swiper의 속성을 확인해서 정상적으로 적용될 방법을 찾기. -- 개발자도구에서 오류를 확인하고 문제가 발생한 곳을 찾아보기. 이번에도 49번째 줄에 auto를 ""로 묶지 않아서 오류가 발생함.
MAIN
- 슬라이드를 전부 swiper로 변경하고, 버튼을 제거.
- swiper 설정으로 크기별 출력 개수를 지정.
- 로그인 페이지와, 회원가입 페이지 만들기.
- 슬라이드 아이템의 사진을 바꿀만 한 사진으로 찾아보기.
- 모바일 화면의 메뉴 UI에 대해서 생각해보기.
- 현재 너무 투박하고 별로이기 때문에 바꿀 수 있는 방법 찾기.
SUB
- Music Library에서 Top50의 마지막 번째가 슬라이딩 안되는데 왜 인지는 잘 모르겠다.
- 그냥 버그같은 느낌이라 나중에 껐다가 켜면 잘 될 수도 있을 것 같다.
- 메뉴중에서 아직 만들지 않았거나, 만들 예정인 부분에 대해서 경고창을 띄울 수 있도록 만들기.
- alert를 이용하거나, modal 을 이용해서 만들기. -- alert가 그나마 괜찮아보인다.
- 모바일 화면에서 메뉴창을 크게 키웠을 때 글자가 틀어지는 부분에 대해서 고민해보기.
- 다크모드에서 로고 커지는 것 수정하기
왜인지는 모르겠지만 우선순위 쪽에서 문제가 발생해서 !important 로 해결했다.
- 다크모드 버튼 색, 위치 수정하기.
색 및 위치 수정 완료.
- 로고 2개 다 선명하게 보일 수 있도록 만들기
색 변경 완료
- 푸터부분의 아이콘 모양 통일하기.
크기를 70으로 줄이고, 둥글게 변경, NCS의 이미지 변경.
- 모바일 화면에서 로고의 크기 조절하기.
w 250으로 수정
- 모바일 화면에서 메인페이지의 슬라이드 아이템이 1회 더 클릭되는 것 고치기.
아이템의 개수를 구하는 값에서 1을 빼고 결과값을 round 처리하면 될 것 같기도??
말 할 때 "일단은" 쓰지 말기
말 하는데 머리속으로 정리좀 하고 말하기.
- 슬라이드 아이템의 슬라이드 처리에 대해서. 현재 버튼을 눌렀을 때 아이템의 마지막 요소가 왼쪽 끝에 오는 방법을 고민해 봐야 할 것 같다.
현재 버튼을 누르는 횟수와, 아이템의 개수에 대한 값을 잘 넣긴 한 것 같다. 이제 화면에서 잘 작동한다.
- 다크모드 추가하기.
- 토글버튼이 존재하고 토글버튼을 클릭하면 화면이 다크모드로 바뀔 수 있도록 만들기. 로컬 스토리지에 테마를 저장하고, 저장되어있는 테마를 가져오기.
- css에 다크모드를 적용했을 때 어떻게 색을 바꿀 것인지 전부 설정해야 한다.
다크모드의 js 설정은 끝이 난 것 같고, 이제 CSS와 html에 추가해봐야 할 것 같다.
- 강의실에서 렉걸리는데.. 코드중에 문제가 있는건지 확인을 해 봐야 할 것 같다. -- 코드 다이어트의 필요성이 또 다시 늘어난 것 같다;; ###################################################################
- 탑 뮤직.html에서 이미지가 왜곡되면 안되기 때문에 이미지 수정하기 사진 확인 후 바꿔야 할 사진들의 인덱스 확인하기.
24개의 이미지 변경 완료.
- 헤더의 색 바꾸기. 로고와 배경 색상이 맞지 않기 때문에 바꾸기
일단 기본 모드인 white를 기준으로 만들었기 때문에 배경을 반투명의 흰색으로 바꾸고, 메뉴의 글자 색을 검정색 계열로 수정. 잘 안보일 수 있기 때문에 글자에 마우스 올리면 아래에 선이 생기도록 수정함. 글자도 로그인 및 회원가입과 메뉴의 색을 다르게 해서 적용함. = 메뉴가 눈에 더 잘 띄게.
- 버튼 수정하기
완료. 둥글게 만들고, 배경에 반투명 흰색, 호버시 진하게, 내부의 꺽쇠는 지우고, 가지고있던 png 이미지를 이용해 bgiu로 넣음.
- 탑 뮤직에서 아이템의 간격 조정하기 좌우는 괜찮은데, 아래쪽에 간격을 최상단 컨텐츠 간격의 반절만큼 넣어야 할 것 같다.
완료. mb25 추가.
- 탑 뮤직에서 컨텐츠의 크기에 대해서 고민하기 모바일 환경에서 좁아보이지 않을지, 아니면 어떻게 바꿔야 할 지 고민하기.
flex라서 화면의 크기에 맞춰서 줄어들거나 최대 5까지 늘어나게 되어있다. 이 부분에 대해서 변경의 필요성.... 좀 더 고민해봐야 할 것 같다.
크기를 grid로 바꾸거나 아니면 간격을 특정 버튼을 눌렀을 때 원하는 형태로 배열할 수 있게 만들기.
- 리사이즈 이벤트를 걸어준 값이 반환이 잘 되는지 알아보기.
리사이즈 이벤트가 발생할 때 마다 콘솔로 찍어서 잘 나오는지. 아니면 CSS에서 이상하게 적용된 것 일 수도 있으니, 모바일이나 화면이 줄어들었을 때 화면의 크기에 맞도록 수정하기
- 인덱스 페이지와 뮤직라이브러리의 CSS를 통일해서 동일한 형태 유지하기.
잘 되는것 같음.
- 코드 다이어트 하기.
내가 시간을 더 투자 할 포폴 2번에 시간을 더 쏟고 싶다면 다이어트는 미루기.
- 탑뮤직.html에 아이템별로 bddr 10인가 줬는데. 현재 사진이 위쪽으로 올라와 있어서 png파일만 모서리가 깎여있고, jpg 파일의 경우 각진 모서리가 그대로 나와있음.
해결. overflow: hidden으로 숨김 처리.
- 모바일 환경에서 footer 부분의 아이템 중앙 정렬.
해결. foot_list는 약간 다른 느낌이라 움직이지 않고, copyright와 정보 관련 부분만 중앙정렬 완료. foot_area에 tac 처리 copyright는 분리를 위해 위쪽 여백 10을 추가함.
- 모바일 화면에서 nice_scroll 플러그인을 사용할 지 고민하기.
포폴 2에서 써보자.
- 탑 뮤직 페이지에서 Top 50 Music 글자를 어떻게 처리할 것인지. 디자인 변경에 대해서 생각해보기. 현재 너무 별로임.
폰트 변경 및 색 변경 (#745582)
- 로고의 색상 변경하기. 현재 조금 진하고 배경의 파스텔 색상과 잘 어울리지 않기 때문에 이것보다 밝은 또는 다른 색으로 로고 제작하기.
로고 제작 완료, 연한 색의 light로고와 진한 색의 dark 로고 제작 완료.
- 슬라이드의 아이템 정렬하는 부분을 이름이 있는 함수로 만들고 리사이즈 함수 내부에서 실행하기.
아이템 정렬 부분을 함수로 만들고 (itemSort) 변경.
- 함수중에 이름이 없고 단일 실행되는게 있는지 알아보기.
지금 잘 되는거 보니까 따로 뭐 더 건들 것은 없는것 같다.
-
슬라이드 아이템의 테두리 변경에 대해서 생각해보기 둥글둥글하게 만들 것인지, 아니면 각지게 둘 것인지.
-
슬라이드 아이템을 그냥 두면 심심할 수도 있으니 CSS로 마우스를 올렸을 때 효과에 대해서 고민하기.
- 예전에 사용했던 transform이라던가 transition 이라던가. 효과에 대해서 고민하기. -- 클릭했을 때 아이템이 커지는 쪽으로 고민해 보는 것도 괜찮을 것 같음.
버튼에 마우스 올릴 때의 이벤트가 있어서 난잡해보임 => 안하는걸로.
- 메뉴창의 언더라인 추가 한 것을 색다르게 호버했을 때 0~100%로 늘어나는 형태로 만들어 보는 것도 괜찮을 것 같음.
안하는게 더 깔끔해보임
- 모바일 환경에서 메뉴가 아직도 검은색이다. 흰색으로 수정하기.
수정 완료. =======