Front End/Toy Project9 [Hello WM] Media query Responsive web page : Hello WM 2021.07.19 ~ HTML, Sass, JavaScript Media query까지 적용한 모습. (Desktop - Mobile - Tablet 순서) 처음 Figma로 디자인 구성을 했을 때와는 좀 많이 달라지긴 했다. 이 프로젝트를 하면서 Sass강의를 들었는데 grid 부분을 새로 알아가기도 했고, 전에 했던 부분이 마음에 들지 않아서 여러 번의 수정을 거쳤다. 크롬 개발자 툴로 디자인 구성이 흐트러질 때마다 break point로 설정했고 이제 남은 건 JavaScript로 할 작업들. 사진출처 : 이 프로젝트에 사용하는 B1A4, OHMYGIRL, ONF의 사진 모두 각각 그룹의 공식 트위터, 그리고 WM 엔터테인먼트 공식 트위터에서.. 2021. 8. 6. [Hello WM] Section Artists Responsive web page : Hello WM 2021.07.19 ~ HTML, Sass, JavaScript 이 부분을 어떻게 정렬하면 좋을까 고민했다. 안테나뮤직 홈페이지에서 본 것처럼 원으로 표현하고 싶었는데 여긴 솔로 뮤지션이 아니라 그룹이라 사진을 동그랗게 오려내면 멤버들 얼굴이 다 나오지 않을 것이 뻔해서 결국은 사각으로 진행했다. 인원이 많은 아이돌 그룹을 표현할 때 왜 사각형으로 쓰는 지 알겠더라. 뭔가 엔터테인먼트 하면 아티스트를 가장 먼저 떠올릴 거 같아서 강조하는 의미로 배경화면을 포인트로 쓰는 컬러를 넣었다. hover 했을 때 그룹의 이름과 각각의 SNS가 떠오르도록 표현했고, 그와 동시에 이미지가 약간 어둡게 되도록 표현. hover를 못하는 경우엔 안에 있는 내용이 바.. 2021. 7. 21. [Hello WM] Section About Responsive web page : Hello WM 2021.07.19 ~ HTML, Sass, JavaScript section about을 마크업하고 스타일링까지 했다. 처음에 구상할 단계에서 'About' 부분을 넣을 생각을 하지 않아서 어떻게 구현할까 고민하다가 헤더에서 썼던 이미지를 잘 보이도록 배치하고 그에 걸맞는 문장들을 배치했다. 섹션 타이틀 'About' 밑에 파란색으로 포인트를 줬고, 이것은 각 섹션마다 통일감있게 적용할 예정. 일단은 헤더에 있는 'about more' 버튼을 눌렀을 때 해당 섹션으로 이동하도록 했다. 조금 더 스무스하게 이동하는 건 HTML, CSS 작업을 하고 난 다음에 JavaScript에서 마무리 해야지. 오늘 한 것 : Section About 마크업 및 .. 2021. 7. 20. [Hello WM] Header Responsive web page : Hello WM 2021.07.19 ~ HTML, Sass, JavaScript 자고로 공부란 것은 덕질과 일치 했을 때 재미가 있지 않을까 라는 생각에서 출발했다. 반응형 웹사이트를 만들 생각을 가지고 있다가 드디어 프로젝트로 시작한다-! 처음엔 온앤오프와 관련된 사이트만 만들려고 하다가 그것을 넘어선 WM 엔터테인먼트 웹사이트를 반응형으로 방향을 틀었다. 김버그님 강의를 배울 때 모바일부터 먼저 마크업, 스타일링까지 하는 방법으로 했는데 이번에 Jonas 강의 들으면서 데스크탑 먼저인 웹사이트를 만들어본다. 약 한 달전 쯤... 피그마로 전반적인 디자인을 구성하고 이를 참고해서(디자인을 바꾸고 싶기 때문에) 시작하는 'Hello WM'. 여태껏 배운 것들을 접목.. 2021. 7. 19. 이전 1 2 다음
