TIL 4 | 개인페이지 만들기 부제:hover 태그(에니메이션 기능 css)

오늘은 미니프로젝트 2째날이다.. 후.. 다들 헐레벌떡 만드시는거같다..화이팅!!

첫 미니프로젝트 개인페이지 기능 보기!!

 

 

오늘 팀들과 같이 하루종일 에니메이션 구현에 대한부분을 같이 봐왔고 내 페이지보다는 팀원들이 궁금한점이나 오늘 과정을 통해서 어떻게 해나가고 풀어나가는 그런 모든 부분을 같이 봐가면서 내 개인페이지를 꾸며야겠다는 생각으로 하루종일 팀원들과 소통을해나가면서 내 개인페이지는 좀 내버려두고 같이 도우면서했던거같다. (사실 핑계일지도모른다 ㅋㅋㅋㅋ 그치만 서포트하는게 나의 숙명..나는 원래 누군갈 돕는일에 능한편이다) 위의 영상과같이 오늘 크게  나의 개인페이지를 구성하기위해 레이아웃을 짜서 각각 배치를 해놓고 애니메이션기능을 많이 추가하였다. 애니메이션 기능으로써 hover 기능 hvr-grow라는 기능을 많이 썻고 또 nav바를 하나 만들어서 거기에다가 좌표를 줘서 아래로 내려갈수있게해줬다 또한 메인페이지는 개인페이지만 만든터라 붙여보질못했다. 그리구 각 앨범들을 동그라미로 만들어줘서 진짜 LP판 앨범처럼 만들어주는게 핵심포인트였고 저기에 아래 버튼으로 들어가기를 눌러보면 유튜브에서 내가 추천해준 음악을 들을수있다. ㅎㅎ 뿌듯 ㅎㅎ

 

div를 새로 생성한후 거기에 hover효과를 넣어준경우

<div class="album-info-distance-1 ">
    <div class = "hvr-shadow-radial">
    <img src="./img/hilife.jpg" alt="photo" class="rounded-circle hvr-grow" width="250"/>
    </div>
    <h2 class="album-name">HI-LIFE</h2>
    <p>한국힙합을 대표하는 레이블 하이라이트 레코즈의 컴필레이션 앨범 [Hi-Life]<br>
       [Hi-Life]는 젊고 도전적인 젊은이들의 성취, 성공, 삶의 목적에 대한 생각들이 담겨있다. 발매전부터 많은 힙합팬들의 기대와 관심을 받은 [Hi-Life]는 에너지가 넘치고 그들의 음악과 일에대한 열정과 사랑이 느껴진다.
    </p>

    <p><a class="btn btn-secondary" href="https://www.youtube.com/watch?v=W3eKyh88hDo">들어가기</a></p>

hover기능중 이미지태그에 쉐도우기능을 추가할려고하니 

 

<img src="./img/hilife.jpg" alt="photo" class="rounded-circle hvr-grow hvr-shadow-radial" width="250"/>

적용이안돼서 팀원들에게 물어보니 div를 하나 더 만들어줘서 구현을하게되면 해결할수있다는 사실을 알게되었다.

 

target="_blank"이 들어가기부분에 링크로 새창을 열어주고싶어서 찾아보게되었다.

 

출처: https://goldsystem.tistory.com/544

target="_blank" 코드의 의미

네비게이션의 투명도도 상당히 애먹었습니다.. 이 부분에 대한 이해가없었더라면 아마 구현못했을지도!!

 

 

https://codeomni.tistory.com/502#:~:text=css3%20%EC%86%8D%EC%84%B1%20%EC%A4%91%20visibility%20%EC%86%8D%EC%84%B1,%EB%A5%BC%20%ED%88%AC%EB%AA%85%ED%95%98%EA%B2%8C%20%EC%A7%80%EC%A0%95%ED%95%A9%EB%8B%88%EB%8B%A4.

[css3] 투명 네비게이션 바 만들기 네비바 투명도 설정하기 예제 소스 코드 이미지 배경 비디오 웹

 

오늘 이상록 튜터님께서오셔서 css랑 html 파일을 서로 분리해서 사용하는게 굉장히 효율적이고 좋다는 그런 여러가지 조언들을 많이 받아서 또 그부분에 대해서도 수정을 추가로하였습니다.

 

 

내가 가장 사랑하는 앨범을 누군가에게 전한다는건 그것만큼 자랑스럽고 기분 좋은일은없다. 개발과 힙합은 정비례한다고생각한다. 저렇게 앨범하나를 만들더라도 사람들은 자신의 혼과 영혼을 갈아넣는다는 표현을 흔히 하고들한다. 내가 존경하는 사람들은 전부 자신이 무슨 음악을하는지 아는사람들이고 어떻게 음악을해야 사람들의 마음을 움직일 수 있는지 아는 사람들이다. 그게 대중적이든 대중적이지않든 어쨋든간에 자신의 음악에 굉장히 프라이드가 높으며 그들의 음악속에 그들의 이야기 문화 그리고 그들의 생각을 담아내고들 한다.

나도 그런 개발자가되고싶다 내 혼과 영혼을 담아내서 나의 개발을 통해 누군가의 마음을 울릴수있는 그런 개발자가 되는게 어찌보면 에베레스트산을 등반하는것과같이 멀고도 긴 험남한 여정일지모른다. 그치만 내가 동경하고 또 존경하는사람들이 늘 하는 말들이 그런거였다. 가장 기억나는건 어떠한 형태로든 자신이 받은 사랑의 형태를 누군가에게 그대로 전달하라고 나도 그렇게 실천할려고 노력한다. 내가 받은 고마움이나 팀웍부분에서 그러한 감사함을 또 갚아줄려고 더 노력하고 도울려고 노력하는거같다. 내가 전공자지만 전공자라는 타이틀에 비해 실력도 되게없고 마치 래퍼들중에 흔히 말해서 실력은 x도없는데 유명한래퍼들이 나온 학교나와서 어디 공연에서 당당하게 pay달라는 그런 개발자는되고싶지않다. 열심히노력해서 내가 pay를 굳이 언급하지않고도 나에게 만족감을 줄수있는 그런 개발자가되는게 목표이자 꿈이다. 내가 정해놓은 the one & only 나이키 회사를 겨냥하듯 나는 늘 한길만 판다 just do it 포기하지않고 또 노력하고 노력 그리고 팀에게 늘 도움이 되는 그런 사람이 되고싶다. 

 

tmi지만 어제 아홉시쯤 내가 가장 사랑하는 레이블 HI-LITE 레코즈가 드디어 12년만에 해체됐다고한다. 나의 20대를 함께했던 그 추억들이 묻어있는 그런 레이블이 각자의 길을 걸어간다는게 마음끝이 시려왔다. 회사는 그렇다 비즈니스다. 정으로만할수없다는거 충분히인지한다. 그럼에도 불구하고 전 수장이였던 하이라이트 전 대표이사 전상현(Paloalto)님을 본다면 난 늘 존경스럽다. 늘 비즈니스적인 측면도 항상 바라보곤있었지만 자신과 함께해온 아티스트들(직원들)이 항상 자신의 음악(개발)을 할수있게 적극지원하고 늘 항상 좋은것만 줄려고 한 모습이 느껴진다. 그 아티스트가 그해에 어떤 앨범을 내건 얼만큼 벌건간에 수장다운 의리를 지키고 좋게 마무리 지은거같아서 난 그 점이 진짜 리더로써 너무 존경스럽다. 돈보다 중요한건 그사람이 어떤 음악(개발)을 하고 어떤식으로 임하느냐 이게 가장 중요한거같다. 실적으로 보여주는게 현 사회이기에 당연히 노력해야되는건 맞다고생각하지만 자신이 어떤 개발을하고 어떤 목표지향점을 갖추지않은선에서 영혼없는 개발을하고 그걸 파는 그런 개발자는되고싶지않다. 생각이라는건 한끗차이라고생각한다. 물론 내가 말한걸 제대로 이행할려면 적어도 이 판에서 최소 10년이상은 뛰어야 그런말할 자격 충분하다고생각하지만 그만큼 포기하지않고 노력해서 이뤄보고싶다. 내가 동경하던 이들처럼 나도 누군가에게 말할수있는 그런자격을 갖게된다면 개발자로써 성공한것 아닐까? 마지막으로 샤라웃 투 NIKE, HI-LITE RECORDS, 그리고 마지막까지 고생해준 우리 팀 조원들 동현님,민재님,규민님 모두 사랑합니다 화이팅!! 우리팀 오늘 진짜 고생많이했어...에휴..팀장보다 열심히해준 팀원들 너무 고마워요 ㅎㅎ

나이키처럼 just do it~~~

 

HI-LITE RECORDS 사랑합니다🤟🤟🤟