[웹프로그래밍기초🎀] 7~8주차 개발일지

-------

개발 블로그를 티스토리로 옮기며 기존의 네이버 블로그에 작성한 내용을 그대로 옮겼습니다.

https://blog.naver.com/0yeonjae2/222326625193

[웹프로그래밍기초] 7~8주 차 개발일지

-------

2주 동안은 중간고사 공부로 블로그에 개발일지를 작성하지 못했다. 며칠 전 시험이 끝나 2주간의 시도들을 정리해 보고자 한다.

 

아래 사진은 최종 결과물이다!

제출일에 폰트 설정을 바꾸고 전체적으로 다듬었는데 로그인 회원가입 옆 아이콘 위치 조절을 깜빡 잊고 제출했다...

음원사이트 특성상 1시간마다 차트가 새로 고침되어서 새로 고침이 없는 새벽 시간대에 주로 작업했다.

 

 

정말 밤을 많이 샜다. 오전 수업이 없는 날이나 주말에는 무조건 해가 뜬 후에 잠에 들었다. 개인적으로 새벽이 가장 집중이 잘 돼서 새벽에 한 번 시작하면 기본 6시간씩 모니터 앞에서 작업했었다. 이후 밤낮 바꾸는데도 고생을 많이 했다. 시험이 끝나고 다시 정상적으로 패턴을 고쳤다.

 

이렇게 완성물만 보면 굉장히 작고 귀여운데 시행착오를 진짜 많이 겪었다. 큼직큼직한 오류나 알게 된 정보들을 중간중간 캡처해둬서 지금 블로그에 정리해보고자 한다.

 

1. z-index 사용법

 

 

 

음악의 세부 목록들을 먼저 작업한 후 최신 음악 창 앨범들을 정리하고 난 후 사진이다. 처음에는 너무 당황해서 어떻게 해야 할지 몰라서 구글에다 'css 맨 앞으로'를 검색했다. 검색 결과로 z-index에 대해 알게 되었다.

https://grace-go.tistory.com/38z-index는 가상의 Z 축을 만들어서 태그들이 보이는 순서를 조절한다. 기본적으로 Z-index 값은 0이다. 숫자가 커질수록 앞에 배치된다.

<CSS> z-index (태그들이 보이는 순위 정하기)

 

 

 

 

그래서 최신 앨범 내에 있는 아티스트 글자보다 메뉴들이 위로 올 수 있도록 z-index 값을 줘서 최종 화면과 같은 상태로

만들었다.

 

2. 음원차트 호버 시 생기는 변화 (동영상은 글 상단에 걸어둔 네이버 블로그를 통해 볼 수 있습니다.)

각 순위를 호버 했을 때 아티스트명이 원래 있던 자리가 아니라 곡명 아래로 내려오게 조절하는 것이 가장 어려웠다. 이 부분을 구현하려고 F12를 너덜너덜해질 때까지 열어봤다. 하지만 뚜렷하게 파악하는 데 실패했다. 그래서 결국 margin을 사용해서 위치를 일일이 조정했다.. 원래 이게 아닐 것 같은데 일단 위치를 잡아놓는 것이 중요할 거 같아 한 선택이다.

 

 

 

이제 여유가 생겼으니 다시 지니 사이트를 뜯어보며 찾아봐야 한다.

 

3. 투명도 조절하기 (동영상은 글 상단에 걸어둔 네이버 블로그를 통해 볼 수 있습니다.)

지니 사이트에서 이 부분을 보면 최신 음악 내의 각 앨범들을 호버 하기 전에는 사진 아래가 약간 어둡게 되어 있다. 이 부분도 F12를 열어서 확인해 봤는데 정확하게 잘 파악하지 못했다. 그래서 원래 사이트와 다른 방식으로 클론 코딩했다.

 

처음에는 아티스트명 글씨가 차지하는 칸을 만들고 배경을 검은색으로, opacity를 적용해서 실제 사이트와 유사한 효과를 주려고 했었다. 근데 이렇게 효과를 주면 아티스트명도 같이 흐려져서 원하는 결과가 나오지 않았다.

그래서 background에 그라데이션 효과를 주고 약간 투명하게 CSS를 적용했다.

 

 

호버를 하면 아래에 있던 아티스트명이 위로 올라오고 앨범명이 뜬다. 그리고 사진이 약간 검은 필터를 씌운 것 같은 효과가 적용이 되는데 이것도 어떻게 구현할지 고민이 많았다. 처음에는 검은 사진을 넣고

/*호버 전*/
.newAlbumInfo {
    display: none;
}
/*호버 후*/
.albumexhibiton:hover .newAlbumInfo {
    display: block;
    opacity: 0.3;

 

위와 같은 효과를 주려고 했었다.

 

근데 그렇게 하는 것보단 앨범명 글씨가 차지하는 칸을 최신 앨범 사진의 크기와 동일하게 조정하고

/* 앨범정보 */
.newAlbumInfo {
    width: 151px;
    height: 151px;
    position: absolute;
    top: 394px;
    background: black;
    text-align: center;
    display: none;
    vertical-align: middle;
}
/*호버 시 생기는 변화*/
.comprehensive_album .albumexhibiton:hover .newAlbumInfo {
    display: block;
    background: rgba(0,0,0,0.8);
}

 

위와 같은 속성들을 적용해 구현했다.

 

이후 자세히 살펴보면 호버 시 아티스트명 아래 그림자가 생긴다. 이 부분을 구현하기 위해 아래와 같은 코드를 작성했다.

background: transparent; /*이전에 적용한 그라데이션 삭제*/
text-shadow: 0px 9px 1px gray;

 

원래 제출 일주일 전에 다 작업했다고 생각하고 제출일 하루 전에 최종 점검 차 다시 확인했는데 생각보다 고칠 곳이 많이 보여서 당황했다. 폰트도 원래는 유사한 것으로 사용했는데 실제 폰트를 찾아서, 새롭게 적용하니 조금씩 구조가 깨져 거의 다 다시 조정했다.

 

많이 힘들었지만 내가 한 노력들이 다 반영되어 있는 결과물이라 굉장히 뿌듯했다!