19 가지 정말 유용한 반응 형 웹 디자인 튜토리얼

작가: Louise Ward

창조 날짜: 10 2 월 2021

업데이트 날짜: 18 할 수있다 2024

동영상: 반응형 웹을 위한 Layout Grid 기능 l 피그마 기초 강좌

콘텐츠

01. 반응 적으로 생각하는 방법
02. 9 가지 반응 형 타이포그래피 팁
03. 반응 형 웹 타이포그래피의 규칙
04. em 기반 사이징으로 반응 형 사이트 디자인
05. 우선 순위 가이드 : 와이어 프레임에 대한 콘텐츠 우선 대안
06. 반응 형 웹 디자인에 대한 전문가 용 가이드
07. 반응 형 및 장치에 구애받지 않는 양식을 디자인하는 방법
08. CSS 그리드로 반응 형 레이아웃 만들기
09. 웹 디자이너를위한 Flexbox 가이드
10. Codrops Flexbox 참조
11. 스택 : 스케치 용 Flexbox
12. 기술 RWD의 집중 과정
13. Susy 및 Breakpoint로 유연한 레이아웃 만들기
14. Adobe XD에서 반응 형 가이드를 만드는 방법
15. BBC Sport의 CSS
16. 고정 바닥 글, 5 가지 방법
17. 입력에 적응
18. 모범 사례는 모바일 웹 성능을 저하시키고 있습니다.
19. 컨테이너 쿼리로 반응 형 웹 앱을 만드는 방법

반응 형 웹 디자인은 더 이상 선택 사항이 아닙니다. 요즘 사이트는 단순히 반응 형이어야합니다. 고맙게도 RWD는 설계를 만들고 테스트하고 최상의 사용자 경험을 만들 수 있도록 도와주는 훌륭한 도구가 너무 많기 때문에 구현하기가 그 어느 때보 다 쉽습니다.

다음은 웹 사이트가 모든 기기에서 잘 작동하고 멋지게 보이도록 안내하는 몇 가지 최고의 리소스를 모아 놓은 것입니다. 좀 더 유용한 리소스를 원하십니까? 최고의 웹 사이트 빌더 및 웹 호스팅 서비스에 대한 가이드가 도움을드립니다. 파일을 안전하게 저장하는 데 관심이 있다면 이러한 뛰어난 클라우드 스토리지 옵션이 필요합니다.

01. 반응 적으로 생각하는 방법

FreeCodeCamp에 대한이 게시물에서 Kevin Powell은 반응 형 웹 디자인이 더 이상 트렌드가 아니라는 점을 강조합니다. 사이트가 구축 될 것으로 예상되는 방식이며, 이는 처음부터 반응 적으로 생각하는 것을 의미합니다. 여기에서 그는 완전히 반응하는 3 페이지 웹 사이트를 구축하면서 반응 형 마음의 틀에 들어가는 방법을 보여줍니다.

02. 9 가지 반응 형 타이포그래피 팁

당연히 반응 형 웹 디자인에는 반응 형 타이포그래피가 필요합니다. 그러나 그것이 의미하는 바는 무엇이며 어떻게 구현합니까? 7 명의 주요 웹 디자이너에게 모든 뷰포트에서 우아하고 읽기 쉬운 텍스트를 만드는 방법에 대한 팁을 요청했습니다.

03. 반응 형 웹 타이포그래피의 규칙

반응 형 웹 타이포그래피는 어렵습니다. 디자인과 기술 노하우가 모두 필요합니다. 하지만 까다로울 수 있지만, 타이포그래피는 웹 디자인의 초석이기 때문에 오해하는 것은 선택 사항이 아닙니다. 올바른 설계 원칙과 실용적인 솔루션을 따르십시오.

04. em 기반 사이징으로 반응 형 사이트 디자인

글꼴 크기 조정에 em 단위를 사용하면 글꼴 크기가 변경 될 때 자동으로 응답하는 페이지의 구성 요소를 디자인 할 수 있습니다. 그런 다음 반응 형 글꼴 크기에 대한 영리한 트릭을 사용하여 브라우저의 뷰포트 너비에 따라 동적으로 조정되는 전체 페이지를 생성 할 수 있습니다. 이 자습서를 따라 ems의 '상대적'동작을 활용하여 확장 가능하고 반응이 빠른 디자인을 만드는 방법을 알아보십시오.

05. 우선 순위 가이드 : 와이어 프레임에 대한 콘텐츠 우선 대안

와이어 프레임은 웹 사이트, 앱 및 기타 디지털 인터페이스를 디자인하는 데 가장 널리 사용되는 도구 일 수 있지만, 특히 반응 형 디자인과 관련하여 단점이없는 것은 아닙니다. 여기서 Heleen van Nues와 Lennart Overkamp는 와이어 프레임 대신 선호하는 대안을 소개합니다. 모바일 화면의 콘텐츠와 요소를 포함하고 레이아웃 사양없이 계층별로 정렬 된 우선 순위 가이드입니다.

06. 반응 형 웹 디자인에 대한 전문가 용 가이드

Responsive Design Weekly 뉴스 레터의 큐레이터 인 Justin Avery가 작성한 net magazine의이 가이드는 웹 전문가에게 기본부터 고급 반응 형 웹 디자인 기술까지 안내합니다.

07. 반응 형 및 장치에 구애받지 않는 양식을 디자인하는 방법

양식은 모든 디지털 제품 디자인에서 가장 중요한 요소 중 하나입니다. 가입 절차가 필요한지 아니면 멀티 뷰 스테퍼가 필요한지에 상관없이 데스크톱뿐 아니라 휴대 기기에서도 효과적으로 작동하도록 디자인해야합니다. 방법은 다음과 같습니다. Flexbox 사용 방법에 대한 유용한 팁이 포함되어 있습니다.

08. CSS 그리드로 반응 형 레이아웃 만들기

CSS 그리드 레이아웃은 브라우저 지원에서 매일 증가하고 있으며 Flexbox 나 플로트를 대체하지는 않지만 함께 사용하면 새롭고 흥미 진진한 반응 형 레이아웃을 만들 수있는 좋은 방법입니다. Grid를 사용하여 반응 형 포트폴리오 사이트를 구축하려면이 단계별 가이드를 따르십시오.

09. 웹 디자이너를위한 Flexbox 가이드

Flexbox를 사용하기 시작하셨습니까? 이 튜토리얼에서 Wes Bos는이 강력한 도구를 이해하는 데 필요한 모든 것을 확실히 이해할 수 있도록 핵심 개념에 대한 포괄적 인 가이드를 제공합니다.

10. Codrops Flexbox 참조

Flexbox에 대한이 완전한 가이드는 세부 사항을 꼼꼼히 살펴 보지 않고 쉽게 따라 할 수있는 방식으로 개념을 설명하는 능력으로 유명한 저자 Sara Soueidan이 작성했습니다. Codrops 가이드는 정기적으로 업데이트되므로 필요할 때 돌아갈 수있는 훌륭한 리소스입니다.

11. 스택 : 스케치 용 Flexbox

자동 레이아웃 플러그인의 일부인 스택은 CSS를 사용하지 않고 Sketch 내에서 Flexbox 기술을 사용할 수있는 방법을 제공합니다. 이 문서에서는 쉽게 반응하는 디자인을 위해이 강력한 기술을 사용하는 방법을 설명합니다.

12. 기술 RWD의 집중 과정

Treehouse 블로그에 글을 쓴 Jerry Cao는 많은 유용한 정보를 비교적 짧고 읽기 쉬운 기사로 압축했습니다.

13. Susy 및 Breakpoint로 유연한 레이아웃 만들기

프레임 워크를 사용하여 반응 형 사이트를 구축하고 싶지 않다면 이러한 Sass 확장은 각각 고유 한 장점을 가진 좋은 대안입니다. 그들은 당신이 디자인에 집중할 수 있도록 반응 형 수학을 처리 할 것입니다.

14. Adobe XD에서 반응 형 가이드를 만드는 방법

XD (Adobe Experience Design)를 사용해보고 싶은 경우 시작하는 데 유용한 자습서가 있습니다. 프로세스의 모든 클릭을 안내하는 비디오 데모가 포함되어 있습니다.

15. BBC Sport의 CSS

이것은 튜토리얼 자체는 아니지만 여기에서 많은 것을 배울 수 있습니다. 이 게시물은 두 부분으로 구성된 시리즈 중 첫 번째 인 프런트 엔드 개발자 인 Shaun Bent가 BBC Sport에서 CSS를 수행하는 방법에 대해 자세히 설명합니다. 그들은이 방대한 사이트의 CSS 기반을 9kb 미만으로 유지할 수 있었으며 그 과정이 어떻게 이루어 졌는지 보는 것은 흥미 롭습니다.

16. 고정 바닥 글, 5 가지 방법

고정 바닥 글 ... 충분히 간단해야합니다. 불행히도. 바닥 글을 모든 장치의 올바른 위치에 배치하는 것보다 까다로울 수 있습니다. 다행히도 Chris Coyier는 다음을 사용하여이를 실현하는 데 도움이되는 5 가지 트릭을 모았습니다. calc (), Flexbox, 음수 여백 및 그리드.

17. 입력에 적응

반응 형 디자인은 페이지가 모든 장치에서 제대로 표시되도록하는 것이 아니라 제대로 작동하도록 만들어야합니다. 즉, 데스크톱에는 터치 스크린이 있고 휴대폰에는 키보드가있는 세상에서 입력을 잘 받아 들여야합니다. Cloud Four의 Jason Grigsby가 작성한이 기사에는 몇 가지 건전한 조언이 있습니다.