[Workit Landing Page] 1 day

WHAT Frontenc Mentor?

https://www.frontendmentor.io/challenges?sort=difficulty%7Casc

---

CHALLENGE TITLE : Workit Landing Page

FOCUS ON

This HTML and CSS-only landing page will be an excellent test of your UI and responsive skills. There’s also some fun to be had creating the curved section borders!

 

UI와 반응형을 제작하는 데 도움이 된다고 합니다. 곡선 섹션 경계를 만드는 것도 재미가 있다고..!?

 

WHAT TO DO? 

-  오늘은 PC 화면만 구현해봤다.

- 겹쳐있는 듯한 레이아웃이 많아서, position으로 할 지 negative margin으로 할 지 고민을 해야하는 부분이 분명 있었다.

- underline을 주기 위해 text-decoration의 여러 속성을 알아보았고, 새롭게 알게된 것들이 있었다

 

underline 관련 css 속성

text-decoration : underline; // 밑줄
text-decoration-color : red; // 밑줄의 색상
text-decoration-thickness : 1px; // 밑줄의 두께
text-underline-offset : 5px; // 텍스트와 밑줄의 거리

 

완성본

 

 

https://shiny-pegasus-6f60d9.netlify.app

목표 설정

- 시안으로 봤을 때 곡선 구현을 svg로 해서, 나도 svg로 이미지 추가해서 작업했는데 챌린지 목표를 보니 css로 구현하는게 맞나보다... 하하

- 현재, 가로 스크롤이 생기는 것 (top-section쪽의 우측 pattern 때문)을 해결해야한다.

- 이번엔 타블렛, 모바일까지 반응형이 세 가지가 있어서 고려해서 HTML 태그를 구성 했어야 되었다는 생각이 든다.

- 사용하는 두 가지 폰트 중 한 가지가 적용이 되지 않고 있다.