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?
- 페이지에 있는 곡선 부분을 CSS로 구현해보았다.
- ol태그와 li 태그를 이용해서 HTML을 구성해보았다.
- 반응형을 고려하며 위에서부터 아래로 내려왔다. (훨씬 더 헤매지 않을 수 있었다)
overflow-x: hidden을 해도 그 영역에 따로 스크롤이 생기는 문제가 있었는데,
그것은 overflow-x : clip으로 해결할 수 있었다.
hidden 과 clip의 차이점은 스크롤을 만들지 않는다는 차이가 있다!
https://tubular-granita-9709d3.netlify.app/
목표 설정
- 생각보다 시간은 더 걸리는 것 같지만, 그래도 꼼꼼하게 잘 구현했다고 생각한다...! 더 좋은 방법을 언젠간 또 알게 되길!
