30 응답 성이 뛰어난 웹 디자인 자습서
그래서 우리는 우리의 마지막에 도달했습니다. "반응 형 웹 디자인 주간", 오늘의 게시물은 시리즈의 마지막 것입니다. 다른 기기에 표시 될 때 원하는대로 응답하도록 코드를 조작하는 기술을 연마 할 수 있도록 최선을 다하고 있습니다. 그리고 이렇게하기 위해, 우리는 30 반응 형 웹 디자인 자습서 온라인에서 찾았습니다. 이 목록은 철저한 내용 일뿐만 아니라 모든 종류의 화면 크기를 수용 할 수있는 적응 형 웹 사이트 디자인의 기초를 이해하게합니다..
우리는 'Break Building the Ice'의 입문 튜토리얼을 시작으로, 'Start Building'연습으로 넘어 가기 전에 개념을 익히려면 RWD : 101과 같은 수업을 시작해야합니다..
마지막으로 수평 레이아웃, '탄력있는'동영상, 드롭 다운 메뉴, 슬라이드 - 아코디언 네비게이션, 미리보기 이미지 및 테이블과 관련된 끈적한 문제로 재생되는 자습서가 포함 된 '더보기'섹션으로 끝납니다..
하지만 ...
다음은 이번 주초에 작성자가 제공 한 두 개의 자습서입니다.
반응 형 웹 사이트 탐색
Thoriq Firdaus로 - [보기 튜토리얼]
다음은 자신 만의 반응 형 웹 사이트 탐색을 돕는 자습서입니다. 웹 사이트의 가장 중요한 측면 중 하나는 사이트의 다른 부분을 탐색하는 것이 얼마나 쉬운 지입니다. 이 튜토리얼을 사용하여 CSS3로 최적화하는 방법 알아보기.
반응이 빠른 이력서
Jake Rocheleau 저 - [보기 튜토리얼]
당신이 웹 전문가이고 온라인 이력서가 이미 귀하의 경력에 포함되어 있다면, 이력서를 다시 응답 할 수있는 기회를 가져야합니다. 고용주와 고객이 모든 장치에서 나를 쉽게 찾을 수 있도록하십시오. 그리고 자신이 이력서를 읽는 동안 자신의 이력서는 개발자로서 할 수있는 일의 포트폴리오를 겸합니다..
어색한 분위기를 없애다
자, 어디 있었 니? 아 맞아. 얼음으로 부서지는 행동을 시작하자.!
반응 형 웹 디자인 초보자 가이드
Nick Petit 저 - [보기 튜토리얼]
이 튜토리얼은 초보자를위한 훌륭한 출발점입니다. 웹 응답 설계가 무엇을 의미하는지, 어떻게 작동하는지, 유체 격자 및 미디어 쿼리에 대한 설명 등을 설명합니다. 자습서 하단에 나열된 리소스도 확인하십시오..
반응 형 웹 디자인 소개 : 비디오
Nick Petit 저 - [보기 튜토리얼]
이 튜토리얼은 길고 가벼운 9 분 길이의 자습서로 반응 형 웹 디자인의 표면적 모습, 웹 사이트 디자인에 미치는 영향 및 반응 형 웹 디자인 제작에 어떤 요소가 포함되어 있는지 보여줍니다. . 반응 형 웹 디자인에 대해 먼저 코딩하지 않고 무엇을 이해하고 있는지 알고 싶다면이 비디오부터 시작해야합니다..
모든 웹 사이트를 반응 형 사이트로 전환하는 방법
로체스터 올리베이라 - [보기 튜토리얼]
이 튜토리얼은 기초부터 시작하여 다른 기기에서 웹 사이트를 볼 때 영향을받는 요소뿐만 아니라 웹 사이트를 반응시키는 OS 및 브라우저를 포함하여 모든 것을 조금씩 나누어 설명합니다. 저자는 또한 WordPress 및 jQuery 플러그인을 사용하여 훨씬 쉽게 작업 할 수 있도록했습니다..
3 단계의 반응 형 디자인
Nick La 저 - [보기 튜토리얼]
이 튜토리얼에서는 메타 태그, HTML 구조 및 중요한 미디어 쿼리를 사용하여 반응 형 웹 디자인을 제작하는 방법을 설명합니다. 이해하기 위해서는 CSS에 대한 지식이 필요합니다 ...
반응 형 웹을위한 설계
Max Luzuriaga 저 - [보기 튜토리얼]
반응 형 웹 디자인을 만드는 지침서이므로 자습서가 아닌 기사가 있습니다. 즉, 저자는 글자 그대로 반응 형 웹 디자인의 할일과하지 말라고 말합니다. 왜 특정 기능이 충분히 반응이 없으며, 비율 및 모듈로 작업하는 법에 대해 설명하고 있으며, 무엇보다도 흡수가 비교적 짧고 쉽습니다.
반응 형 웹 디자인 : 비주얼 가이드
Andrew Gormley 저 - [보기 튜토리얼]
텍스트 채우기 자습서가 실행 가능한 옵션이 아닌 경우이 비디오 자습서를 대신 사용해보십시오. 그것은 여전히 기술적이지만, 기분이 나아진다면, 많은 것을 읽을 필요가 없습니다. 길이는 약 25 분이며 비디오 제작자는 코드가있는 부분을 실제로 빨리 가져 와서 코드가하는 일을 설명하기 위해 돌아갑니다..
건물 시작
자, 이제부터는 반응 형 디자인을 시작해 보겠습니다 ...
유체 그리드
Ethan Marcotte 저 - [보기 튜토리얼]
그리드를 말하자면 '견고한 구조'라고 생각할 것입니다. 유체를 말하면 브라우저에 압력을 가할 때 화면의 한쪽에서 아래 또는 위 또는 옆으로 흐를 수 있다고 생각할 수 있습니다. 유체 격자가 어떻게 설계를보다 반응 적으로 만들 수 있는지 충분히 이해하려면이 튜토리얼을 살펴볼 필요가 있다고 생각할 것입니다.
유체 이미지
Ethan Marcotte 저 - [보기 튜토리얼]
이 기사가 끝날 때까지 Ethan Marcotte가 누구인지 알아야합니다. 여기에 힌트가 있습니다. 그는 웹 반응 형 디자인의 개념과 용어를 생각해 냈습니다. 그의 이름은이 목록에있는 다른 모든 튜토리얼에서 꽤 많이 나오므로 마스터 이미지에서 직접 유체 이미지에 대한 조언을 듣지 않는 이유는 무엇입니까??.
반응 형 웹 디자인의 확장 가능한 탐색 패턴
Michael Mesker 저 - [보기 튜토리얼]
이 튜토리얼은 저자가 대규모 응답 웹 디자인 프로젝트 작업을 통해 얻은 교훈에 대해 설명합니다. 사용자에게 친숙하고 반응이 빠른 결과물을 쉽게 구성 할 수있는 템플릿을 만드는 방법에 대한 '연습'을 읽어보십시오. 데스크탑, 태블릿 및 모바일보기에서 가장 좋은 방법으로 인터페이스를 설계하는 방법을 이해하는 데있어 탁월한 모습입니다..
CSS3 미디어 쿼리로 반응하는 웹 디자인
Nick La 저 - [보기 튜토리얼]
또한 HTML5 및 CSS3을 사용하여 교차 브라우저 반응 형 웹 사이트 템플릿을 디자인하는 방법을 배우기위한 훌륭한 자습서가 제공됩니다. 단계별 접근 방식이며 미디어 쿼리의 영향을 더 잘 파악하기 위해 미디어 쿼리가 구현되기 전과 후에 웹 디자인에 대한 데모가 있습니다..
CSS 효과 : 텍스트 높이를 맞추기위한 공간 이미지 출력
조이 믹클리 길렌 워터 - [보기 튜토리얼]
이 튜토리얼에서는 브라우저 창 크기를 조정하는 방법과 상관없이 고정 너비 이미지의 크기와 간격을 변경하여 텍스트와 함께 정렬하는 방법을 배웁니다..
미디어 쿼리가 포함 된 적응 형 레이아웃
애런 구스타프 손 - [보기 튜토리얼]
CSS 미디어 쿼리에서 적응 형 또는 유연한 레이아웃을 사용하는 방법에 대해 알아보십시오. 연습을 수행하여 디자인을 이중 열보기 또는 단일 열보기로 변경하는 방법과 iPhone 및 iPad 용 디자인을 준비하는 방법을 배우십시오..
반응 형 이미지 : 상황에 맞는 이미지 크기 조정 실험
Scott Jehl 저 - [보기 튜토리얼]
다음은 모바일에서 빌드를 처음 사용하는 방법을 사용한 자습서입니다. 이 기술은 UA 스니핑뿐만 아니라 이미지 요구가없는 더 큰 화면 해상도에서 이미지를 사용할 수 있도록 더 큰 크기를 지정합니다..
더 많은 일을 할
탄력있는 동영상
Nick La 저 - [보기 튜토리얼]
이 자습서에서는 브라우저 창의 크기가 조정됨에 따라 비디오 크기를 조정합니다. 본질적으로 CSS 속임수이며 튜토리얼 자체에서 그 트릭을 볼 수있는 데모가 있습니다..
이미지의 일부 숨기기 및 공개하기
조이 믹클리 길렌 워터 - [보기 튜토리얼]
튜토리얼은 실제로 저자의 책에서 가져 와서 화면 해상도에 따라 이미지의 일부를 숨기거나 숨기는 방법을 설명합니다. 화면 크기가 변할 때 이미지를자를 수있는 방법을 알려주며 제한된 공간이있을 때 전체 이미지의 일부만 보여줍니다..
CSS3가 포함 된 반응 형 콘텐츠 탐색기
마리아 루 - [보기 튜토리얼]
사용자가 자신의 주위를 탐색하는 더 좋은 방법을 선호 하시겠습니까? 그런 다음이 자습서를 통해 페이드 인, 슬라이드, 회전 및 스케일 업과 같은 멋진 전환을 코딩하는 방법을 배우십시오. 전환은 기본적으로 특정 코딩으로 표시되거나 숨겨진 콘텐츠 레이어입니다..
반응 형 웹 디자인 템플릿 만들기
해리 앳킨스 - [보기 튜토리얼]
응답 형을 생성하는 간단한 자습서입니다. 웹 템플릿 데스크톱뿐만 아니라 iPhone에서도 작동합니다..
반응 형 수평 레이아웃
마리아 루 - [보기 튜토리얼]
이 튜토리얼에서는 여러 스크롤 가능한 내용 패널을 사용하여 가로 레이아웃을 만드는 방법을 설명합니다. 사용 종의 기원 샘플 텍스트로 책의 각 장은 풀 브라우저 모드에서 서로 옆에 배치 된 열로 구분되지만 크기가 충분히 작아지면 레이아웃이 완전히 수직으로 스크롤되는 '책'으로 바뀝니다..
작은 화면의 경우 메뉴를 드롭 다운으로 변환
Chris Coyier 저 - [보기 튜토리얼]
이 튜토리얼에서는 브라우저 창이 좁을 때 또는 휴대 기기를 사용할 때 메뉴를 드롭 다운 목록으로 변환하는 방법을 보여줍니다. 페이지 오른쪽 상단 모서리에있는 링크 행은 탐색 옵션을 희생하지 않고 공간을 절약하기 위해 드롭 다운 메뉴로 변환됩니다..
유연한 슬라이드 - 아코디언
마리아 루 - [보기 튜토리얼]
페이드 인 전환 및 화면 크기 및 해상도를 기반으로 조정 가능한 너비로 간단하고 유연한 아코디언 레이아웃을 만드는 방법을 익히십시오..
CSS3 오리엔테이션 미디어 쿼리를 사용하는 방법
라이언 세든 (Ryan Seddon) - [보기 튜토리얼]
세로 (너비가 너비보다 큼) 및 가로 (너비가 높이보다 큼) 모드를 정의하는 간단한 규칙에 따라 미디어 쿼리를 작성하여 볼 수있는 모드에 따라 특정 스타일을 지정할 수 있습니다. 이 튜토리얼은 그 방법을 보여 주며 브라우저 창을 축소 할 때 색상을 사용하여 색상을 변경하는 색상 변경 카멜레온에 대한 링크를 제공합니다..
반응 형 데이터 테이블
Chris Coyier 저 - [보기 튜토리얼]
테이블은 작은 화면 크기에 있어서는 골치 거리이지만 테이블을 완전히 피할 필요는 없습니다. 모바일 화면 크기로 전환 할 때 미디어 쿼리를 사용하여 테이블 변경 형식을 완전히 만드는 방법에 대해 알아보십시오. 데모를보고이 자습서를 기반으로 할 수있는 마법에 대한 아이디어를 얻으십시오..
시차 효과가있는 Fluid CSS3 슬라이드 쇼
링 윙으로 - [보기 튜토리얼]
두 개의 배경 이미지가 사용되는 CSS3 슬라이드 쇼를 만들고 배경 위치가 변경되면 시차 효과가 나타납니다. 그 외에도 슬라이드 쇼는 유연하고 브라우저 창을 닫으면 크기가 조절됩니다..
반응 형 미리보기 이미지 갤러리 구축 방법
조슈아 존슨 - [보기 튜토리얼]
갤러리의 미리보기 이미지가있는 웹 사이트에 유용합니다. 브라우저 창의 크기가 조정됨에 따라 레이아웃은 두 개의 열 (작은 화면 크기)과 다섯 개의 열 (최대) 사이에서 차지하도록 변경됩니다. 더 유사한 슬라이드 쇼 및 슬라이더를 보려면 Top 10 무료 응답 이미지 갤러리 / 슬라이드 쇼 문서를 확인하십시오..
모바일 장치 용 이메일 최적화
로스 호지 키스 - [보기 튜토리얼]
이메일도 웹 사이트와 같은 작은 화면보기에 맞게 최적화 할 수 있습니다. 대부분의 경우 HTML 전자 메일의 텍스트 크기가 편안한 읽기를 위해 만들어지지 않은 지점으로 조정됩니다. 이 자습서에서이 기능 및 기타 기능을 관리하는 방법에 대해 알아보십시오..
프레임 워크 사용
스켈레톤이있는 반응이 좋은 모바일 친화적 인 웹 사이트 구축
조슈아 존슨 - [보기 튜토리얼]
스켈레톤은 반응 형 웹 사이트를 구축하기위한 멋진 프레임 워크입니다. 이 튜토리얼에서는 스켈레톤 프레임 워크를 사용하여 반응이 빠른 멋진 디자인을 만드는 방법에 대한 단계별 가이드를 제공합니다. 당신은 그것이 얼마나 쉽게 구현되는지보고 기절 할 것입니다..
HTML5 & Less Framework 3로 반응하는 웹 디자인
Louis Simoneau 저 - [보기 튜토리얼]
less에 대해 제대로 소개하지 않았다면 Less Less CSS 튜토리얼을 먼저 확인하여 Less를 맛보십시오. 이 자습서에서는 Less 프레임 워크를 사용하여 미디어 쿼리의 효과를 명확하게 볼 수있었습니다.
결론
그리고 그것은 우리의 결론이다. 반응 형 웹 디자인 시리즈. 이 시리즈에 소개 된 테마, 도구 및 기타 리소스가 독자에게 반응 형 웹 디자인 개념을 공개하는 데 도움이되기를 바랍니다. 하지만 우리에게 말하지 않으면 어떻게 알 수 있습니까??
귀하의 의견을 알려주십시오. 그리고 당신이 hongkiat.com에서보고 싶다면 더 많은 아이디어에 대한 제안이 있다면. 우리에게 줄이나 코멘트를 남겨주세요..
