fylo dark theme landing page

fylo dark theme landing page - 프론트엔드 멘토

안녕하세요! 이 프로젝트를 확인해 주셔서 감사합니다!

이는 주어진 디자인에 최대한 가깝게 보이는 랜딩 페이지를 구축하는 것으로 구성된 프런트엔드 멘토 과제 에 대한 솔루션입니다. 목표는 현실적인 프로젝트를 구축하여 웹 레이아웃 기술을 향상시키는 것입니다.

1. 목차 ✒️

• fylo dark theme landing page - 프론트엔드 멘토
  • 1. 목차 ✒️
  • 2. 개요
    • 도전
    • 프로젝트를 실행하는 방법:
    • 모래밭
  • 3. 내 프로세스는?
    • 다음으로 제작됨
    • 내가 배운 것
    • 유용한 리소스
  • 4. 저자 ??

2. 개요

도전

사용자는 다음을 수행할 수 있어야 합니다.

• 사용자 기기의 화면 크기에 따라 사이트에 가장 적합한 레이아웃을 확인하세요.
• 페이지의 모든 대화형 요소에 대한 마우스오버 상태를 확인하세요.

fylo 어두운 테마 랜딩 페이지 챌린지" style="max-width: 100%;">

챌린지 세부 내용은 프론트엔드 멘토 페이지에서 확인하실 수 있습니다.

프로젝트를 실행하는 방법:

저는 이 프로젝트를 진행하기 위해 Node와 Gulp를 사용하여 만든 Adalab Starter Kit를 사용하기로 결정했습니다. 따라서 먼저 Node JS를 실행하려면 먼저 Node JS를 설치해야 합니다.

1. 저장소의 루트 폴더에서 터미널을 엽니다 .
2. 터미널에서 다음 명령을 사용하여 로컬 종속성을 설치합니다 .

npm install

1. 페이지의 라이브 버전을 표시하는 브라우저 창을 여는 다음 명령을 사용하여 프로젝트 실행을 시작합니다 .

npm start

모래밭

• 라이브 사이트 URL: https://leireomadina.github.io/fylo-dark-theme-landing-page/
• 솔루션 URL: 출시 예정

3. 내 프로세스는?

다음으로 제작됨

• 의미론적 HTML5 마크업
• HTML 템플릿 시스템
• CSS3 사용자 정의 속성
• 플렉스박스
• CSS 그리드
• BEM 방법론을 사용한 SASS
• 꿀꺽
• 모바일 우선 워크플로우를 갖춘 반응형 디자인

내가 배운 것

• SCSS에서 루프를 생성하려면 @for를 사용하세요. 이 경우 추천 섹션의 두 번째와 세 번째 카드만 선택하고 싶었습니다.

 .card {
  @for $i from 2 through 3 {
    & -#{$i} {
      margin-top : 1.8 rem ;
      @media all and ( min-width : 768 px ) {
        margin-top : 0 ;
      }
    }
  }
}

• svg 파일 사용 및 관리: viewBox 속성을 사용하여 위치와 치수를 수정하고, 제목 및 설명 태그를 추가하여 접근성, 인라인 및 CSS 스타일을 개선하고, 채우기 또는 획을 사용하여 색상을 사용자 정의합니다.
• ARIA 역할을 사용하여 웹 접근성을 향상시키세요. 예를 들어 다음 탐색 메뉴 역할을 살펴보세요.

 < nav class =" header-menu " role =" navigation " >
  < ul class =" header-menu__list " role =" list " >
    < li class =" header-menu__list-item " role =" list-item " >
      < a class =" header-menu__link " href =" # " role =" link " >
        Features
      < a >
    </ li >
    ...
  </ ul >
</ nav >

유용한 리소스

• @for를 사용하여 Sass 루프를 만드는 방법: https://www.youtube.com/watch?v=6CbsNFXMYgs. 공식 SASS 문서를 살펴볼 수도 있습니다.
• ARIA 역할, 상태 및 속성 목록(MDN): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
• 인라인 SVG 스타일: https://www.youtube.com/watch?v=af4ZQJ14yu8&t=844s
• 더 많은 리소스가 곧 제공될 예정입니다.

4. 저자 ??

• LinkedIn: leire-ordeñana-madina
• 트위터: @risingdana
• 이메일: [email protected]
• Behance: 레이레오마디나
• 코드펜: leireomadina
• 프론트엔드 멘토: @leireomadina

시간 내주셔서 감사합니다?