[12/17 부트캠프] 카타, 과제: 웹플로우 랜딩페이지 제작①

 

내일배움캠프 D-40 (9주차)

 

📌To Do List

* 카타: SAAS - 슬랙 조사 ✅

* 과제: 웹플로우 랜딩페이지 제작① ✅

 

 

 

01 카타: 슬랙

✏️지옥의 슬랙...ㅋㅋ

전에 팀프로젝트에서 개선 프로젝트로 시작했다가 그렇게 조사만 하고 끝났던

마음 아픈 역사가 있는 슬랙.

 

한 번 조사한 경험이 있어서 어렵지 않게 정보를 조사할 수 있었다.

부수적인 정보만 조금 더 조사했다.

같이 조사를 맡던 팀원이 몸 아픔 이슈로 혼자진행했는데

내일 어떻게 조사할 지 같이 의견 나눠봐야겠다!

 

 

 

 

02 과제: 웹플로우 랜딩페이지 제작 (올라)

✏️내일만 하면 끝날듯

서비스 선정 ✅

리소스 다운로드 ✅ 

피그마 시안 제작 ✅

웹플로우 제작🏃 (현재 진행중)

 

 

 

기존 화면에서 상단 gnb바 추가하고 하단의 디자인과 footer 구성을 조금 바꿨다.

 

처음 메인 배경에 풍선 + 배경을 동시에 어떻게 넣을까부터 시작해서

메인부터 시간을 좀 끌었는데

한 번 해결이 되고나니 그 다음엔 쭉쭉쭉 이어나갈 수 있었다.

 

 

배경 요소가 2개든 3개든 background에서 +버튼을 눌러서 배경을 추가하면된다.

 

 

그리고 수정은 이렇게 새로운 패널이 열리는데 여기서 수정하면됨

제일 신기했던 건 제일 하단 Fixed에서 "Fixed"로 설정 시, 뒤에 배경이 고정된 상태에서 스크롤이 가능하다.

Not fixed로 설정하면 스크롤했을 때 그냥 콘텐츠 위로 올라가듯이 올라감.

메인으로 했을 때 임팩트 있는 건 아무래도 Fixed였는데 뭐... 모종의 이슈로 그냥 not fixed로 설정해줬다!

 

 

 

이렇게 텍스트 내부에 태그를 넣는 것도 가능했다.

좀.. 헷갈렸지만 그래도 해냈다!

 

 

 

이건 Grid를 사용해서 만드느 건데 저기 첫번째 카드 폭이 왜이렇게 좁아보이냐..ㅋㅋㅠㅠ

내가 생각했던 방향대로 레이아웃이 나오지 않았다.

이건 추후에 전체적으로 페이지를 다 제작했을 때 그 때 다시 수정해야겠다.

 

 

 

제일 어려웠던 건 class를 선정할 때

어떤 건 color가 white, 어떤 건 blue, 어떤 건 black...

그리고 사이즈도 어떤건 12~42px까지 다양했고

굵기또한... 맞춰줘야했는데

이거를 class로 일일이 다 맞춰줘야하는지... ㅠㅠㅠ

자꾸 기존에 있던 class 속성이 변경돼서 진짜 골머리를 앓았는데

 

아직도 이 원리에 대해서 제대로 이해하지 못했다.

좀 답답하긴 한데 일단은.. 할 수 있는데까지 해보련다!

 

 

 

마무리하며...

코딩주간에 포트폴리오 구성을 어느정도 정리해보려고했는데생각보다 코딩하는게 시간이 남지 않는다.왜 나는 시간이 남는다고 생각한 것일까아~ㅎ

 

12월이 연말이라 주말에 시간내는게 생각보다 쉽진 않았음 ㅠ주말에 남는시간 있으면 포트폴리오 구성하는데 투자해야겠다.

 

내일도 홧티잉~~!