HTML/CSS 입문 예제 중심

PART 1 HTML 편
CHAPTER 01 HTML 소개
1.1 웹의 개요
__1.1.1 웹이란?
__1.1.2 웹의 동작 원리
1.2 실습 환경 구축
1.3 HTML의 개요
__1.3.1 HTML 문서의 구조
__1.3.2 웹 페이지의 제목
1.4 HTML의 주석문
[연습문제]

CHAPTER 02 HTML의 기본 태그
2.1 텍스트
__2.1.1 글 제목 - <h1> ~ <h6>
__2.1.2 단락 - <p>
__2.1.3 줄바꿈 - <br>
__2.1.4 HTML 특수 문자
2.2 이미지
__2.2.1 이미지 삽입 - <img>
__2.2.2 URL 주소와 경로
2.3 오디오와 비디오
__2.3.1 오디오 - <audio>
__2.3.2 비디오 - <vidio>
2.4 목록
__2.4.1 순서없는 목록 - <ul> <li>
__2.4.2 순서 목록 - <ol> <li>
2.5 하이퍼링크
프로젝트 2-1 : 데이터 센터 소개 페이지 만들기
프로젝트 2-2 : 랙돌 고양이 소개 페이지 만들기
프로젝트 2-3 : 에버랜드 이용 안내 페이지 만들기
[연습문제]

CHAPTER 03. 폼 양식과 테이블
3.1 폼 양식이란?
3.2 입력 요소 - <input>
__3.2.1 텍스트 입력 창
__3.2.2 비밀번호 입력 창
__3.2.3 라디오 버튼
__3.2.4 체크 박스
__3.2.5 파일
__3.2.6 버튼
__3.2.7 <input> 태그의 속성
3.3 선택 박스 - <select> <option>
3.4 다중 입력 창 - <textarea>
3.5 표
__3.5.1 표 삽입 - <table<tr> <th> <td>
__3.5.2 셀의 병합
프로젝트 3-1 : 열차 시간표 만들기
프로젝트 3-2 : 기상청 일기예보 표 만들기
프로젝트 3-3 : 회원가입 폼 만들기
프로젝트 3-4 : 답글쓰기 폼 만들기
[연습문제]

Part 2. CSS 편
CHAPER 04 CSS의 기본 문법
4.1 CSS의 개요
__4.1.1 CSS의 기본 구조
__4.1.2 CSS의 삽입 방법
4.2 CSS의 주석문
4.3 웹의 색상
__4.3.1 배경 색상
__4.3.2 글자 색상
__4.3.3 색상 코드
4.4 글자 스타일 지정
__4.4.1 글자 정렬과 줄 간격
__4.4.2 폰트 설정
__4.4.3 글자 그림자
__4.4.4 링크 글자 꾸미기
4.5 웹 폰트
__4.5.1 웹 폰트 사용 방법
__4.5.2 웹 폰트 사용 예
프로젝트 4-1 : 생태 공원 이용 안내 페이지 만들기
프로젝트 4-2 : 고양이 기르기 페이지 만들기
프로젝트 4-3 : 링크걸린 텍스트 메뉴 꾸미기
[연습문제]

CHAPTER 05. 박스 모델
5.1 박스 모델이란?
5.2 경계선
__5.2.1 경계선 그리기
__5.2.2 상하좌우 경계선
5.3 마진과 패딩
__5.3.1 마진 - margin
__5.3.2 패딩 - padding
5.4 박스 관련 속성
__5.4.1 둥근 모서리 - border-radius
__5.4.2 박스 그림자 - box-shadow
프로젝트 5-1 : 웹 소개 페이지 만들기
프로젝트 5-2 : HTML/CSS 강좌 배너 만들기
프로젝트 5-3 : 우대 정보 페이지 만들기
[연습문제]

CHAPTER 06. CSS 선택자
6.1 선택자란?
6.2 선택자의 기본
__6.2.1 전체 선택자
__6.2.2 태그 선택자
__6.2.3 그룹 선택자
6.3 아이디와 클래스
6.4 클래스 선택자
6.5 하위 선택자
프로젝트 6-1 : 고양이 프로필 만들기
프로젝트 6-2 : 해수욕장 안내 페이지 만들기
프로젝트 6-3 : 책 홍보용 상세 페이지 만들기
[연습문제]

CHAPTER 07. CSS 활용
7.1 배경 이미지
__7.1.1 배경 이미지 삽입
__7.1.2 배경 이미지 반복
7.2 테이블 꾸미기
7.3 디스플레이 방식 - display
__7.3.1 display 속성
__7.3.2 인라인과 블록
7.4 목록 꾸미기
__7.4.1 글머리 기호 - list-style-type
__7.4.2 글머리 이미지 - list-style-image
__7.4.3 수평 목록 만들기
7.5 폼 꾸미기
__7.5.1 로그인 폼
__7.5.2 회원가입 폼
프로젝트 7-1 : 과일 쇼핑몰 상품 목록 만들기
프로젝트 7-2 : 드레스 샵 배너 만들기
프로젝트 7-3 : 게시판 글쓰기 폼 만들기
[연습문제]

Part 3. 레이아웃 편
CHAPTER 08. 레이아웃 기초
8.1 박스 요소의 중앙 배치
8.2 float 속성을 이용한 레이아웃
__8.2.1 float 속성
__8.2.2 clear 속성
8.3 웹 페이지 레이아웃
__8.3.1 div 요소 레이아웃
__8.3.2 HTML 레이아웃 요소
8.4 요소의 위치 지정 - position
8.5 레이아웃 활용 예
__8.5.1 사이트 맵 레이아웃
__8.5.2 배너 목록 레이아웃
프로젝트 8-1 기업 연혁 만들기
프로젝트 8-2 메뉴를 비정형으로 배치하기
[연습문제]

CHAPTER 09. 실전! 웹 페이지 제작
9.1 베이킹 사이트의 메인 레이아웃
9.2 상단 헤더와 메인 이미지
__9.2.1 상단 헤더 만들기
__9.2.2 메인 이미지 만들기
9.3 사이드바 만들기
9.4 메인 섹션 만들기
9.5 하단 푸터 만들기
9.6 웹 페이지 완성하기
프로젝트 9-1 포털 사이트 메인 페이지 레이아웃 잡기
프로젝트 9-2 쇼핑몰 상풍 진열 페이지 레이아웃 잡기
[연습문제]

Part 4. 반응형 웹 편
CHAPTER 10. 반응형 웹 기초
10.1 반응형 웹이란?
10.2 뷰포트
__10.2.1 뷰포트 미설정
__10.2.2 뷰포트 설정
10.3 그리드 뷰
__10.3.1 가변 그리드
__10.3.2 px와 % 동시 사용하기
10.4 반응형 웹의 폰트
__10.4.1 em 단위
__10.4.2 rem 단위
10.5 12열 그리드 시스템
[연습문제]

CHAPTER 11. 반응형 웹 기술
11.1 미디어 쿼리
11.2 가변 이미지
__11.2.1 이미지의 너비
__11.2.2 반응형 이미지 만들기
11.3 플렉서블 박스
__11.3.1 플렉서블 박스란?
__11.3.2 플렉스박스 방향 설정하기
__11.3.3 아이템 배치하기
__11.3.4 플렉스박스로 상품 목록 만들기
[연습문제]

CHAPTER 12. 반응형 웹 사이트 제작
12.1 반응형 포토 스튜디오 사이트
12.2 메인 페이지 만들기
__12.2.1 상단 헤더와 메인 이미지
__12.2.2 메인 콘텐츠
__12.2.3 하단 푸터
12.3 스튜디오 소개 페이지 만들기
12.4 스튜디오 예약 페이지 만들기
[연습문제]