강사 소개
- 王林
- 당신은 배울 것이다:
본 강좌의 목적은 모든 사람이 모바일 레이아웃을 마스터할 수 있도록 하는 것입니다. 본 강좌에서는 주로 뷰포트, 이중 이미지, 드레인 레이아웃, 플렉스 레이아웃, Rem 레이아웃, 반응형 레이아웃을 설명하고 Mockup과 같은 도구도 추가합니다.
HTML5 소개
01분30초vscode의 기본 사용
15분21초vscode 플러그인 설치
11분30초HTML5 란 무엇입니까?
04분53초HTML5 새 태그
09분30초멀티미디어 오디오 태그
12분10초멀티미디어 비디오 태그
15분03초HTML5의 새로운 입력 태그
12분02초HTML5 새로운 양식 속성
12분32초HTML5 요약
06분52초CSS3 소개
02분39초CSS3 속성 선택기(상단)
11분18초CSS3 속성 선택기(아래)
10분46초CSS3 구조적 의사 클래스 선택기(1부)
06분19초n번째 자식(n)
12분47초n번째 자식과 n번째 유형의 차이점
10분22초구조 의사 클래스 선택기 요약
02분02초CSS3 의사 요소 선택기
08분48초의사 요소 선택기 사례
09분26초2D 변환: 번역
13분07초상자를 가로 및 세로 중앙에 배치
09분18초2D 변환 회전
05분55초CSS3 삼각형
07분23초전환 중심점 설정
06분09초회전 중심점 케이스
06분56초2D 변환 스케일
06분56초사진 확대 사례
11분07초페이징 버튼 케이스
03분20초2D 변환을 위한 포괄적인 작성 방법 및 순서 문제
05분38초2D 변환 요약
03분06초CSS3 애니메이션의 기본 사용법
08분56초애니메이션 시퀀스
12분41초CSS3 애니메이션 공통 속성
16분08초CSS3 애니메이션 약어
07분17초빅데이터 히트맵 사례(1부)
14분08초빅데이터 히트맵 사례(2부)
14분10초속도 곡선의 단계
08분28초러닝 베어 빅 케이스
14분25초3D 변환 이해
05분20초3D 번역 Translate3d
07분57초관점관점
08분53초번역
09분23초3D 회전 회전X
09분43초3D 회전 회전Y
03분55초3D 회전 회전Z
05분50초3D 렌더링 변환 스타일
11분03초양면 플립박스 케이스
12분57초3D 내비게이션 바(상단)
12분26초3D 내비게이션 바(아래)
10분48초종합케이스-회전목마케이스(1부)
08분40초종합케이스-회전목마케이스(2부)
08분34초브라우저 개인 접두사 및 요약
11분13초모바일 WEB 개발 흐름 레이아웃 소개
01분59초모바일 단말기 기본
09분31초뷰포트
09분02초메타 뷰포트 태그
06분53초물리적 픽셀 대 물리적 픽셀 비율
08분45초더블 차트
12분13초배경 크기 조절 배경 크기
10분46초배경 이중 이미지 및 다중 이미지 컷아웃
05분38초모바일 개발 옵션
04분32초모바일 기술 솔루션
10분29초모바일 스페셜 스타일
04분53초모바일 기술 선택
03분40초유동적인 레이아웃
10분32초JD.com 모바일 홈페이지 준비작업
06분58초신체 설정
06분29초앱 레이아웃
08분29초앱 콘텐츠 채우기
07분01초검색 모듈 레이아웃
09분16초검색모듈 콘텐츠 제작
08분44초이중 스프라이트 차트를 만드는 방법
08분15초포커스 맵 제작
06분45초브랜드데이 모듈제작
07분28초네비게이션 바 네비게이션 모듈 제작
11분22초뉴스레터 모듈
07분22초JD.com 모바일 홈페이지 끝 2
04분31초모바일 WEB 개발의 Flex 레이아웃 소개
01분14초Flex 레이아웃 경험
07분02초플렉스 레이아웃 원리
04분16초flex는 스핀들 방향을 설정합니다.
08분14초justify-content는 주축 하위 요소 배열을 설정합니다.
10분05초flex-wrap 하위 요소 래핑 여부
04분57초align-items는 교차축 하위 요소의 배열을 설정합니다.
07분35초align-content는 교차축 하위 요소의 배열을 설정합니다.
11분01초플렉스 플로우 및 요약
03분45초하위 플렉스 속성 사용
14분31초정렬 자기와 순서
04분47초씨트립 모바일 홈페이지 준비작업
06분46초홈페이지 레이아웃 분석 및 검색 모듈 레이아웃
09분10초사용자가 만든 검색 모듈
12분11초검색모듈 제작 검색제작
11분22초포커스맵 포커스 모듈 제작
02분47초로컬 탐색 레이아웃
05분17초지역 내비게이션 콘텐츠 제작
11분38초속성 선택기를 사용하여 배경 이미지를 변경하세요.
04분44초탐색 모양 레이아웃
08분50초네비게이션 콘텐츠 제작
10분59초배경 그라데이션 선형 그라데이션
06분14초하위 탐색 항목 모듈 생산
인기 액티비티 모듈 제작
복지모듈 생산확대
판매-BD 모듈 생산 3
모바일 WEB 개발 렘 적응형 레이아웃 소개
01분20초렘 단위
11분13초미디어 쿼리 구문 소개
09분58초미디어 쿼리 케이스 배경 변색
12분20초미디어 쿼리 + rem은 요소의 동적 크기 변경을 실현합니다.
07분41초미디어 쿼리는 리소스를 소개합니다.
09분12초CSS의 단점
05분22초LESS 소개 및 변수 사용
09분04초덜 컴파일하기 쉬운 플러그인
08분56초덜 중첩
10분17초적은 작업
05분57초Rem 적응 방식의 원리
11분53초rem 최종 적응 계획
11분45초Suning 홈페이지 common.less 제작
04분43초Suning 홈페이지 가져오기 가져오기 스타일
04분03초Suning 홈페이지 본문 스타일 설정
07분28초Suning 홈페이지 검색 콘텐츠 모듈 레이아웃
09분02초Suning 홈페이지 검색 콘텐츠 콘텐츠 레이아웃
Suning 홈페이지-검색모듈 제작
Suning 홈페이지 배너 및 광고 모듈 제작
Suning 홈페이지 네비게이션 부품 제작
rem 적응 솔루션 2 flexble.js 소개
04분27초렘 적응 솔루션 2 Suning 홈페이지 사전 준비
03분29초렘 적응 방식 2바디 스타일 수정
마법의 vscode 플러그인 cssrem
유연한 기본 HTML 글꼴 크기 수정
렘 적응 솔루션 2 검색 콘텐츠 콘텐츠 제작 1
렘 적응 솔루션 2 검색 콘텐츠 콘텐츠 제작 2
모바일 웹 개발 반응형 소개
02분47초반응형 개발 원칙
03분01초반응형 레이아웃 컨테이너
12분23초반응형 탐색 케이스
06분11초부트스트랩 소개
10분08초부트스트랩 사용법(1부)
08분31초부트스트랩 사용법(2부)
05분17초부트스트랩 레이아웃 컨테이너
03분51초부트스트랩 그리드 시스템
04분58초부트스트랩 그리드 시스템 활용(1부)
12분38초부트스트랩 그리드 시스템 활용(2부)
06분28초부트스트랩 열 중첩
08분07초부트스트랩 열 오프셋
08분06초부트스트랩 열 정렬
03분21초부트스트랩 반응형 도구
06분22초알리바바 바이슈 수요 분석
05분59초Ali Baixiu를 위한 준비 작업
03분58초컨테이너의 최대 너비 수정
03분50초알리바바 바이슈 로고 제작
08분02초Alibaba Baixiu nav 프로덕션, 글꼴 아이콘 소개
08분32초제작 알리바이슈뉴스(1부)
12분20초알리바이슈뉴스(2부) 제작
03분24초Alibaba Baixiu 게시 모듈 생산
11분50초알리바바 바이슈 외측 모듈 생산
Alibaba Baixiu 로고 반응형 제작
09분27초Alibaba Baixiu nav 반응형 프로덕션
04분51초Alibaba Baixiu 뉴스 반응형 제작
05분35초Alibaba Baixiu, 반응형 프로덕션 출시
05분04초모바일 단말기 개발 개요
03분07초본 강좌의 목적은 모든 사람이 모바일 레이아웃을 마스터할 수 있도록 하는 것입니다. 본 강좌에서는 주로 뷰포트, 이중 이미지, 드레인 레이아웃, 플렉스 레이아웃, Rem 레이아웃, 반응형 레이아웃을 설명하고 Mockup과 같은 도구도 추가합니다.
