[Hello WM] Header

Responsive web page : Hello WM

2021.07.19 ~

 

HTML, Sass, JavaScript

 

 

---

 

 

자고로 공부란 것은 덕질과 일치 했을 때 재미가 있지 않을까 라는 생각에서 출발했다. 반응형 웹사이트를 만들 생각을 가지고 있다가 드디어 프로젝트로 시작한다-! 처음엔 온앤오프와 관련된 사이트만 만들려고 하다가 그것을 넘어선 WM 엔터테인먼트 웹사이트를 반응형으로 방향을 틀었다. 김버그님 강의를 배울 때 모바일부터 먼저 마크업, 스타일링까지 하는 방법으로 했는데 이번에 Jonas 강의 들으면서 데스크탑 먼저인 웹사이트를 만들어본다. 

 

약 한 달전 쯤... 피그마로 전반적인 디자인을 구성하고 이를 참고해서(디자인을 바꾸고 싶기 때문에) 시작하는 'Hello WM'. 여태껏 배운 것들을 접목해서 어느 정도 만족스러운 결과물을 만들고 싶다!

 

 

- 피그마로 작업한 반응형 웹사이트 디자인

 

 

 

- 오늘 작업한 결과물

 

 

 

오늘 한 것 :

스타일링에 필요한 기본적인 Sass 정리하기

제일 먼저 보이는 헤더 작업

네비게이션 바(일단은 hover했을 때 보이는 걸로, 나중에 자바스크립트로 완성하기)

'Hello WM' 글자 위에 호버했을 때 커지게끔 작업

 

 

 

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

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