홈페이지 » 웹 디자인 » 웹 사이트 구축 Superfast with Foundation 5 [안내]

    웹 사이트 구축 Superfast with Foundation 5 [안내]

    프론트 엔드 프레임 워크를 사용하면 다양한 방법으로 웹 디자인 워크 플로우를 향상시킬 수 있습니다. 그것은 할 수있다. 현대적인 디자인 원리를 따르도록 도와주세요. 시맨틱 마크 업 (semantic markup) 및 반응 형 디자인 (responsive design)과 같은 다양한 기능을 제공합니다. 너는 할 수있다. 바로 사용할 수있는 많은 CSS 및 JavaScript 요소 활용 크게 개발 프로세스 속도 향상, 시각 및 사용자 경험 디자인에 더 많은 시간을 집중할 수 있습니다..

    Zurb Foundation 5는 시장에서 가장 강력한 프론트 엔드 프레임 워크 중 하나입니다. 그것은 논리적으로 제작되었으며, 사용하기 쉽고 완전히 무료입니다. 그것은 당신이 유연한 CSS 그리드 그 깨끗하고 사용자 친화적 인 레이아웃을 쉽게 만들 수 있습니다.. Foundation 프레임 워크는 또한 많은 테스트를 거쳐 브라우저 간 및 장치 간 호환성을 처리합니다..

    이 자습서에서는 Zurb Foundation 5와 함께 웹 사이트를 어떻게 구축 할 수 있을까요?. 데모 페이지에서 최종 결과를 볼 수 있습니다..

    나는 웹 사이트의 레이아웃을 만들 것입니다, 미묘한 디자인 요소를 추가하는 작업이 당신을 기다리고 있습니다. 이 튜토리얼에서 함께 만들 웹 사이트는 현대 UX 디자이너의 꿈을 이룰 것입니다 : 반응 형, 모바일 우선, 사용자 친화적, 의미 론적.

    이 가이드의 길이 때문에 빨리 원하는 섹션으로 이동하는 방법은 다음과 같습니다.

    • 파운데이션 다운로드 5
    • 그리드 이해하기
      • Large-N, Medium-N 및 Small-N 클래스를 사용하는 경우
    • 톱 메뉴 바 추가하기
    • 주요 부분 채우기
      • 인기 게시물에 대한 패널 추가
      • 인기 패널에 3 개의 게시물 추가
      • CSS를 Prettying
      • 더 많은 콘텐츠 추가
      • 페이지 매김 추가하기
    • 사이드 바 채우기
      • 뉴스 레터 양식
      • Flex 비디오
      • 사이드 바 메뉴
    • 결론

    1. 파운데이션 다운로드 5

    Foundation 5는 4 가지 형태로 다운로드 할 수 있습니다.

    1. 완전한 코드
    2. 필수 코드 만있는 더 가벼운 버전
    3. 필요한 것을 사용자 정의하고 사용자 정의 할 수없는 사용자 정의 버전
    4. SCSS에서 변수와 믹스 인을 설정하려면 Sass 버전.

    이 튜토리얼에서는 바닐라 CSS로 전체 코드를 선택 하겠지만 사이트를 간소화하고 정말로 필요한 것을 사용하려는 경우 다른 버전을 선택할 수 있습니다.

    zip 파일을 다운로드하고 압축을 푼 다음 브라우저에서 index.html 파일을 열면 다음과 같은 내용이 표시됩니다.

    네, devs는 인덱스 파일에 편리한 링크를 포함 시켰습니다. 이 방법으로 그대로두고 home.html 같은 이름으로 프로토 타입을위한 새로운 파일을 만들 수 있지만 원하는 경우 언제든지 쉽게 기초 문서에 접근 할 수 있으므로 실제로 보관하지 않아도됩니다..

    좋아하는 코드 편집기에서 index.html 파일을 열고 내부의 모든 것을 삭제하십시오. 섹션이 있지만 닫기 전에

    우리가 추가하는 스타일 규칙은 app.css 우리의 프로토 타입을 꽤 할 파일은 다음과 같습니다.

     header margin-bottom : 2em;  .popular-additional h4 글꼴 크기 : 1.125em; margin-top : 0.4em;  .row .row.popular-main margin-bottom : 1.5em;

    기초 5는 상대 단위를 사용하기 때문에, 우리는 “여자 이름”-s 또는 “rem”-픽셀 대신 s 규칙을 지키려고. (당신은 CSS 단위에 대해 읽을 수 있습니다 : Pixels vs ems vs % 여기.) 파이어 폭스의 Firebug 확장을 사용하여 Foundation 5의 CSS 규칙을 대체해야하는 곳을 결정했다. 원하는 경우 다른 웹 개발 브라우저 확장을 사용할 수있다..

    여기이 짧은 CSS 스 니펫에서는 마지막 규칙 (.row .row.popular-main)에서 Foundation의 기본 CSS를 한 번만 대체해야했습니다. 데모 사이트는 다음과 같습니다.

    4.4 약간의 추가 콘텐츠 추가

    이전과 동일한 규칙을 사용하여 페이지의 기본 섹션에 더 많은 콘텐츠를 추가합니다. 우리가 지금 추가 할 내용은 최근 게시물 작은 미리보기 이미지.

    Foundation 5는이 단계에서 사용할 미리 준비된 멋진 미리보기 스타일을 제공합니다. 재단 썸네일은 미리 빌드 된 CSS 클래스 호출 “일” 아래의 코드 스 니펫에서 볼 수있는 방식으로 축소판 그림으로 표시하려는 이미지에 추가해야하는.

    각 최신 게시물에 대해 인기 패널 아래에 새 행을 추가합니다. 사용자 정의 CSS 클래스 호출 “최신 우편물”.

    태블릿 및 데스크톱 크기에서는 왼쪽에 Foundation의 미리보기 이미지 클래스를 사용하고 제목과 오른쪽에 짧은 설명을 사용하여 작은 미리보기 이미지를 보여줍니다. 모바일에서는 제목과 설명이 미리보기 이미지 아래에 표시됩니다..

    이제 나는 “중간 3 열” 과 “중형 -9 열” 클래스를 사용하여 화면을 1 : 3으로 나눕니다. 이미지의 경우 25 %, 중간 크기의 텍스트의 경우 75 %.

    인기있는 패널 아래에 다음 코드 조각을 세 번 (3 개의 최신 게시물에 대해) 삽입하십시오. 여기에는 최신 포스트 행 하나의 코드 만 포함됩니다. 모두 동일한 HTML 마크 업을 사용하므로 내용이 다릅니다..

     
      
     
    최근 게시물 제목
     
    최신 게시물의 내용 ...

    4.3 단계에서 만든 맞춤 CSS 파일, app.css 데모를 깔끔하게 유지할 수있는 새로운 스타일 규칙을 얻습니다.. 노트: 자신 만의 커스텀 CSS를 Foundation에 추가하고 싶다면 웹 개발자 도구를 사용하여 기본 규칙을 재정의해야한다는 것을 잊지 마십시오.

    아래의 CSS 스 니펫에서 첫 번째 규칙 (.row .rowest-post)에서 재정의해야합니다. 두 번째 규칙에서 우리 자신의 사용자 정의 선택기 (.latest-post h4) 만 사용하면 충분합니다..

     .row .row.latest-post margin-bottom : 1.5em;  .latest-post h4 margin-top : 0; 글꼴 크기 : 1.125em;

    프로토 타입은 이제 다음과 같이 보입니다.

    4.5 페이지 매김 추가하기

    이 단계에서는 최신 게시물 아래에 멋진 페이지 매김을 추가합니다. Foundation 5는 편리하고 사용하기 쉬운 페이지 매김 클래스를 통해 우리에게 도움의 손길을 제공합니다. 이 단계에서 동일한 코드를 사용하여 “많은” 페이지 매김 문서 내의 섹션.

    새로 추가 된 페이지 매김 섹션이있는 최신 게시물은 다음과 같습니다.

    5. 사이드 바 채우기

    이제 데모 사이트의 주요 내용을 준비 했으므로 오른쪽 사이드 바를 채울 차례입니다. 오른쪽 사이드 바는 모바일 및 태블릿 크기의 주요 콘텐츠 아래로 미끄러질 수 있습니다..

    이 섹션의 모든 코드 스 니펫을

    내장형 광학 슬레이브로 나만의 카메라 플래시 구현
    Roll.js로 스크롤 효과 만들기
    GridTab을 사용하여 반응 형 탭 위젯 만들기
    다음 기사
    나만의 자동 파일 업데이트 시스템 구축
    이전 기사
    시맨틱 UI로보다 신속하게 대응할 수있는 웹 사이트 구축