3차 교육_프론트엔드 기초

• 장1 웹프론트엔드 기초과정
• 1-1 코스개요
• 1-2 HTML 문서 구조
• 1-3 CSS 기초 1
• 1-4 CSS 기초 4
• 1-5 HTML 중국어 텍스트 태그 1
• 1-6 HTML 중국어 텍스트 태그 2
• 1-7 HTML 텍스트 컨트롤 1
• 1-8 HTML 텍스트 컨트롤 2
• 장2 PHP와 HTML의 관계
• 2-1 PHP를 배울 때 HTML을 배우는 이유는 무엇입니까?
• 2-2 백엔드 개발 언어로 PHP를 선택하는 이유는 무엇입니까?
• 2-3 PHP가 프레임워크 개발 프로젝트를 선택하는 이유는 무엇입니까?
• 2-4 HTML의 요소, 태그 및 속성의 본질은 무엇입니까?
• 2-5 단일 및 이중 라벨 사용 방법
• 2-6 일반적으로 사용되는 태그의 사용 시나리오 소개
• 장3 양식 및 CSS 선택기
• 3-1 양식 요소 소개
• 3-2 로그인 등록 양식 연습
• 3-3 CSS의 공통 요소 단위
• 3-4 CSS의 스타일 상속 원칙
• 3-5 CSS에서 스타일 충돌을 처리하는 방법
• 3-6 CSS에서 꼭 알아야 할 선택자 (1)
• 3-7 CSS에서 꼭 알아야 할 선택자 (2)
• 3-8 CSS에서 꼭 알아야 할 선택자 (3)
• 장4 박스 모델, 위치 지정 및 플로팅
• 4-1 세부 상자 모델 1
• 4-2 세부 상자 모델 2
• 4-3 요소 정렬에 대한 네 가지 일반적인 시나리오
• 4-4 상대 위치 지정을 설명하는 예
• 4-5 절대 위치 지정을 설명하는 예
• 장5 플로팅 및 클래식 레이아웃 방법에 대한 자세한 설명
• 5-1 고정된 포지셔닝 원리 및 실습
• 5-2 플로트 및 클리어 플로트
• 5-3 플로팅으로 인한 상위 컨테이너의 높이 붕괴를 해결하는 팁
• 5-4 혼합 그래픽 및 텍스트 기술의 실제 구현
• 5-5 절대 위치 지정으로 3열 레이아웃 구현
• 5-6 Shuangfei는 3열 레이아웃을 달성하기를 희망합니다.
• 5-7 성배는 3열 레이아웃을 구현합니다.
• 장6 레이아웃과 실제 전투
• 6-1 HTML5의 새로운 의미 레이아웃 요소 소개
• 6-2 레이아웃 실습 : 백엔드 관리 시스템 (1)
• 6-3 레이아웃 실습 : 백엔드 관리 시스템 (2)
• 6-4 실제 레이아웃: 백엔드 관리 시스템 (3)
• 장7 JavaScript 구문 기본 사항
• 7-1 Node.js 구문 기본 사항(1)
• 7-2 Node.js 구문 기본 사항(2)
• 7-3 Node.js 구문 기본 사항(3)
• 7-4 Node.js 구문 기본 사항 (4)
• 7-5 Node.js 구문 기본 사항(5)
• 장8 Javascript의 DOM 및 이벤트 작업 기본 사항
• 8-1 js의 이벤트 트리거링 기본 사항
• 8-2 실전: 인터넷 사진첩
• 8-3 웹사이트 사진 앨범의 최적화된 버전
• 8-4 js를 사용하여 완전한 기능을 갖춘 계산기 케이스 구현
• 장9 JSON과 Ajax 그리고 연습
• 9-1 JSON 소개 및 예시 데모
• 9-2 Ajax와 공통 속성 및 메소드 소개
• 9-3 Ajax 연습: HTML 콘텐츠 가져오기
• 9-4 실제로 Ajax: 양식 유효성 검사(1)
• 9-5 실제로 Ajax: 양식 유효성 검사(2)
• 장10 DOM 작업 및 실제 사례
• 10-1 DOM 조작의 기본 소개
• 10-2 id 속성을 기반으로 요소를 얻는 방법은 무엇입니까?
• 10-3 이름 속성을 기반으로 요소를 얻는 방법은 무엇입니까?
• 10-4 태그 이름을 기반으로 요소를 얻는 방법은 무엇입니까?
• 10-5 요소를 가져오는 이름 속성 및 태그 이름 바로가기
• 10-6 클래스 속성을 통해 요소를 얻는 방법은 무엇입니까?
• 10-7 CSS 선택기를 통해 요소를 얻는 방법은 무엇입니까?
• 10-8 DOM 메소드를 통해 문서 트리를 탐색하는 방법은 무엇입니까?
• 10-9 HTML 요소의 속성을 조작하는 방법은 무엇입니까?
• 10-10 HTML 요소의 콘텐츠를 어떻게 처리하나요?
• 10-11 DOM 노드 생성/삽입/삭제/업데이트 작업
• 10-12 실무 준비: 채팅 메시지 생성 원리
• 10-13 실제 전투: 지능형 온라인 고객 서비스 시스템 시뮬레이션(1)
• 10-14 실제 전투: 지능형 온라인 고객 서비스 시스템 시뮬레이션(2)
• 장11 jQuery의 기본 작업 (1)
• 11-1 jQuery 가져오기 및 jQuery 객체
• 11-2 일반적으로 사용되는 jQuery의 핵심 메소드 및 속성
• 11-3 jQuery의 속성 및 콘텐츠 작업
• 11-4 jQuery의 CSS 작업
• 11-5 jQuery의 일반적인 선택기
• 11-6 jQuery의 일반적인 DOM 작업
• 장12 jQuery의 기본 작업 (2)
• 12-1 jQuery의 요소 탐색
• 12-2 jQuery의 기본 애니메이션 지식
• 12-3 jQuery에서 기본 이벤트를 사용하는 방법
• 12-4 실전 전투: 웹 버전의 사진첩 관리자(1)
• 12-5 실전 전투: 웹 버전의 사진첩 관리자(2)
• 장13 jQuery의 Ajax 작업
• 13-1 load() 메소드에 대한 심층 설명 및 실제 적용
• 13-2 $.get() 함수에 대한 자세한 설명과 실제 적용
• 13-3 $.getJSON() 함수와 실제 사용에 대한 자세한 설명
• 13-4 $.getScript() 함수와 실제 전투에 대한 자세한 설명
• 13-5 $.post() 함수와 실제 전투에 대한 자세한 설명
• 13-6 궁극의 메소드 $.ajax()와 실제 전투에 대한 자세한 설명
• 13-7 Ajax 실용성 및 시 3단계 연계 메뉴
• 장14 부트스트랩 가져오기 및 레이아웃 원칙
• 14-1 가져오기 및 레이아웃 원칙
• 14-2 기본 단계 및 레이아웃 예시
• 장15 Bootstrap 전역 스타일의 테이블 및 양식
• 15-1 테이블의 기본 조작 및 스타일 제어
• 15-2 기본 수직 형태 및 통제 그룹 작업
• 15-3 인라인 양식 작성을 위한 팁
• 15-4 수평형태의 생성 및 운용
• 장16 부트스트랩 버튼 및 드롭다운 메뉴
• 16-1 양식의 정적, 읽기 전용 및 비활성화된 컨트롤
• 16-2 일반적으로 사용되는 버튼 사전 정의 스타일
• 16-3 일반적으로 사용되는 이미지 사전 정의 스타일
• 16-4 텍스트 전경색과 배경색을 설정하는 방법
• 16-5 글꼴 아이콘 및 사용 시나리오를 추가하는 방법
• 16-6 드롭다운 메뉴를 만들고 활성화하는 방법
• 16-7 버튼 그룹 생성 및 드롭다운 메뉴 분할에 대한 팁
• 장17 부트스트랩 탐색 대형 화면 축소판 및 기타 구성요소
• 17-1 입력 상자 그룹을 만들고 사용하는 방법
• 17-2 일반적인 탭 및 캡슐 탐색 설정 방법
• 17-3 네비게이션 바의 각 구성 요소에 대한 자세한 설명
• 17-4 페이지 매김을 위한 일반적인 스타일 및 설정 기술
• 17-5 라벨 및 배지 설정 방법 및 사용 방법
• 17-6 대형 화면을 구성하고 실제 활용하는 방법
• 17-7 썸네일 생성 및 사용 시나리오 분석
• 장18 Bootstrap에서 일반적으로 사용되는 플러그인
• 18-1 경고 상자 구성 요소를 사용하는 방법
• 18-2 목록 그룹의 사용 시나리오
• 18-3 패널 및 기타 구성 요소의 사용 시나리오
• 18-4 모달박스 구성 및 세팅 스킬
• 18-5 탭을 설정하는 방법
• 18-6 경고 상자 플러그인에 대한 몇 가지 일반적인 시나리오
• 18-7 접이식 플러그인 및 메뉴 생성
• 18-8 캐러셀 이미지 생성을 위한 세부 단계
• 장19 Vue.js 개발 기본 사항
• 19-1 MVC 디자인 아이디어에 대해 자세히 설명합니다.
• 19-2 MVVM 디자인 아이디어에 대해 자세히 설명합니다.
• 19-3 Vue.js 가져오기 및 인스턴스화
• 19-4 마운트 지점 및 변수 렌더링
• 19-5 템플릿 렌더링, 속성 추가 및 이벤트 방법
• 19-6 모델 데이터와 페이지 변수의 양방향 바인딩
• 19-7 리스너: 페이지 변수의 실시간 변경에 응답