[Workit Landing Page] 2 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? 

-  Tablet과 Mobile 페이지도 구현을 했다만, 굉장히 맘에 들지 않는다.

- 폰트 적용이 되도록 local의 폰트를 @font-face로 import 해주었다.

- 오른쪽에 있는 패턴 장식 때문에 가로 스크롤이 생기는 문제를 top-section 부분에 oveflow : hidden 을 주고, 핸드폰 이미지를 아래 section1에 absolute를 걸어주었다. (상당히 별로인 방법)

 

 

완성본

 

목표 설정

챌린지 설명을 보면서, 곡선을 이미지가 아니라 CSS로 구현해보라는 사실을 깨달아버렸다....!

- 곡선 CSS로 구현해보기

- section 1번째 부분 ol태그와 li 태그로 구성해보기

- 반응형을 고려해서 차근차근 내려오면서 작업해보기

(PC만들고 타블렛 만들고 모바일 만들고 하니, HTML 구성에서부터 별로였음)

- 핸드폰 이미지를 아래를 기준으로 absolute를 주는 방식이 아주 비효율적이었다. (반응형 구현에서)

  -> 배경을 이미지로 하지 않고, 곡선을 직접 구현하면 충분히 개선 가능해보인다.