[TIL] 24.12.18(수)

 

개인 과제 2일차

 

STEP 3

레이아웃 잡기 (완료)

섹션 안에 컨테이너 안에 디브 안에...(X1000)
섹션이 많아질수록 점점 스크롤도 길어지고 구조도 복잡해져서 클래스 지정하고 관리하는 게 엄청 힘들었다.

클래스를 지정했는데 바뀌면 안 될 것들이 바뀌는 바람에 다시 콤보 클래스로 재지정하고… 이걸 엄청 반복한 것 같다.

네이밍을 알맞게 했는지는 모르겠지만, 그래도 정리하고 나서 최소한 나는 잘 알아볼 수 있게 되었다..ㅎ

하지만 나중에 팀 작업, 협업을 할 때는 네이밍 규칙을 잘 지켜야겠지…

공통적으로 쓰이는 네이밍에 대해 아직 잘 몰라서 더 찾아보고 공부해야겠다는 생각이 절실히 들었다.

 

 

STEP 4

Content 만들기

잡아놓은 구조 안에 Element를 이용하여 헤더를 넣었다. 푸터도 Element를 이용하려 했으나,
클론해야 하는 웨이브의 푸터를 담을 만한 예시가 없어서 직접 만들어봤다.

(푸터에 선이 들어가서 footer_top/footer_bottom 이런 식으로 영역을 나누었는데,
결과적으로는 내가 원하는 디자인이 나왔지만, 이 방법이 맞는지는 모르겠다…)

어제 등록해둔 variables를 활용하여 콘텐츠도 채웠다.

크롬 개발자 도구로 눈이 빠져라 요소 하나하나의 마진, 패딩 등을 확인하며 콘텐츠를 채워 나갔다.

수십 번 확인해서 진행했더니 결과 화면이 실제 웨이브 랜딩페이지와 어느 정도 비슷하게 나온 것 같다.

다만, 슬라이더 기능을 사용하여 캐러셀을 구현하고자 했으나… 웹플로우에서 제공하는 슬라이더가
디자인 변경이 너무 제한적이어서 (찾아보니 CSS 코드 변경 등으로 어느 정도 디자인 변경은 가능한 듯하다)
고민 끝에 그냥 캐러셀 구현은 포기하고 실제 랜딩페이지의 화면과 비슷하게 넣는 것으로 결정했다.

사실 캐러셀을 너무 구현하고 싶어서 구글에 영어로도 검색해보고, 영어로 된 유튜브 영상도 보고 하루 종일 검색해봤지만

내가 원하는 내용을 찾을 수 없어 포기하게 되었다… 너무 아쉽다ㅠㅠ

결과적으로 현재 내 웹플로우의 캐러셀은 클릭도 안 되고, 돌아가지도 않는 캐러셀 모양의 이미지일 뿐이다.

웹플로우 미리보기 화면 캡쳐본

 

 

---

이제 내일부터는

CMS 연동, 에어테이블 자동화, GA4 세팅, 인터렉션 구현하기, 반응형 디자인 구현하기를 진행해야겠다.

 

파이팅!!!