[TIL] D+43 / 노코드 툴 / 개인과제 3일차
2024_12_19 목요일
+ 코딩 9일차
📝 Yesterday I Did
필요한 에셋을 모으고, 시안을 제작한 후에 웹플로우(Webflow)에서 배리어블에 컬러 추가와 폰트 클래스를 지정했다.
그리고 화면 레이아웃을 구성하고 콘텐츠를 모두 넣은 다음 인터렉션까지 구현했다!
💫 Today I Did
→제작한 페이지를 반응형으로 구현하고,
CMS를 사용하여 반복되는 구간을 Collection List로 구현했다 🙆♂️
✅ 과제 진행사항
오늘은 어제에 이어서 각 디바이스에서도 가독성이 좋고 예쁘게 보일 수 있도록 반응형 제작을 완성했다
모바일 portrait에서는 바보 같이 보이는데, 캡쳐를 하면 계속 저렇게 나온다🥲
실제로는 예쁘게 잘되어 있는데 왜 캡쳐만 하면 저화면만 계속 저렇게 나오는지 참나,,,
그리고 두개의 Wavve style섹션은 레이아웃이 동일하게 반복되어 있어서 이전에는 Class를 이용하여 반복하여 적용했는데,
오늘 반응형이 생각보다 일찍 끝나서 도전과제인 CMS를 한번 시도해봤다!
'Style' Collection을 생성하고 그 안에 두개의 리스트를 만들었다.
이 두개의 리스트가 사실 순서가 정해져있는데, 내가 입력순서를 잘못해서 순서가 반대로 돼버렸었다
그래서 튜터님께 순서를 바꾸는 방법을 여쭤봤는데,
모두의 정신건강을 위해 노가다가 그냥 바꾸는 것이 훨씬 편하고 쉽다고 말씀해 주셨다😂
바로 무슨말인지 이해 완.
그래서 노가다 까지는 아니고 새로운 리스트를 생성해서 순서대로 정보를 옮겼다!
그 안에 들어가는 필드들은 이렇다
사실 복잡해 보이지만 사실 그렇지 않다...
왜냐면 콘텐츠를 Rich Text로 지정하면 3개로 나오지만 Rich Text의 클래스를 지정하는 것이 엄두가 나지 않아서 한 콘텐츠에 필드가 3개 씩 들어가는 바람에 이렇게나 복잡해 보이게 된것이다.
참 이것도 우여곡절이 많았다...
이렇게도 해보고 저렇게도 해보고, 그리고 Plain Text 옵션은 엔터로 줄바꿈이 안되서 Rich Text로 다시 교체했다.
그러다보니 시간이 꽤 오래 걸린것같다.
그리고 사실 해결하지 못한 문제가 하나 있다....
⬅️ 바로 여기
보시다시피 중앙 정렬이 안맞다...
이게 왜 이렇게 됐냐면,
아까 필드를 콘텐츠를 Rich Text의 클래스를 지정하기 엄두가 안나서
각자 하나씩 빼는 바람에 복잡해졌다는 이야기를 했다.
바로 그 이야기의 연장선이다..
필드를 그렇게 만들었기 때문에 콘텐츠들이 현재 div로 묶여 있는 상태다.
위의 'Fit your screen'은 두개의 콘텐츠인 반면에,
아래의 'Fit your style'에서는 3개의 콘텐츠를 가지고 있고 각 div의 너비 를 지정하지 않으면 각자 엉망 진창이 되버려서 너비값을 지정해줬더니
이렇게 되버렸다...🫠
사실 Rich Text를 사용하면 해결이 될 듯한데,,,
약간 오기가 생긴다.
오늘 필드를 만들면서 그렇게 지지고 볶으면서 방법을 찾았는데,
이 방법에서도 잘 되게 하는 법을 찾고 싶다!
내일 한번 방법을 찾아보고 안되면 또 튜터님을 방문하는 걸루!
⭐️ 느낀점
오늘을 정리하자면 CMS와의 싸움이 아닐까 한다.
약간 하면서 오기가 생기는데 아직 오기를 가지고 작업하기엔 너무 코린이(코딩어린이)인걸까,,?🥲
노코드툴을 하면서 모르는 부분이 생겨서 정보를 찾아봐도 피그마 만큼 정보가 많지 않아서 조금 어려운 것 같다.
절대로 핑계는 아니다!
그래서 못하는게 아니라 그냥 정보가 그렇게 많지가 않더라~~~~이말이다..ㅎ
그래서 코딩을 하면서는 검색해도 정보가 피그마 만큼 많지 않고 사실 뭐라고 검색해야할지 모르겠기도 하다
html, css의 코드는 모르는데 있거나 잘못되는 부분있으면 gpt씨의 도움을 참 많이 받았었는데,
이제는 물어본다고 해도 뭘어찌 물어야할지 몰라 웹플로우에서는 사용을 잘 못하고 있다.
그래서 피그마를 사용할 때 보다 튜터님들을 방문하는 경우가 잦은 것같다.
너무 자주 찾아가는 건 아닐까 죄송할 정도로 찾아가서 어제부터는 하루간의 문제를 모두 모아서
하루에 한번만 가는 걸로 노력하는 중이다!
사실 그래서 오늘 이미 한번 다녀온 후에 마지막에 얘기한 문제가 발생해서, 일단 혼자 이렇게 저렇게 해보고
안되면 내일 튜터님을 또 뵈야할 것 같다(증말 죄송해요 튜터님...🥺)