프런트엔드 초보자를 위한 HTML5+CSS3 시작하기

• 장1 강좌 소개 및 기초 컴퓨터 지식
• 1-1 학습 경로
• 1-2 HTML 소개
• 1-3 웹 관련 개념
• 1-4 일반적인 브라우저 및 커널
• 1-5 웹 표준
• 장2 HTML 기본 구문 및 구조
• 2-1 HTML 태그 소개
• 2-2 HTML 구문 사양
• 2-3 HTML 기본 구조 태그
• 2-4 VSCode 도구 생성 페이지
• 2-5 DOCTYPE 및 lang과 문자 집합의 역할
• 장3 HTML 태그
• 3-1 태그 의미론
• 3-2 제목 태그
• 3-3 단락 태그 및 줄 바꿈 태그
• 3-4 스포츠 뉴스 사례
• 3-5 텍스트 서식 지정 태그
• 3-6 div 및 범위 태그
• 3-7 이미지 태그(상단)
• 3-8 이미지 태그(아래)
• 3-9 이미지 태그에 관한 주의사항
• 장4 상대 경로와 절대 경로
• 4-1 디렉터리 폴더 및 루트 디렉터리
• 4-2 상대 경로(위)
• 4-3 상대 경로(아래)
• 4-4 절대 경로
• 장5 링크와 앵커
• 5-1 링크 태그(상단)
• 5-2 링크 태그(아래)
• 5-3 앵커 링크
• 5-4 댓글 태그 및 특수 문자
• 장6 종합사례
• 6-1 종합사례(제1부)
• 6-2 종합사례(2부)
• 장7 HTML 테이블
• 7-1 HTML 태그 소개(2부)
• 7-2 테이블 레이블의 기본 사용
• 7-3 헤더 셀 레이블
• 7-4 테이블 관련 속성(이해)
• 7-5 소설 순위 사례
• 7-6 테이블 구조 태그
• 7-7 셀 병합
• 7-8 표 요약
• 장8 HTML 목록
• 8-1 순서가 없는 목록
• 8-2 주문 목록
• 8-3 맞춤 목록
• 8-4 목록 요약
• 장9 HTML 양식
• 9-1 양식 사용 시나리오 및 분류
• 9-2 양식 필드
• 9-3 입력 유형 속성 텍스트 상자 및 비밀번호 상자
• 9-4 입력 유형 속성 라디오 버튼 및 확인란
• 9-5 입력 이름 및 값 속성
• 9-6 입력의 확인 및 최대 길이 속성
• 9-7 입력 양식 요소의 4가지 속성 사용 시나리오에 대한 교실 질문 및 답변
• 9-8 입력 유형 속성 제출 및 재설정 버튼
• 9-9 입력 유형 속성 일반 버튼 및 파일 필드
• 9-10 라벨 라벨
• 9-11 드롭다운 양식 선택
• 9-12 텍스트 영역 텍스트 영역 레이블
• 9-13 양식 요소 요약
• 장10 종합사례
• 10-1 등록 페이지(1)
• 10-2 등록 페이지(2)
• 10-3 등록 페이지(3)
• 10-4 등록 페이지(4)
• 10-5 문서 읽는 법을 배우세요
• 장11 CSS 계단식 데모 테이블 소개
• 11-1 CSS 캐스케이딩 스타일 시트 소개
• 11-2 CSS 소개
• 장12 CSS 구문 사양 및 코드 스타일
• 12-1 CSS 구문 사양을 경험해보세요
• 12-2 CSS 코드 스타일
• 장13 CSS 선택기
• 13-1 CSS 선택기의 역할
• 13-2 태그 선택기
• 13-3 클래스 선택자
• 13-4 클래스 선택기를 사용하여 상자 그리기
• 13-5 클래스 선택기의 특별한 사용 - 여러 클래스 이름
• 13-6 아이디 선택기
• 13-7 와일드카드 선택기
• 장14 CSS 글꼴
• 14-1 글꼴 패밀리는 글꼴 모음을 설정합니다.
• 14-2 글꼴 크기 글꼴 크기
• 14-3 글꼴 두께 글꼴 두께
• 14-4 글꼴 스타일 글꼴 스타일
• 14-5 글꼴 합성 속성을 작성하는 방법
• 14-6 글꼴 속성 요약
• 장15 CSS텍스트
• 15-1 텍스트 색상색상
• 15-2 텍스트 정렬
• 15-3 텍스트 장식 텍스트 장식
• 15-4 텍스트 들여쓰기
• 15-5 줄 간격 줄 높이
• 15-6 CSS 텍스트 속성 요약
• 장16 CSS 스타일시트
• 16-1 내부 스타일 시트
• 16-2 인라인 스타일 시트
• 16-3 외부 스타일 시트
• 16-4 CSS 도입 방법 요약
• 장17 종합사례
• 17-1 뉴스 페이지
• 17-2 스타일 수정(1)
• 17-3 스타일 수정(2)
• 17-4 스타일 수정(3)
• 17-5 크롬 디버깅 도구 사용
• 장18 에밋 구문
• 18-1 CSS 둘째날 가이드
• 18-2 emmet 구문은 html 태그를 생성합니다.
• 18-3 CSS 스타일을 빠르게 생성하는 emmet 구문
• 18-4 코드 형식을 빠르게 지정
• 장19 복합 선택기
• 19-1 복합 선택기 소개
• 19-2 자손 선택자
• 19-3 하위 요소 선택기
• 19-4 수업 연습
• 19-5 유니온 선택기
• 19-6 링크 의사 클래스 선택기(1부)
• 19-7 링크 의사 클래스 선택기(아래)
• 19-8 포커스 의사 클래스 선택자
• 19-9 화합물 선택기 요약
• 장20 요소 표시 모드
• 20-1 요소 표시 모드란 무엇입니까?
• 20-2 블록 요소
• 20-3 행내 원소
• 20-4 인라인 블록 요소
• 20-5 요소 표시 모드 요약
• 20-6 디스플레이 모드 변환
• 장21 사이드바 소형 케이스
• 21-1 작은 도구 스니 페이스트 사용
• 21-2 Xiaomi 사이드바 케이스의 간단한 버전
• 21-3 한 줄 텍스트의 수직 중심 정렬 원리
• 21-4 배경색
• 21-5 배경 그림
• 21-6 배경 타일링
• 21-7 배경 위치 방향 명사
• 21-8 배경 위치 사례 1
• 21-9 배경위치 사례 2 - 영광의 왕 배경 그림
• 21-10 배경 위치 - 정확한 단위
• 21-11 배경 위치 - 혼합 단위
• 21-12 배경 고정
• 21-13 배경 속성의 복합 작성 방법
• 21-14 배경색 반투명
• 21-15 배경 요약
• 21-16 종합 사례 5색 탐색(1부)
• 21-17 종합사례 파이브카이 내비게이션 (2)
• 장22 CSS의 세 가지 주요 기능
• 22-1 스택 가능성
• 22-2 계승
• 22-3 행 높이 상속
• 22-4 우선 사항
• 22-5 우선순위 문제
• 22-6 CSS 가중치 오버레이
• 22-7 웨이트 운동 두 가지
• 장23 박스 모델
• 23-1 박스 모델 소개
• 23-2 웹 페이지 레이아웃의 본질을 이해합니다.
• 23-3 박스 모델 구성 요소
• 23-4 상자 모델 테두리
• 23-5 테두리의 합성 쓰기
• 23-6 테이블 얇은 선 테두리
• 23-7 테두리는 상자의 실제 크기에 영향을 미칩니다.
• 23-8 박스 모델 내부 여백 패딩
• 23-9 패딩 복합 속성
• 23-10 패딩은 상자의 실제 크기에 영향을 미칩니다.
• 23-11 패딩 적용 - 시나 내비게이션 바(1부)
• 23-12 패딩 적용 - 시나 내비게이션 (2부)
• 23-13 샤오미 사이드바 수정
• 23-14 패딩이 상자를 열어두지 않습니다.
• 23-15 박스 모델 마진
• 23-16 여백의 일반적인 적용 - 블록 수준 상자는 수평 및 중앙으로 정렬됩니다.
• 23-17 인라인 요소와 인라인 블록 요소는 가로 중앙에 배치됩니다.
• 23-18 여백 병합 - 인접한 블록 요소의 수직 여백
• 23-19 여백 병합 - 중첩된 블록 요소 축소
• 23-20 명확한 내부 및 외부 여백
• 장24 종합사례
• 24-1 ps의 기본 동작
• 24-2 종합적인 케이스-제품 모듈 레이아웃 분석
• 24-3 포괄적인 케이스-박스 레이아웃
• 24-4 종합 증례사진 및 문단 제작
• 24-5 종합적인 사례 평가 및 세부 제작
• 24-6 종합적인 케이스-수직 라인 디테일 제작
• 24-7 선생님이 설명해주세요
• 24-8 익스프레스 모듈 레이아웃 분석
• 24-9 Express 모듈 헤더 생산
• 24-10 Express 모듈 목록 생성
• 장25 둥근 테두리
• 25-1 둥근 테두리 원리
• 25-2 둥근 모서리 사용
• 장26 그림자
• 26-1 상자 그림자
• 26-2 텍스트 그림자
• 장27 뜨다
• 27-1 플로팅 가이드
• 27-2 전통적인 웹 페이지 레이아웃의 세 가지 방법
• 27-3 플로트가 필요한 이유
• 27-4 플로트 란 무엇입니까?
• 27-5 플로트 특성-비표준
• 27-6 부동 속성 - 부동 요소가 한 줄에 표시됩니다.
• 27-7 부동 속성 - 부동 요소에는 인라인 블록 속성이 있습니다.
• 27-8 플로팅 요소는 종종 표준 흐름 상위 요소와 쌍을 이룹니다.
• 27-9 플로팅 레이아웃 연습-1
• 27-10 플로팅 레이아웃 연습-2
• 27-11 부동운동-휴대폰 모듈(1부)
• 27-12 공중부양운동 - 휴대폰 모듈(2편)
• 27-13 일반적인 웹 페이지 레이아웃
• 27-14 플로팅에 관해 주의할 두 가지 사항
• 장28 클리어 플로트
• 28-1 왜 클리어 플로트인가?
• 28-2 명확한 부유성 및 추가 라벨 방식
• 28-3 부동 상위 요소의 오버플로 지우기
• 28-4 의사 요소 뒤의 부동 지우기
• 28-5 부동 이중 의사 요소 지우기
• 28-6 클리어 플로트
• 장29 ps. 컷 사진
• 29-1 일반적인 이미지 형식
• 29-2 레이어 커팅(위)
• 29-3 레이어 컷아웃(아래)
• 29-4 슬라이스 도구
• 29-5 커터맨 설치
• 29-6 커터맨 활용팁
• 장30 Xuecheng 온라인 사례
• 30-1 준비
• 30-2 CSS 속성 작성 순서(중요)
• 30-3 페이지 레이아웃의 전반적인 아이디어
• 30-4 헤더 영역 생성
• 30-5 로고부분 제작
• 30-6 내비게이션 바 내비 영역 제작(전편)
• 30-7 내비게이션 바 내비 영역 제작(가운데)
• 30-8 내비게이션 바 내비 영역 제작(2편)
• 30-9 검색 검색모듈 입력제작
• 30-10 검색 검색모듈 버튼 제작
• 30-11 사용자 모듈 제작
• 30-12 배너모듈 제작
• 30-13 Subnav 모듈 제작(1부)
• 30-14 Subnav 모듈 제작(2부)
• 30-15 강좌모듈 제작(1부)
• 30-16 강좌모듈제작(중)
• 30-17 강좌모듈 제작(2부)
• 30-18 프리미엄 추천 모듈(1부)
• 30-19 프리미엄 추천 모듈(중)
• 30-20 프리미엄 추천 모듈(2부)
• 30-21 box-hd 모듈 생산
• 30-22 Box-BD 모듈 생산
• 30-23 박스 모듈 완성
• 30-24 바닥글 모듈 제작
• 30-25 저작권 모듈 제작
• 30-26 링크 모듈 생산
• 장31 위치
• 31-1 포지셔닝 가이드
• 31-2 포지셔닝이 필요한 이유
• 31-3 포지셔닝 구성
• 31-4 상대 위치 지정
• 31-5 절대 위치 지정 - 상위 위치 없음 또는 상위 위치 없음
• 31-6 절대 위치 지정 - 상위 위치 지정 상태가 있습니다.
• 31-7 표준을 벗어난 절대위치결정은 원래 위치를 차지하지 않습니다.
• 31-8 자손부상적 유래
• 31-9 아들의 절대적인 아버지 핫 모듈 사례
• 31-10 고정 위치
• 31-11 고정 위치 지정 팁 - 페이지 중앙 오른쪽에 고정
• 31-12 고정 포지셔닝(이해)
• 31-13 포지셔닝 요약
• 31-14 포지셔닝 적층 순서
• 31-15 절대 위치 상자 중심 알고리즘
• 31-16 포지셔닝의 특징
• 31-17 부동 요소는 표준 흐름의 텍스트 위치를 억제하지 않습니다.
• 장32 타오바오 포커스 지도
• 32-1 레이아웃 분석
• 32-2 큰 상자 생산
• 32-3 왼쪽 화살표 버튼 제작
• 32-4 오른쪽 화살표 버튼 제작
• 32-5 ul 박스모듈 생산
• 32-6 리튬 작은 도트 모듈 생산
• 32-7 웹 페이지 레이아웃 요약
• 장33 감자 케이스
• 33-1 디스플레이에 숨겨진 요소가 표시됩니다.
• 33-2 가시성숨겨진 요소 표시
• 33-3 오버플로 표시 숨기기
• 33-4 감자 케이스(1부)
• 33-5 감자 케이스(2부)
• 장34 고급 CSS 팁
• 34-1 소개
• 34-2 엘프 기술이 필요한 이유
• 34-3 스프라이트 차트 사용(원칙)
• 34-4 스프라이트 다이어그램 사용법(코드)
• 34-5 스프라이트 예 - 이름을 철자하세요
• 34-6 글꼴 아이콘 생성 및 장점
• 34-7 글꼴 아이콘 다운로드
• 34-8 글꼴 아이콘 사용
• 34-9 글꼴 아이콘 추가 및 로드 원리
• 34-10 CSS 삼각형을 사용하는 방법
• 34-11 CSS 삼각형 적용 - Jingdong 효과
• 34-12 사용자 인터페이스 - 마우스 스타일
• 34-13 사용자 인터페이스 - 양식 개요 해제 및 텍스트 필드 드래그 방지
• 34-14 수직 정렬은 인라인 블록과 텍스트의 수직 중앙 정렬을 구현합니다.
• 34-15 사진 하단의 공백에 대한 해결 방법
• 34-16 한 줄 텍스트가 줄임표 표시를 넘칩니다.
• 34-17 여러 줄의 텍스트가 줄임표 표시를 넘칩니다.
• 34-18 레이아웃 기술 - 음수 여백 값의 영리한 사용(1부)
• 34-19 레이아웃 기술 - 음수 여백 값의 영리한 사용(2부)
• 34-20 레이아웃 기술 - 부동 요소 주변의 텍스트를 영리하게 사용
• 34-21 레이아웃 기술 - 인라인 블록의 영리한 사용
• 34-22 레이아웃 기술 - CSS 삼각형의 영리한 사용(1부)
• 34-23 레이아웃 기술 - CSS 삼각형의 영리한 사용(2부)
• 34-24 CSS 초기화
• 장35 HTML5 신규
• 35-1 HTML5CSS3은 탐색 기능을 향상시킵니다.
• 35-2 의미 태그 추가
• 35-3 비디오 태그 추가
• 35-4 오디오 태그 추가
• 35-5 입력 양식 추가
• 35-6 새 양식 속성 추가
• 장36 CSS3의 새로운 기능
• 36-1 속성 선택기(상단)
• 36-2 속성 선택기(아래)
• 36-3 구조적 의사 클래스 선택기 - n번째 요소를 선택합니다.
• 36-4 n번째 자식 선택자(위)
• 36-5 n번째 자식 선택자(아래)
• 36-6 n번째 자식과 n번째 유형의 차이점
• 36-7 의사 요소 선택기 사용 시나리오 및 출처
• 36-8 의사 요소 선택기의 기본 사용
• 36-9 의사 요소 선택기 사용 시나리오와 일치하는 글꼴 아이콘
• 36-10 유사 요소 활용 시나리오 - 감자 효과 모방
• 36-11 의사 요소 선택기 - 의사 요소가 부동 특성을 지웁니다.
• 36-12 CSS3 상자 모델 테두리 상자
• 36-13 CSS3 이미지 흐림 처리
• 36-14 상자 너비 계산 기능
• 36-15 CSS3 새 속성 전환(1부)
• 36-16 CSS3 새 속성 전환(2부)
• 36-17 CSS3 전환 연습
• 36-18 일반화된 H5(이해)
• 장37 핀요우고우 프로젝트
• 37-1 소개
• 37-2 웹사이트 제작 과정
• 37-3 Pinyougou 프로젝트 계획
• 37-4 Pinyougou 프로젝트 건설
• 37-5 Pinyougou 프로젝트 - 스타일의 모듈식 개발
• 37-6 Pinyougou 프로젝트 - 파비콘 아이콘 제작
• 37-7 Pinyougou 프로젝트 - TDK 3대 레이블 SEO 최적화
• 37-8 핀요우고우 홈페이지 - 빠른 네비게이션 바로가기 구조 구축
• 37-9 Pinyougou 홈페이지-빠른 탐색 왼쪽 제작
• 37-10 핀요우고우 홈페이지 - 우측에 빠른 네비게이션 내장
• 37-11 퀵네비게이션 우측 핀요우고우 홈페이지 글꼴 아이콘
• 37-12 Pinyougou 홈페이지-헤더 모듈 구축
• 37-13 Pinyougou 홈페이지-로고SEO 최적화 (1 부)
• 37-14 Pinyougou 홈페이지-로고SEO 최적화 (2 부)
• 37-15 Pinyougou 홈페이지 검색 모듈(1부)
• 37-16 Pinyougou 홈페이지-검색 검색 모듈(2부)
• 37-17 Pinyougou 홈페이지-핫워드 핫워드 모듈
• 37-18 핀요우고우 홈페이지-샵카모듈 제작
• 37-19 Pinyougou 홈페이지-카운트 장바구니 통계 모듈
• 37-20 핀요우고우 홈페이지-네비게이션 모듈 구축
• 37-21 핀유고우 홈페이지-드롭다운 모듈 제작
• 37-22 핀요우고우 홈페이지 - 내비게이션 상세분류 제작(1부)
• 37-23 핀요우고우 홈페이지 - 내비게이션 상세분류 제작(2부)
• 37-24 핀요우고우 홈페이지-내비템 모듈 제작
• 37-25 핀요우고우 홈페이지-바닥글 하단 모듈 구축
• 37-26 Pinyougou 홈페이지-모드-서비스 모듈 제작(1부)
• 37-27 Pinyougou 홈페이지-모드-서비스 모듈 제작(2부)
• 37-28 Pinyougou 홈페이지-mod_help 모듈 제작
• 37-29 Pinyougou 홈페이지-mod_copyright 모듈 제작
• 37-30 핀요우고우 홈페이지-메인메인박스 구축
• 37-31 Pinyougou 홈페이지-newsflash 모듈
• 37-32 핀요우고우 홈페이지-뉴스-HD 모듈 제작
• 37-33 핀요우고우 홈페이지-new-bd 모듈 제작
• 37-34 핀요우고우 홈페이지-라이프서비스 제작(1부)
• 37-35 핀요우고우 홈페이지-생활서비스 제작(2부)
• 37-36 Pinyougou 홈페이지 추천 모듈 추천 (전편)
• 37-37 Pinyougou 홈페이지 추천 모듈 추천 (후편)
• 37-38 Pinyougou 홈 페이지 - 가전 모듈 구축
• 37-39 Pinyougou 홈 페이지 - 가전 모듈 헤드 생산
• 37-40 탭 표시줄 탭 원칙 레이아웃 요구 사항
• 37-41 Pinyougou 홈페이지-tab_list-항목 레이아웃(1부)
• 37-42 Pinyougou 홈페이지-tab_list-항목 레이아웃 (가운데)
• 37-43 Pinyougou 홈페이지-tab_list-항목 레이아웃 (2부)
• 37-44 상품구매목록-구조 구축
• 37-45 핀유고 리스트 페이지 - 플래시 세일 모듈 제작
• 37-46 Pinyougou 목록 페이지 탐색 모듈 수정
• 37-47 Pinyougou 목록 페이지 - 작은 문제
• 37-48 Pinyougou 목록 페이지 끝
• 37-49 핀유고 등록 페이지 헤더 제작
• 37-50 핀유고 목록 페이지 - 등록 메인 모듈 헤더 제작
• 37-51 핀유고 등록 페이지 - 등록 대상 제작(전편)
• 37-52 핀유고 등록 페이지 - 등록 대상 제작(후편)
• 37-53 Pinyougou 등록 페이지 - 보안 모듈
• 37-54 Pinyougou 등록 페이지 동의 모듈 및 등록 모듈 완료
• 37-55 Pinyougou 프로젝트 페이지가 서로 이동하여 작업 준비
• 37-56 서버가 뭐야?
• 37-57 무료공간 신청 및 홈페이지 업로드