Front End/Toy Project

[Hello WM] Section Artists

옐 FE 2021. 7. 21. 16:44

Responsive web page : Hello WM

2021.07.19 ~

 

HTML, Sass, JavaScript

 

 

 

 

 

 

이 부분을 어떻게 정렬하면 좋을까 고민했다. 안테나뮤직 홈페이지에서 본 것처럼 원으로 표현하고 싶었는데 여긴 솔로 뮤지션이 아니라 그룹이라 사진을 동그랗게 오려내면 멤버들 얼굴이 다 나오지 않을 것이 뻔해서 결국은 사각으로 진행했다. 인원이 많은 아이돌 그룹을 표현할 때 왜 사각형으로 쓰는 지 알겠더라. 뭔가 엔터테인먼트 하면 아티스트를 가장 먼저 떠올릴 거 같아서 강조하는 의미로 배경화면을 포인트로 쓰는 컬러를 넣었다. hover 했을 때 그룹의 이름과 각각의 SNS가 떠오르도록 표현했고, 그와 동시에 이미지가 약간 어둡게 되도록 표현. hover를 못하는 경우엔 안에 있는 내용이 바로 보이도록 해야겠다.

 

나중에 자바스크립트로 작업할 때는 마우스를 올렸을 때 저 상태가 유지되도록 addEventListener로 작업해야겠다.

 

아, 그리고 저 문제의 버튼... 버튼을 display: inline-block으로 설정하고 letter-spacing을 주었는데 마지막 문자까지 스페이스가 들어가서 이거 수정하려고 찾아봤더니 원래 있는 버그라는 내용 밖에...? 글자 수가 많을 때는 그렇기 티가 나지 않았는데 너무 신경쓰여서 결국에 'more' 앞에 스페이스를 넣어서 어느 정도 보완했다. HTML에 스타일링적인 요소가 들어가야할까 싶다가도 다른 방법이 떠오르지 않아서 이렇게 수정.

 

 

 

사진출처 : 이 프로젝트에 사용하는 B1A4, OHMYGIRL, ONF의 사진 모두 각각 그룹의 공식 트위터,

그리고 WM 엔터테인먼트 공식 트위터에서 가져왔습니다.