fm recipe page

프론트 엔드 멘토 - 레시피 페이지 솔루션

이것은 FrontEnd 멘토의 레시피 페이지 챌린지에 대한 해결책입니다. Frontend Mentor Challenge는 현실적인 프로젝트를 구축하여 코딩 기술을 향상시키는 데 도움이됩니다.

목차

• 개요
  • 도전
  • 스크린 샷
  • 모래밭
• 내 과정
  • 구축
  • 내가 배운 것
  • 지속적인 개발
  • 유용한 리소스
• 작가
• 감사의 말

개요

도전

이 프로젝트의 브리핑은 레시피 페이지를 구축하고 다음 자산부터 시작하여 가능한 한 디자인에 가깝게 보이게하는 것이 었습니다.

• 모바일 및 데스크탑 레이아웃 용 JPEG 설계 파일
• 글꼴, 색상 등을위한 스타일 가이드
• 최적화 된 이미지 자산
• 가변 및 정적 글꼴 파일
• 사전 작성된 내용이있는 HTML 파일

스크린 샷

모래밭

• 프론트 엔드 멘토 솔루션
• Github 저장소
• 라이브 사이트

내 과정

구축

• 시맨틱 HTML5 마크 업
• CSS 사용자 정의 속성
• 모바일 우선 워크 플로

내가 배운 것

이 솔루션에는 나에게 새로운 세 가지가 포함되어 있습니다.

• 스타일링 목록 마커
• 스타일링 HTML 테이블
• 미디어 쿼리 사용

레시피 페이지에는 각각 준비 시간과 성분이있는 두 개의 변수되지 않은 목록과 지침이 포함 된 주문 목록이 포함되어 있습니다.

주문 목록의 경우 ::marker pseudo element를 사용하여 카운터를 스타일링했습니다.

. instructions li :: marker {
  font-weight : 700 ;
  color : var ( --brown-800 );
}

순응하지 않은 목록의 목록 마커 스타일링은 조금 더 어려웠습니다. 모바일 레이아웃의 JPEG 디자인 파일에서 마커는 첫 번째 텍스트 줄 옆에 앉지 않고 목록 항목의 텍스트 내용이 두 줄을 감싸는 경우 수직으로 중앙에 있습니다. 나는 pseudo element ::before 와 함께 사용자 정의 마커를 사용하여 마커를 Flexbox와 함께 배치했습니다.

. unordered {
  list-style : none;
  padding-left : 0 ;
}

. unordered li {
  display : flex;
  align-items : center;
  gap : 1.75 rem ;
  padding-left : 0.25 rem ;
}

. unordered li :: before {
  content : "•" ;
  font-weight : 700 ;
}

더 나은 접근성을 위해 HTML의 <ul> 요소에서 role="list" 사용했습니다. 그것 없이는 list-style: none Safari 브라우저가 더 이상 접근성 트리의 목록을 인식하지 못하며 화면 리더는 더 이상 항목 수와 같은 정보를 발표하지 않습니다.

지속적인 개발

이미지 최적화를 배워야합니다! 현재이 프로젝트에서 가장 큰 파일은이 readme에 대해 내가 취한 스크린 샷입니다. 글꼴 파일을 최적화하는 방법을 배웠습니다. 이제 스크린 샷의 파일 크기가 결합 된 모든 글꼴 파일의 크기보다 큽니다.

유용한 리소스

• Web.de의 Michelle Barker의 Creative List Styling-이 기사를 사용하면 순서대로 목록 마커를 스타일링하는 방법을 알아내는 데 도움이되었습니다.
• MDN의 스타일링 테이블 -이 기사는 기본 테이블 스타일링 기술에 적합한 새로 고침입니다.

작가

• 프론트 엔드 멘토 - @sabineemden
• Mastodon- @sabineemden

감사의 말

이 프로젝트는 Josh Comeau의 CSS 재설정을 사용합니다.

이 프로젝트에 사용 된 글꼴 가족은 젊은 세리프와 복장입니다. 글꼴은 Open Font 라이센스에 따라 라이센스가 부여됩니다.