HTML+CSS 빠른 시작

• 장1 대규모 프론트 엔드를 이해하고 학습 준비
• 1-1 vscode 설치 구성 - 자주 사용하는 플러그인 상세 설명(자막 버전)
• 1-2 일을 잘하고 싶다면 먼저 도구를 갈고닦아야 합니다. webStorm 설치
• 1-3 프론트엔드 프로그래머가 개발할 수 있는 프로그램 카테고리
• 1-4 H5, WEB 프론트엔드, 빅 프론트엔드, WEB 풀스택을 어떻게 구별하나요?
• 장2 HTML에서 일반적으로 사용되는 태그 및 속성
• 2-1 HTML 하이퍼텍스트 마크업 언어 - 하이퍼는 어디에 있습니까?
• 2-2 HTML 기본 구조 및 관련 태그
• 2-3 HTML 16진수 색상 값 및 설명
• 2-4 HTML 엔터티 문자 사용
• 2-5 head 태그의 공통 태그 분석
• 2-6 본문의 텍스트 및 텍스트 형식 태그
• 2-7 H5 새롭게 업그레이드된 텍스트 형식 태그
• 2-8 시맨틱 태그 및 목록 레이아웃 태그
• 2-9 태그에서 주의해야 할 경로 및 점프 문제
• 2-10 멀티미디어 태그를 설명하는 예
• 2-11 대규모 프런트엔드 태그를 위한 메모리 기술
• 2-12 마크다운 구문에 대한 완전한 설명
• 2-13 테이블 태그에 대해 자세히 설명하세요.
• 2-14 서식양식 관련 요소 종합분석 - 1부
• 2-15 서식양식 관련 요소 종합분석 - 2부
• 2-16 인라인 태그 iframe 사용
• 장3 줄무늬를 멈추고 CSS의 세계로 들어가세요
• 3-1 CSS의 세계로 들어가기 - CSS를 참조하는 여러 가지 방법
• 3-2 CSS 선택기--기본 선택기 분석
• 3-3 CSS 선택기-계층적 선택기 분석
• 3-4 CSS 선택기--구조적 의사 클래스 선택기 분석--1부
• 3-5 CSS 선택기--구조적 의사 클래스 선택기 분석--2부
• 3-6 CSS 상태 의사 클래스 선택기 및 선택기 우선순위
• 3-7 CSS 글꼴 글꼴 속성
• 3-8 CSS 텍스트 텍스트 속성
• 3-9 CSS--배경 배경 속성
• 3-10 수업 요약 및 장 과제
• 장4 CSS 스타일 및 레이아웃 제어
• 4-1 CSS 너비 및 높이 치수 속성
• 4-2 CSS 탐색 목록 속성
• 4-3 CSS 위치 지정 속성--고정됨
• 4-4 CSS 위치 지정 속성--상대 위치 지정 상대
• 4-5 상대 위치 지정과 절대 위치 지정의 관계 - 1부
• 4-6 상대 위치 지정과 절대 위치 지정의 관계 - 2부
• 4-7 CSS 레이아웃 속성은 요소의 숨기기 및 표시를 제어합니다.
• 4-8 CSS는 div가 왼쪽과 오른쪽으로 부동하도록 제어합니다.
• 4-9 플로트와 결합된 표준 박스 모델
• 4-10 div 여백이 겹치는 문제를 해결하는 방법
• 4-11 상자 크기와 내부 및 외부 여백 및 테두리 간의 관계
• 4-12 상자 크기 조정 속성은 상자 포장 문제를 해결합니다.
• 4-13 유연한 상자 모델--유연한 상자 레이아웃
• 4-14 텔레스코픽 박스는 다단계 탐색 연결을 실현합니다.
• 장5 레이아웃 프레임워크 파일의 실제 정의
• 5-1 유연한 상자 모델 속성 설정에 대한 심층 분석 - 1부
• 5-2 유연한 상자 모델 속성 설정에 대한 심층 분석 - 2부
• 5-3 기업 홈페이지 페이지 레이아웃 분석
• 5-4 프레임워크의 기본 스타일 파일 정의
• 5-5 프레임의 유연한 레이아웃 공개 스타일 설정
• 5-6 프레임의 테두리 공개 스타일 설정
• 5-7 프레임의 여백 공개 스타일을 설정합니다.
• 5-8 프레임의 다른 공개 스타일 설정
• 5-9 공개 스타일의 둥근 테두리를 프로젝트에 도입
• 5-10 iconfont 글꼴 아이콘을 프로젝트에 도입하는 방법
• 5-11 실제 전투 - 헤더 공개 템플릿 파일 정의
• 5-12 실용적인 전투 - 우아한 검색창 스타일 정의
• 5-13 실용적인 전투 - 글꼴 아이콘의 스타일, 배경 및 가운데 정렬 설정
• 5-14 실용적인 전투--내비게이션 바의 기본 스타일 설정
• 장6 실제 애니메이션과 공공 수장
• 6-1 텍스트 그림자 및 배경색 방사형 그라데이션
• 6-2 CSS는 상자 변환 및 전환 효과를 구현합니다.
• 6-3 실용적인 전투 - CSS 애니메이션 효과 및 애니메이션 캐러셀 - 1부
• 6-4 실용적인 전투 - CSS 애니메이션 효과 및 애니메이션 캐러셀 - 2부
• 6-5 실용적인 전투 - CSS3는 의사 클래스를 사용하여 탐색 밑줄 애니메이션 효과를 구현합니다.
• 6-6 실용적인 전투 - 보조 메뉴 스타일 및 애니메이션 효과 구현
• 6-7 실전 전투 - 사이드바 고정 효과 구현 - 1부
• 6-8 실전 전투 - 사이드바 고정 효과 구현 - 2부
• 6-9 실용적인 전투 - 하단 바닥글의 스타일 레이아웃 구현
• 6-10 실전 전투 - 홈페이지에서 제품 탐색 효과 구현
• 6-11 실전 전투 - 상품 진열 영역의 헤더 레이아웃
• 6-12 실전 전투 - 제품 카드 스타일 레이아웃 - 1부
• 6-13 실용적인 전투 - 제품 카드의 애니메이션 효과를 완성하세요
• 6-14 실전 전투 - 제품 카드 스타일 레이아웃 - 2부
• 장7 실제 전투 목록 페이지 및 상세 페이지
• 7-1 실용적인 전투 - 탐색경로 탐색 스타일 레이아웃 완성
• 7-2 실전 전투 - 상품 분류 애니메이션 효과 완성 - 1부
• 7-3 실전 전투 - 상품 분류 애니메이션 효과 완성 - 2부
• 7-4 실용적인 전투 - 제품 목록 페이지의 스타일 레이아웃 완성
• 7-5 실전 전투 - 상품 기본 정보 영역의 스타일 레이아웃 완성
• 7-6 실전 전투 - 상품 기본 정보 영역의 스타일 레이아웃 완성 02
• 7-7 실전 전투 - 상품 기본 정보 영역의 스타일 레이아웃 완성 03
• 7-8 실전 전투 - 상품 상세 스타일 레이아웃 01
• 7-9 실전 전투 - 상품 상세 스타일 레이아웃 02
• 7-10 실용적인 전투 - 해당 지역의 스타일 레이아웃이 마음에 드시나요?
• 장8 실용적인 장바구니 및 주문 페이지
• 8-1 쇼핑몰 장바구니 스타일 레이아웃 01
• 8-2 쇼핑몰 장바구니 스타일 레이아웃 02
• 8-3 쇼핑몰 장바구니 스타일 레이아웃 03
• 8-4 주문 미리보기 페이지--영수증 정보 스타일 레이아웃
• 8-5 주문 미리보기 페이지-지불 방법 스타일 레이아웃
• 8-6 주문 미리보기 페이지--콘텐츠 스타일 레이아웃 주문 01
• 8-7 주문 미리보기 페이지--콘텐츠 스타일 레이아웃 주문 02
• 8-8 쇼핑몰 개인센터 페이지 구조 분석
• 8-9 주문 페이지 및 @미디어 쿼리업
• 8-10 주문 페이지 및 @미디어 쿼리 - 다음