close
더북(TheBook)
search
코딩 자율학습 HTML + CSS + 자바스크립트
더북(TheBook)
home
Home
Part 1 HTML로 웹 구조 설계하기
1장 Hello, HTML + CSS + 자바스크립트
1.1 개발 환경 설정하기
1.1.1 코드 작성을 위한 코드 에디터 설치하기
1.1.2 VSCode 확장 프로그램 설치하기
1.1.3 실행을 위한 웹 브라우저 설치하기s
1.2 첫 번째 HTML 문서 만들기
2장 HTML 문서 작성을 위한 기본 내용 살펴보기
2.1 HTML의 기본 구성 요소
2.1.1 태그
2.1.2 속성
2.1.3 문법
2.1.4 주석
1 분 퀴즈
2.2 HTML의 기본 구조
2.2.1 DTD
2.2.2 html 태그
2.2.3 head 태그
2.2.4 body 태그
1 분 퀴즈
2.3 HTML의 특징 파악하기
2.3.1 블록 요소와 인라인 요소
2.3.2 부모, 자식, 형제 관계
2.3.3 줄 바꿈과 들여쓰기
마무리
3장 실무에서 자주 사용하는 HTML 필수 태그 다루기
3.1 텍스트 작성하기
3.1.1 hn 태그
3.1.2 p 태그
3.1.3 br 태그
3.1.4 blockquote 태그
3.1.5 q 태그
3.1.6 ins와 del 태그
3.1.7 sub와 sup 태그
1 분 퀴즈
3.2 그룹 짓기
3.2.1 div 태그
3.2.2 span 태그
1 분 퀴즈
3.3 목록 만들기
3.3.1 ul 태그
3.3.2 ol 태그
3.3.3 dl 태그
1 분 퀴즈
3.4 링크와 이미지 넣기
3.4.1 a 태그
3.4.2 img 태그
3.4.3 이미지 링크
1 분 퀴즈
3.5 텍스트 강조하기
3.5.1 strong 태그
3.5.2 em 태그
3.6 폼 구성하기
3.6.1 form 태그
3.6.2 input 태그
3.6.3 label 태그
3.6.4 fieldset와 legend 태그
3.6.5 textarea 태그
3.6.6 select, option, optgroup 태그
3.6.7 button 태그
3.6.8 폼 관련 태그에서 사용할 수 있는 추가 속성
1 분 퀴즈
3.7 표 만들기
3.7.1 table 태그
3.7.2 caption 태그
3.7.3 tr 태그
3.7.4 th, td 태그
3.7.5 rowspan과 colspan 속성
3.7.6 thead, tfoot, tbody 태그
3.7.7 col과 colgroup 태그
3.7.8 scope 속성
1 분 퀴즈
3.8 멀티미디어 설정하기
3.8.1 audio 태그
3.8.2 video 태그
3.8.3 source 태그
3.9 웹 페이지 구조를 설계하는 시맨틱 태그
3.9.1 header 태그
3.9.2 nav 태그
3.9.3 section 태그
3.9.4 article 태그
3.9.5 aside 태그
3.9.6 footer 태그
3.9.7 main 태그
1 분 퀴즈
3.10 태그 종류에 상관없이 사용하는 글로벌 속성
마무리
셀프체크
Part 2 CSS로 웹 페이지 꾸미기
4장 웹 스타일링을 위한 CSS 기초 배우기
4.1 CSS 문법 살펴보기
4.1.1 문법 형식
4.1.2 주석
4.2 CSS 적용하기
4.2.1 내부 스타일 시트 사용하기
4.2.2 외부 스타일 시트 사용하기
4.2.3 인라인 스타일 사용하기
1 분 퀴즈
마무리
셀프체크
5장 CSS 선택자 다루기
5.1 기본 선택자 사용하기
5.1.1 전체 선택자
5.1.2 태그 선택자
5.1.3 아이디 선택자
5.1.4 클래스 선택자
5.1.5 기본 속성 선택자
5.1.6 문자열 속성 선택자
1 분 퀴즈
5.2 조합 선택자 사용하기
5.2.1 그룹 선택자
5.2.2 자식 선택자
5.2.3 하위 선택자
5.2.4 인접 형제 선택자
5.2.5 일반 형제 선택자
1 분 퀴즈
5.3 가상 요소 선택자 사용하기
5.4 가상 클래스 선택자 사용하기
5.4.1 링크 가상 클래스 선택자
5.4.2 동적 가상 클래스 선택자
5.4.3 입력 요소 가상 클래스 선택자
5.4.4 구조적 가상 클래스 선택자
1 분 퀴즈
5.5 다양한 선택자 조합하기
마무리
셀프체크
6장 CSS 필수 속성 다루기
6.1 CSS의 특징 살펴보기
6.1.1 기본 스타일 시트
6.1.2 적용 우선순위와 개별성
6.1.3 상속
6.1.4 단위
6.1.5 색상 표기법
6.2 텍스트 속성으로 텍스트 꾸미기
6.2.1 font-family 속성
6.2.2 font-size 속성
6.2.3 font-weight 속성
6.2.4 font-style 속성
6.2.5 font-variant 속성
6.2.6 color 속성
6.2.7 text-align 속성
6.2.8 text-decoration 속성
6.2.9 letter-spacing 속성
6.2.10 line-height 속성
1 분 퀴즈
6.3 박스 모델을 구성하는 속성 다루기
6.3.1 margin 영역
6.3.2 border 영역
6.3.3 padding 영역
6.3.4 content 영역
6.3.5 박스 모델의 성격과 display 속성
1 분 퀴즈
6.4.1 background-color 속성
6.4.2 background-image 속성
6.4.3 background-repeat 속성
6.4.4 background-size 속성
6.4.5 background-position 속성
6.4.6 background-attachment 속성
6.4.7 background 속성으로 한 번에 지정하기
1 분 퀴즈
6.4 배경 속성으로 요소의 배경 설정하기
6.5 위치 속성으로 HTML 요소 배치하기
6.5.1 position 속성
6.5.2 float 속성
6.5.3 clear 속성
1 분 퀴즈
6.6 전환 효과 속성 적용하기
6.6.1 전환이란
6.6.2 transition-property 속성
6.6.3 transition-duration 속성
6.6.4 transition-delay 속성
6.6.5 transition-timing-function 속성
6.6.6 transition 속성으로 한 번에 지정하기
1 분 퀴즈
6.7 애니메이션 속성으로 전환 효과 제어하기
6.7.1 키 프레임 정의하기
6.7.2 animation-name 속성
6.7.3 animation-duration 속성
6.7.4 animation-delay 속성
6.7.5 animation-fill-mode 속성
6.7.6 animation-iterator-count 속성
6.7.7 animation-play-state 속성
6.7.8 animation-direction 속성
6.7.9 animation 속성으로 한 번에 지정하기
1 분 퀴즈
6.8 변형 효과 적용하기
6.8.1 transform 속성
6.8.2 transform-origin 속성
6.9 웹 폰트와 아이콘 폰트 사용하기
6.9.1 구글 폰트 적용하기
6.9.2 아이콘 폰트 적용하기
마무리
셀프체크
7장 효과적인 레이아웃을 위한 CSS 속성 다루기
7.1 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기
7.1.1 플렉스 박스 레이아웃 살펴보기
7.1.2 플렉스 박스 레이아웃의 기본 속성
7.1.3 플렉스 박스 레이아웃의 정렬 속성
1 분 퀴즈
7.2 그리드 레이아웃으로 2차원 레이아웃 설계하기
7.2.1 그리드 레이아웃 살펴보기
7.2.2 그리드 레이아웃의 기본 속성
7.2.3 그리드 레이아웃의 정렬 속성
7.2.4 그리드 레이아웃의 배치 속성
1 분 퀴즈
7.3 반응형 웹을 위한 미디어 쿼리 사용하기
7.3.1 미디어 쿼리란
7.3.2 뷰포트 알아보기
7.3.3 미디어 쿼리의 기본 문법
1 분 퀴즈
마무리
셀프체크
Part 3 자바스크립트로 웹 동작 구현하기
8장 자바스크립트 시작하기
8.1 자바스크립트 코드 작성 방법
8.1.1 HTML 파일과 자바스크립트 연결하기
8.1.2 자바스크립트 코드 실행하기
8.2 프로그래밍 시작 전 알아 두기
8.2.1 주석
8.2.2 자바스크립트 오류 확인 방법
마무리
9장 자바스크립트 기초 문법 살펴보기
9.1 변수와 상수
9.1.1 변수
9.1.2 새로운 변수 선언 키워드 let
9.1.3 상수
9.1.4 식별자 명명 규칙
1 분 퀴즈
9.2 자료형
9.2.1 문자열
9.2.2 숫자형
9.2.3 논리형
9.2.4 undefined
9.2.5 null
9.2.6 객체
1 분 퀴즈
9.3 연산자
9.3.1 산술 연산자
9.3.2 대입 연산자와 복합 대입 연산자
9.3.3 비교 연산자
9.3.4 논리 연산자
9.3.5 삼항 연산자
9.3.6 연산자 우선순위
9.3.7 형 변환
1 분 퀴즈
9.4 조건문 다루기
9.4.1 if, else, else if 문
9.4.2 switch 문
9.4.3 if 문과 조건식
9.4.4 if 문 vs switch 문
1 분 퀴즈
9.5 반복문 다루기
9.5.1 while 문
9.5.2 무한 반복문
9.5.3 do...while 문
9.5.4 for 문
9.5.5 for 문과 배열
9.5.6 for...in
9.5.7 break 문
9.5.8 continue 문
1 분 퀴즈
마무리
셀프체크
10장 자바스크립트 함수 다루기
10.1 함수란
10.2 함수를 정의하는 방법
10.2.1 함수 선언문으로 함수 정의하기
10.2.2 함수 표현식으로 함수 정의하기
10.2.3 화살표 함수로 함수 정의하기
1 분 퀴즈
10.3 함수 기능 확장하기
10.3.1 매개변수와 인수
10.3.2 매개변수의 특징
10.3.3 return 문
1 분 퀴즈
10.4 함수의 특징 이해하기
10.4.1 스코프
10.4.2 함수 호이스팅
1 분 퀴즈
10.5 즉시 실행 함수 사용하기
1 분 퀴즈
마무리
셀프체크
11장 자바스크립트 객체 다루기
11.1 객체란
11.2 객체 속성 다루기
11.2.1 객체 속성에 접근하기
11.2.2 객체 속성 값 변경하기
11.2.3 객체 속성 동적으로 추가하기
11.2.4 객체 속성 동적으로 삭제하기
11.2.5 객체의 데이터 관리 방법 이해하기
1 분 퀴즈
11.3 표준 내장 객체 사용하기
11.3.1 문자열을 다루는 String 객체
11.3.2 배열을 다루는 Array 객체
11.3.3 날짜와 시간을 다루는 Date 객체
11.3.4 수학 연산을 다루는 Math 객체
1 분 퀴즈
11.4 브라우저 객체 모델 사용하기
11.4.1 window 객체의 속성과 메서드
11.4.2 window 객체의 기본 속성 사용하기
11.4.3 웹 브라우저에서 새 창 제어하기
11.4.4 웹 브라우저의 스크롤 이동하기
1 분 퀴즈
마무리
셀프체크
12장 문서 객체 모델과 이벤트 다루기
12.1 문서 객체 모델 이해하기
12.1.1 문서 객체 모델이 생성되는 방식
12.1.2 노드 타입 살펴보기
1 분 퀴즈
12.2 노드 선택하기
12.2.1 속성으로 노드 선택하기
12.2.2 메서드로 노드 선택하기
1 분 퀴즈
12.3 노드 조작하기
12.3.1 콘텐츠 조작하기
12.3.2 스타일 조작하기
12.3.3 클래스 속성 조작하기
12.3.4 데이터 속성 조작하기
12.3.5 메서드로 속성 조작하기
1 분 퀴즈
12.4 노드 추가/삭제하기
12.4.1 노드 추가하기
12.4.2 노드 삭제하기
1 분 퀴즈
12.5 폼 조작하기
12.5.1 form 태그 선택하기
12.5.2 폼 요소 선택하기
12.5.3 폼 요소의 입력값 다루기
1 분 퀴즈
12.6 이벤트 다루기
12.6.1 이벤트 종류
12.6.2 이벤트 등록하기
1 분 퀴즈
12.7 이벤트 객체와 this
12.7.1 이벤트 객체 사용하기
12.7.2 이벤트 취소하기
12.7.3 this 키워드 사용하기
1 분 퀴즈
마무리
셀프체크
Part 4 프로젝트로 웹 개발 기초 완성하기
13장 HTML+CSS+자바스크립트로 완성하는 최종 프로젝트
13.1 최종 프로젝트 개요
13.2 헤더 영역 만들기
13.2.1 HTML 코드 작성하기
13.2.2 CSS 코드 작성하기
13.3 메인 영역 만들기
13.3.1 HTML 코드 작성하기
13.3.2 CSS 코드 작성하기
13.3.3 헤더 영역 개선하기
13.4 섹션 영역 만들기 - About Me
13.4.1 HTML 코드 작성하기
13.4.2 CSS 코드 작성하기
13.5 섹션 영역 만들기 – What I Do
13.5.1 HTML 코드 작성하기
13.5.2 CSS 코드 작성하기
13.6 배경 영역
13.7 섹션 영역 만들기 – PortFolio
13.7.1 HTML 코드 작성하기
13.7.2 CSS 코드 작성하기
13.8 섹션 영역 만들기 – Contact With Me
13.8.1 HTML 코드 작성하기
13.8.2 CSS 코드 작성하기
13.9 반응형 코드 적용하기
13.9.1 기준점 설정하기
13.9.2 반응형 코드 작성하기
13.10 자바스크립트 적용하기
13.10.1 텍스트 타이핑 효과 구현하기
13.10.2 스크롤 이동 시 헤더 영역에 스타일 적용하기
13.10.3 부드러운 이동 애니메이션 효과 구현하기
코딩 자율학습 HTML + CSS + 자바스크립트
13.11 유효성 검증하기
해설 노트
HTML
3.4
링크와 이미지 넣기
링크
(link)
는 문서와 문서 간 연결을 의미하며, 기본으로
a
태그를 사용합니다. 사진과 같은 이미지 객체를 삽입할 때는
img
태그로 작성합니다.
Prev
BUY
Next
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.
Email address