반응형 디자인의 모든 측면을 살펴보는 과정입니다. 보기 좋고 모든 사용자가 이용할 수 있는 사이트를 만드는 방법을 알아보세요.
이 과정에서는 최신 반응형 웹 디자인의 여러 측면을 살펴봅니다. 처음 몇 개의 모듈에서는 반응형 디자인의 기초와 반응형 레이아웃의 기본사항을 살펴보세요. 여기에서 반응형 이미지, 서체, 접근성 등에 관해 학습합니다.
이 과정에서 웹사이트가 사용자 환경설정과 기기 기능에 반응하도록 만드는 방법도 배울 것입니다. 과정을 마치면 반응형 디자인이 미래에 어떤 영향을 미칠지 파악할 수 있게 됩니다.
각 모듈에는 지식을 테스트할 수 있는 데모와 자체 평가가 있습니다.
이 과정은 초급 및 중급 디자이너와 개발자를 위해 만들어졌습니다. HTML과 CSS에 관한 기본적인 이해만으로도 충분합니다. JavaScript에 대해 몰라도 됩니다. 웹사이트를 처음 만드는 초보자라면 HTML 소개 및 CSS 학습에 도움이 되는 다른 과정을 확인하세요.
학습할 내용은 다음과 같습니다.
소개
반응형 디자인의 유래에 대해 알아보세요.
미디어 쿼리
CSS 미디어 쿼리를 사용하여 다양한 화면 크기에 맞게 디자인을 조정합니다.
국제화
다양한 언어 및 쓰기 모드에 맞게 디자인을 준비합니다.
매크로 레이아웃
선택한 CSS 기법을 사용하여 페이지 레이아웃을 디자인합니다.
마이크로 레이아웃
어디에나 배치할 수 있는 유연한 구성요소를 빌드합니다.
서체
어디에 있든지 읽기 쉽고 보기 좋은 텍스트를 만드세요.
반응형 이미지
방문자의 기기 및 화면에 가장 적합한 이미지를 제공합니다.
사진 요소
이미지를 더욱 창의적으로 제어할 수 있습니다.
아이콘
확장 가능한 반응형 아이콘에 SVG를 사용합니다.
테마 설정
어두운 모드와 같은 사용자 환경설정에 맞게 디자인을 조정합니다.
접근성
웹사이트를 모든 사용자가 사용할 수 있어야 합니다.
상호작용
마우스, 키보드, 터치 등 다양한 입력 메커니즘에 맞게 페이지를 준비합니다.
사용자 인터페이스 패턴
다양한 화면 크기에 맞게 조정되는 일반적인 UI 요소를 고려하세요.
미디어 기능
미디어 기능을 통해 기기와 환경설정에 반응하는 모든 방법을 요약한 내용입니다.
화면 구성
여러 화면이 장착된 기기에 맞게 콘텐츠를 준비합니다.
결론 및 다음 단계
다음 단계로 나아가는 데 도움이 되는 추가 리소스입니다.
이제 반응형 디자인을 배울 준비가 되셨나요?