🔗 Frontend Mentor Pro

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Suite Landing Page FOCUS ON This small-ish HTML and CSS only landing page includes some interesting layout decisions. Perfect if you want to put your layout and responsive skills to the test! 반응형과 시안 안의 몇 가지 요소를 CSS로 구현하는게 재미있을 거라고 하네요! WHAT TO DO? - 두 번째 섹션과 footer 부분을 완성했다. - z-index에 대해서 생각한..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Suite Landing Page FOCUS ON This small-ish HTML and CSS only landing page includes some interesting layout decisions. Perfect if you want to put your layout and responsive skills to the test! 반응형과 시안 안의 몇 가지 요소를 CSS로 구현하는게 재미있을 거라고 하네요! WHAT TO DO? - 기본적인 레이아웃 구조 작업을 했다! text-transform : 태그 안에 ..

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와 반응형을 제작하는 데 도움이 된다고 합니다. 곡선 섹션 경계를 만드는 것도 재미가 있다고..!? (나는 안만들고 이미지로 떼웠기 때문에 아주 놀랐....구현해야겠다ㅜㅠ) WH..

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 화면만 구현해봤다. - 겹쳐있는 듯한 레..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Single price grid component FOCUS ON In this challenge, you will build out the pricing component to the designs provided. This is perfect for beginners and people who want to complete a smaller challenge. 프로젝트 디자인에 대한 설명이네요 (제공된 디자인에 맞춰 가격 정보를 구성해라) WHAT TO DO? - 그리드를 이용해서 레이아웃을 짰는데, grid-area ..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : NFT Preview Card Component FOCUS ON This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with. HTML과 CSS를 갓시작한 사람에게 좋을 거라고 하는 군요. WHAT TO DO? - 작업 전반적으로는 쉽다고 느꼈으나, 메인 커버 이미지 hover 효과 접근을 너무 어렵게 시작했다. 처음으로 했던 생각 눈 아이콘과 배경 색상을 구분 ..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Recipe page FOCUS ON This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects. 반응형 페이지를 만드는 데에 도움이 된다고 하네요. 프론트엔드를 추천해준 분에게 1차 완성본에 대한 피드백을 받아봤는데, 생각보다 내 코드에 수정할 부분이 많았다. 많은 걸 깨달았던 좋은 피드백 시간 👍 피드백에서 알 수 있었던 내용 height 값을 임의로 지정하는 것은 나쁜 습관! ( 유연성을 해침 ) 상속을 고..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Product Preview Card Component FOCUS ON This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects. 반응형 페이지를 만드는 데에 도움이 된다고 하네요. WHAT TO DO? - 상품 이미지에 hover 시, 자연스럽게 확대되는 것을 추가해서 구현해봤다. transition 을 처음 이용해봤는데, 제대로 이해하고 쓴 것 같지는 않지만 그래도 정상적으로 동작하게 만들었다는게 스스로 신..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Recipe page FOCUS ON This challenge will help you focus on writing semantic HTML. Ensure you think through what HTML elements are most appropriate for each piece of content. 각 요소에 가장 적합한 시맨틱 태그가 무엇일지 고민하면서 제작해보라고 한다. WHAT TO DO? - li 태그와 텍스트 사이의 간격을 늘리고 싶어서, 약간 얌체같은 방법을 선택해서 간격을 늘려보았다. 목표 설정 - ..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Recipe page FOCUS ON This challenge will help you focus on writing semantic HTML. Ensure you think through what HTML elements are most appropriate for each piece of content. 각 요소에 가장 적합한 시맨틱 태그가 무엇일지 고민하면서 제작해보라고 한다. WHAT TO DO? - list-style-image 속성을 이용하여 시안에서 주어진 dot 이미지로 바꿔주었다. - 태그의 역시, 원하는..