Lynda.com에서 CSS Flexbox 배우기

• 할 수있다 7, 2024

웹에서 평생 지속되는 10 년 후, 우리는 MUSED Literary Review 웹 사이트에 새로운 모습을 주기로 결정했습니다. 물론 최신 HTML과 CSS를 사용하고 싶었습니다. Flexbox, CSS Grid 및 Responsive Web Design을 사용하는 것입니다.

Lynda.com 덕분에 속도를 높이는 데 오랜 시간이 걸리지 않았습니다. 다음은 MUSED의 새로운 모양을 디자인하는 데 도움이 된 최고의 비디오 자습서 중 일부입니다.

CSS Flexbox를 사용한 고급 반응 형 레이아웃
모르 텐 랜드 헨드릭슨
이 프로젝트 기반 과정에서 작성자는 Flexbox 메뉴, 반응 형 카드 레이아웃, Holy Grail 레이아웃 및 대화식 구성 요소를 구축 할 때 단계별로 안내합니다.

그리드가있는 CSS 고급 레이아웃
모르 텐 랜드 헨드릭슨
이 과정에서 많은 것을 배우게됩니다. 작성자는 CSS 그리드의 기본 및 그리드 레이아웃 계획으로 시작합니다. 그런 다음 다중 열 레이아웃과 전체 블리드 단일 열 레이아웃을 구축 할 수 있습니다. 다음으로, 다양한 카드 레이아웃을 디자인하는 방법과 필요할 때 화면으로 슬라이드되는 오프 스크린 탐색 패널을 학습합니다.

CSS 필수 교육 3
크리스티나 트루 옹
이 과정에서는 CSS Grid 및 Flexbox를 사용하여 반응 형 레이아웃을 작성하는 방법을 배웁니다. 또한 Retina 디스플레이 및 SVG 벡터 이미지를 위해 웹 이미지를 준비하는 방법에 대해서도 배웁니다. 그런 다음 저자는 간단한 CSS 애니메이션, 반응 형 타이포그래피 및 접근성으로 넘어갑니다.

CSS Flexbox 첫인상
제임스 윌리엄슨
이 과정은 CSS Flexbox 레이아웃 모듈의 모든 구문을 배우면서 단계별로 안내합니다. 필자는 Flexbox가 수행 할 수있는 작업과 현재 브라우저 지원에 대해 설명합니다. 그런 다음 요소 흐름, 내용 래핑, 항목 정렬 및 플렉스 컨테이너 중첩과 같은 주제에 대해 자세히 설명합니다.

CSS 그리드 우선 검토
모르 텐 랜드 헨드릭슨
이 과정에서는 2 차원 격자 레이아웃을 작성하는 새롭고 개선 된 방법을 배웁니다. CSS Grid를 사용하여 반응 형 그리드 레이아웃을 만들기위한 기본 사항부터 시작하여 저자는 온라인 매거진과 3 열 레이아웃을 모두 구축하기 위해 알아야 할 사항을 다룹니다.

Flexbox를 사용하여 반응 형 양식 작성
제임스 윌리엄슨
양식이없는 웹 사이트는 디자인 할 수 없습니다. 양식은 다른 사이트와 마찬가지로 모든 유형과 크기의 화면에 대해 반응 형이어야합니다. Williamson은 CSS Flexbox 상자 모델을 사용하여 반응 형 웹 양식을 만들고 스타일을 지정하는 방법을 알려줍니다. 그는 간단한 검색 양식으로 시작하여 두 개의 큰 열 양식을 작성합니다.

반응 형 이미지
모르 텐 랜드 헨드릭슨
Wordpress를 사용하는 경우 시스템에 업로드하는 각 이미지에 대해 여러 가지 크기의 이미지가 자동으로 생성됩니다. 왜? 이 과정은 반응 형 이미지의 개념과 웹 사이트에서 이미지를 사용하는 방법을 설명합니다.

비디오 지침: CSS 수업 - flex 3 : basis & grow & shrink (할 수있다 2024).