당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]

• 장1 개발 환경
• 1-1 편집기 VScode 설치
• 1-2 크롬 설치 구글 크롬
• 1-3 VScode 범용 플러그인 설치 및 사용
• 1-4 VScode 마크다운 및 글꼴 설정
• 1-5 마크다운 문법 규칙
• 1-6 HTTP 기본 사항
• 1-7 웹 개발의 공통 용어 분석
• 1-8 HTML 문서 구조
• 1-9 단일 라벨과 이중 라벨
• 1-10 프런트엔드 실용적인 페이지 디스플레이
• 장2 개발 환경 구성 및 공통 HTML 태그
• 2-1 라이브 서버 플러그인 사용
• 2-2 클라이언트와 로컬 서버의 관계
• 2-3 마크다운 문서 작성
• 2-4 vscode 사용자 정의 파일 아이콘
• 2-5 코드를 자유롭게 활용해 보세요.-Emmet 구문
• 2-6 html 공통 속성과 기본 속성
• 2-7 HTML 이벤트 속성 및 사용자 정의 속성
• 2-8 일반적으로 사용되는 레이아웃 의미 체계 태그
• 장3 일반적인 HTML 태그 소개
• 3-1 이미지-링크-목록 태그
• 3-2 그래픽 및 텍스트 목록과 탐색 구현
• 3-3 HTML 테이블에 대한 자세한 설명
• 3-4 데이터 상호 작용 매체 형식
• 3-5 양식 HTTP POST 제출
• 3-6 양식 비밀번호 상자 숨기기 및 표시
• 3-7 라디오 라디오 버튼
• 3-8 체크박스체크박스
• 3-9 양식 컨트롤 드롭다운 메뉴
• 3-10 양식 버튼 유형
• 3-11 iframe 인라인 요소가 Baidu 지도를 로드합니다.
• 3-12 비디오 태그는 Douyin 짧은 비디오를 로드합니다.
• 3-13 인라인 프레임을 사용한 작은 실제 경험 - 스키니 백엔드 홈페이지 구축
• 장4 CSS 스타일 소스 및 선택기
• 4-1 CSS 프로그래밍 목표
• 4-2 요소 스타일 소스 해석
• 4-3 스타일 참조 우선순위 문제
• 4-4 스타일 상속
• 4-5 기본 선택기에 대한 완전한 설명
• 4-6 레벨 선택기
• 4-7 선별자의 가중치에 대한 상세한 분석
• 장5 의사 클래스, 상자 모델 및 반응형 레이아웃에 대해 자세히 설명
• 5-1 구조적 의사 클래스 선택자
• 5-2 의사 클래스 선택기 매개변수
• 5-3 의사 클래스 빠른 매칭
• 5-4 의사 클래스 형성
• 5-5 글꼴 아이콘 사용
• 5-6 레이아웃 아티팩트--박스 모델
• 5-7 CSS 레이아웃 단위
• 5-8 뷰포트 단위 vh-vw
• 5-9 일반적으로 사용되는 테이블 스타일(의사 클래스)
• 장6 미디어 쿼리, 포지셔닝 및 플렉스, 그리드
• 6-1 미디어 쿼리--모바일 레이아웃 적응
• 6-2 포지셔닝 및 포지셔닝 요소
• 6-3 로그인 모달박스 포지셔닝 실습
• 6-4 flex 유연한 레이아웃--컨테이너
• 6-5 플렉스 컨테이너의 속성
• 6-6 플렉스 아이템 속성
• 장7 모바일 레이아웃 원칙 및 그리드 레이아웃
• 7-1 뷰포트 뷰포트(레이아웃 뷰포트, 시각적 뷰포트, 이상적인 뷰포트)
• 7-2 모바일 레이아웃 솔루션(rem+vw)
• 7-3 그리드 컨테이너 속성 및 프로젝트 속성
• 7-4 그리드 레이아웃의 고급 게임플레이
• 7-5 그리드는 성배 레이아웃을 구현합니다.
• 7-6 사용자 정의 그리드 레이아웃 구성 요소
• 7-7 그리드 그리드 레이아웃 실습 사례
• 장8 JavaScript 효율적인 개발 환경 및 새로운 프로그래밍 기반
• 8-1 JavaScript 스크립트를 실행하려면 Node.js를 설치하세요.
• 8-2 코드 및 프로그램 실행 흐름의 멤버
• 8-3 변수(데이터) 및 코드 블록(프로그램) 재사용
• 8-4 JavaScript 함수에 대한 간략한 분석
• 8-5 JavaScript 범위 및 범위 체인
• 8-6 자바스크립트 상수
• 8-7 식별자 명명 규칙
• 장9 함수와 데이터 유형을 자세히 설명하세요.
• 9-1 익명 함수가 실행되는 방법
• 9-2 화살표 기능 및 사용 시나리오
• 9-3 ...나머지 매개변수의 전형적인 사용
• 9-4 함수 반환 값
• 9-5 JS 데이터 유형--배열
• 9-6 JS 객체--데이터 및 메소드 캡슐화
• 9-7 JS 기능의 숨겨진 정체성과 사용법
• 장10 프로세스 제어 및 템플릿 리터럴
• 10-1 프로세스 제어--단일 분기 및 이중 분기
• 10-2 다중 분기 프로세스 제어 스위치
• 10-3 while 입력 유형 판단 루프
• 10-4 for, for-of, for-in循环
• 10-5 객체 리터럴에 대한 단순화된 접근 방식
• 10-6 템플릿 리터럴 및 템플릿 함수
• 장11 클로저/클래스와 객체/구조해체/브라우저 JS
• 11-1 폐쇄: 부분 함수가 데이터 분할을 구현합니다.
• 11-2 JS 순수 함수
• 11-3 JS 접근자 속성
• 11-4 JS 클래스 및 객체
• 11-5 클래스 상속(확장)
• 11-6 JS 클래스에서 접근자 속성 사용
• 11-7 구조 분해 할당 - 배열 분해 및 객체 분해
• 11-8 브라우저의 JS
• 11-9 DOM 요소 가져오기 및 조작
• 장12 DOM 실제 전투 및 이벤트
• 12-1 DOM 양식 요소 가져오기
• 12-2 DOM 트리 탐색
• 12-3 DOM 요소에 대한 작업 추가, 삭제 및 수정
• 12-4 JS 작업 요소 내용
• 12-5 DOM 운영 실습: 게시판
• 12-6 사용자 정의 속성--데이터세트 객체
• 12-7 JS 작업 클래스 속성--classList 객체
• 12-8 이벤트 추가 및 삭제
• 장13 문자열과 배열을 위한 JS 운영 메커니즘과 공통 API
• 13-1 이벤트 버블링 및 이벤트 위임
• 13-2 양식 이벤트 요약
• 13-3 JS 실행 메커니즘: 단일 스레드 + 타임 루프
• 13-4 단일 스레드 비동기 데모
• 13-5 문자열에서 일반적으로 사용되는 API
• 13-6 js 배열 작업의 전체 모음(팝, 푸시, 이동 해제, 삭제, 이동 메서드)
• 13-7 배열 반복 및 순회 방법
• 13-8 어레이 분리, 반전, 접합 및 업데이트 작업
• 장14 JS 클래식 전투
• 14-1 네이티브 JS 작동: 탭
• 14-2 실전 전투 : 장바구니 품목 자동 계산
• 14-3 이벤트 게시 및 구독
• 14-4 실제 전투: 캐러셀 차트를 구현하는 15줄의 코드
• 14-5 실용적인 전투: 지연 로딩
• 14-6 실용적인 전투: 반응형 웹앨범 관리자
• 장15 JSON, Promise 및 모듈 상식
• 15-1 JS의 JSON에 대한 자세한 설명
• 15-2 ajax-xhr 비동기 데이터 쿼리
• 15-3 약속의 과거와 현재의 삶
• 15-4 약속 상태: 이행 보류 중 거부됨
• 15-5 Promise 상태에 따라 다양한 콜백을 트리거합니다.
• 15-6 가져오기 API
• 15-7 JS 모듈식 개발
• 장16 온라인 사진첩 관리 실습 및 Node 기초
• 16-1 노드 기본 사항
• 16-2 Node 명령은 js 스크립트를 실행합니다.
• 16-3 프로젝트 종속성을 설치하고 삭제하는 npm 명령
• 16-4 npm은 전역 종속성 패키지를 설치합니다.
• 16-5 패키지 버전 번호 규칙
• 16-6 패키지 버전 확인 및 업데이트
• 장17 노드 작동 원리 및 공통 모듈 소개
• 17-1 노드 플러그인 설치 및 동기화
• 17-2 Ndoe의 기본 디자인 패턴 CPS 원칙
• 17-3 Nodejs 측 모듈식 CommomJS 사양에 대한 자세한 설명
• 17-4 Nodejs http 모듈에 대한 자세한 설명
• 17-5 Nodejs 파일 모듈
• 17-6 Nodejs 경로 모듈
• 장18 Git 분산 버전 제어
• 18-1 Git 버전 제어 구현 원리
• 18-2 git 로컬 창고 초기화
• 18-3 Git 코드 제출 프로세스
• 18-4 git 체크아웃 파일 복원
• 18-5 연결된 원격 창고 구성
• 18-6 git ssh 구성 튜토리얼
• 18-7 일반적인 git 명령 요약
• 장19 Vue 원칙 및 일반적인 지침
• 19-1 vue는 동적 페이지를 생성합니다
• 19-2 마운트 지점, Vue 인스턴스, 데이터 주입, 응답성
• 19-3 v-text v-html v-once 지시어 사용
• 19-4 Vue 동적 바인딩 스타일을 작성하는 다양한 방법
• 19-5 vue 입력 양방향 지연 바인딩
• 장20 이벤트, 목록 렌더링 및 구성 요소 통신
• 20-1 Vue 이벤트 바인딩
• 20-2 v-목록 렌더링용
• 20-3 Vue 조건부 렌더링
• 20-4 Vue 키보드 수정자
• 20-5 Vue 계산 속성은 장바구니 기능을 구현합니다.
• 20-6 Vue 시계 데이터 모니터링
• 20-7 Vue 전역 구성 요소 등록
• 20-8 하위 구성요소는 상위 구성요소로부터 데이터를 받습니다.
• 20-9 하위 구성 요소 이벤트 듣기