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