프론트엔드 멘토 - 체질량 지수 계산기
환영! ?
프리미엄 프론트엔드 멘토 코딩 챌린지를 구매해 주셔서 감사합니다.
프론트엔드 멘토 챌린지는 현실적인 프로젝트를 구축하여 코딩 기술을 향상시키는 데 도움이 됩니다. 이러한 프리미엄 챌린지는 완벽한 포트폴리오 작품이므로 포트폴리오에서 만든 내용을 자유롭게 사용하여 다른 사람들에게 보여주세요.
이 과제를 수행하려면 HTML, CSS 및 JavaScript에 대한 깊은 이해가 필요합니다.
도전
귀하의 과제는 이 체질량 지수 계산기 페이지를 구축하고 가능한 한 디자인에 가깝게 보이게 하는 것입니다.
원하는 도구를 사용하여 챌린지를 완료할 수 있습니다. 그러니 연습하고 싶은 것이 있다면 마음껏 시도해 보세요.
사용자는 다음을 수행할 수 있어야 합니다.
1. 키와 몸무게를 입력하세요.
2. 입력한 값을 기준으로 BMI를 계산합니다.
3. 결과 구성 요소에 표시된 BMI 결과를 확인하세요.
4. 결과 구성요소에 표시된 체중 분류를 확인하세요.
5. 결과 구성요소에 표시된 건강한 체중 범위를 확인하세요.
도전에 대한 지원을 원하십니까? 커뮤니티에 가입하고 #help 채널에 질문하세요.
예상되는 동작
아래에서 BMI 범위와 체중 분류를 확인할 수 있습니다. 개인의 BMI 결과에 따라 결과 구성 요소 내의 "BMI에 따르면 귀하는 다음과 같습니다"라는 문장에 체중 분류를 추가합니다.
| BMI 범위 | 중량 분류 |
| ------------------ | -------- |
| 18.5 미만 | 저체중 |
| 18.5~24.9 | 건강한 체중 |
| 25~29.9 | 과체중 |
| 30명 이상 | 비만 |
BMI 하위 및 상위 분류와 개인의 키를 기준으로 개인의 건강한 체중 범위를 추가합니다.
모든 것을 찾을 수 있는 곳
귀하의 임무는 제공된 디자인 파일로 프로젝트를 구축하는 것입니다. 우리는 Sketch와 Figma 버전의 디자인을 모두 제공하므로 귀하가 선호하는 도구를 선택할 수 있습니다. 플랫폼에서 디자인 파일을 다운로드할 수 있습니다. 다른 사람과 공유하지 않도록 주의하세요. 디자인 다운로드에는 README.md 파일도 함께 제공되어 설정하는 데 도움이 됩니다.
이 프로젝트에 필요한 모든 자산은 /assets 폴더에 있습니다. 이미지는 이미 올바른 화면 크기로 내보내지고 최적화되었습니다. 일부는 다양한 화면 크기에서 재사용이 가능합니다. 따라서 특정 폴더에 이미지가 표시되지 않으면 일반적으로 해당 페이지의 다른 폴더에 있습니다.
또한 이 프로젝트에 필요한 글꼴에 대한 가변 및 정적 글꼴 파일도 포함되어 있습니다. Google Fonts에 연결하거나 로컬 글꼴 파일을 사용하여 글꼴을 직접 호스팅하도록 선택할 수 있습니다. 이 프로젝트에 필요하지 않은 글꼴 가중치에 대한 정적 글꼴 파일을 제거했습니다.
디자인 파일의 디자인 시스템은 이 프로젝트에 사용된 다양한 색상, 글꼴, 스타일에 대한 자세한 정보를 제공합니다. 우리의 글꼴은 항상 Google Fonts에서 제공됩니다.
프로젝트 구축
자신에게 편한 워크플로를 자유롭게 사용해 보세요. 다음은 제안된 프로세스이지만 다음 단계를 따를 필요는 없습니다.
1. 프로젝트 설정: 프로젝트에 대한 새 폴더를 생성하고 Git으로 초기화합니다.
2. HTML, CSS 및 JavaScript 파일을 추가합니다. 프로젝트에 필요한 파일을 만듭니다.
3. HTML 구조 구축: 디자인 파일을 참조로 사용하여 프로젝트의 기본 구조를 구축합니다.
4. CSS로 HTML 스타일 지정: 디자인 파일을 사용하여 프로젝트 요소의 스타일을 지정합니다.
5. JavaScript로 기능 추가: JavaScript를 사용하여 사용자 입력 및 계산을 처리합니다.
6. 프로젝트 테스트: 브라우저의 개발자 도구를 사용하여 프로젝트 기능을 테스트합니다.
7. 프로젝트 배포: 무료 호스팅 플랫폼에서 프로젝트를 호스팅하세요.
프로젝트 배포
위에서 언급했듯이 프로젝트를 무료로 호스팅하는 방법에는 여러 가지가 있습니다. 권장 호스트는 다음과 같습니다.
GitHub 페이지
넷티파이
베르셀
이러한 솔루션 중 하나나 기타 신뢰할 수 있는 제공업체를 사용하여 사이트를 호스팅할 수 있습니다. 우리가 추천하고 신뢰할 수 있는 호스트에 대해 자세히 알아보세요.
사용자 정의 README.md 만들기
이 README.md를 사용자 정의 파일로 덮어쓰는 것이 좋습니다. 이 시작 코드의 README-template.md 파일 내에 템플릿을 제공했습니다.
템플릿은 추가할 항목에 대한 가이드를 제공합니다. 맞춤형 README는 프로젝트를 설명하고 학습 내용을 반영하는 데 도움이 됩니다. 원하는 만큼 템플릿을 자유롭게 편집해 보세요.
템플릿에 정보를 추가한 후에는 이 파일을 삭제하고 README-template.md 파일의 이름을 README.md로 바꾸세요. 그러면 저장소의 README 파일로 표시됩니다.
솔루션 제출
나머지 커뮤니티가 볼 수 있도록 플랫폼에 솔루션을 제출하세요. 이를 수행하는 방법에 대한 팁을 보려면 "솔루션 제출에 대한 전체 가이드"를 따르십시오.
솔루션에 대한 피드백을 찾고 있다면 제출할 때 질문을 하세요. 질문을 더 구체적이고 자세하게 설명할수록 커뮤니티로부터 귀중한 피드백을 받을 가능성이 높아집니다.
⚠️ 중요 ⚠️: 이러한 프리미엄 챌린지에서는 플랫폼에 제출하고 공유할 때 디자인 파일을 GitHub에 업로드하지 않도록 주의하세요. 새로운 프로젝트를 생성한 경우 가장 쉬운 방법은 이 시작 프로젝트에 제공된 .gitignore를 복사하는 것입니다.
솔루션 공유
솔루션을 공유할 수 있는 여러 장소가 있습니다.
프런트엔드 멘토: 나머지 커뮤니티가 볼 수 있도록 플랫폼에서 솔루션을 공유하세요.
GitHub: GitHub에서 솔루션을 공유하세요.
Twitter: Twitter에서 솔루션을 공유하세요.
플랫폼에 솔루션을 제출한 후 솔루션을 공유하는 데 도움이 되는 템플릿을 제공합니다. 피드백을 찾을 때 해당 내용을 편집하고 구체적인 질문을 포함하십시오.
질문이 구체적일수록 커뮤니티의 다른 회원이 피드백을 줄 가능성이 높아집니다.
피드백이 있으신가요?
우리는 피드백을 받는 것을 좋아합니다! 우리는 항상 우리의 과제와 플랫폼을 개선하기 위해 노력하고 있습니다. 따라서 언급하고 싶은 내용이 있으면 hi[at]frontendmentor[dot]io로 이메일을 보내주세요.
즐거운 건축 되세요! ✨
