웹 표준을 위한 HTML5, CSS3로 웹 기본기 완성!! 웹브라우저는 사용자에게 최고의 경험을 제공하기 위해 새로운 기술과 기능을 제공한다. 하지만 다양한 웹브라우저는 서로 다른 렌더링 엔진을 사용하고 기본 설정이 다르기 때문에 웹 페이지를 표시하는 방식이 다르다. 그래서 이 책은 브라우저의 종류와 버전에 관계없이 웹 페이지 표시가 최대한 동일하게 보이고 웹 표준을 준수하는 학습을 하도록 했다. 시대가 변하는 속도에 따라 웹 개발 분야도 빠르게 변화하고 있다. 하지만 HTML과 CSS 기본은 변하지 않는다. 웹에 막 입문한 독자라도 책이 안내하는 대로 HTML 태그와 CSS 속성과 속성값 등의 개념을 알아보고 다양한 실습을 통해 소스를 작성하다 보면 기본기를 탄탄하게 쌓을 수 있다.

CHAPTER 01 HTML과 CSS 준비하기 01. HTML, CSS 개념 알기 | 01 | 웹브라우저(Web browser) 02. 뭘 준비하죠? ？웹브라우저의 종류와 점유율 ？크롬(Chrome) 브라우저 설치하기 ？개발자 도구 실습 _ 웹사이트 [+더보기]에서 HTML 요소와 CSS 속성과 속성값 알아보기 실습 _ [개발자 도구]로 색과 내용 수정해보기 | 01 | 편집기(Editors) 실습 _ 비주얼 스튜디오 코드 파일 다운로드하기 실습 _ 비주얼 스튜디오 코드 설치하기 ？비주얼 스튜디오 코드의 인터페이스 알아보기 ？편리한 확장 기능 사용하기 실습 _ 영문 메뉴를 한글로 교체하기 실습 _ HTML 파일을 실시간 미리 보기 ？코딩 속도를 높이는 기능 설정하기 CHAPTER 02 HTML 페이지 만들기 01. 태그(tag)가 뭐죠? 02. 요소(elements)가 뭐죠? 03. HTML 문서의 기본 구성 실습 _ [자동 완성] 기능을 이용해 HTML 구조 알아보기 04. 속성(Attributes) | 01 | href 속성 | 02 | target 속성 | 03 | src 속성 | 04 | alt 속성 05. 요소(elements)의 특징 | 01 | Block level 요소(elements) | 02 | Inline 요소(elements) 06. 텍스트(Text) 요소(elements) | 01 | 〈h1〉~〈h6〉 제목 태그(tags) | 02 | 문단 〈p〉 태그 | 03 | 줄 바꿈 〈br〉 태그 | 04 | 특수코드 문자(entity) | 05 | 문자 강조 태그 | 06 | 주석(comment) 실습 _ HTML 문서 만들기 07. 이미지(Images) 태그와 속성 | 01 | 〈img, src, alt〉를 이용하여？이미지 삽입하기 | 02 | 이미지 파일 경로(file paths) | 03 | HTML에서 사용할 수 있는 이미지 파일 형식 실습 _ 이미지 삽입하기 08. 하이퍼링크(Hyperlinks) | 01 | 이미지에 링크 적용하기 | 02 | 텍스트에 링크 적용하기 | 03 | 이메일에 링크 적용하기 | 04 | 주소(URL) 입력하기 실습 _ 이미지를 클릭해 새로운 탭(페이지)으로 열기 실습 _ 텍스트를 클릭해 새로운 탭(페이지)으로 열기 09. 목록(List) 태그 | 01 | 순서 없는 목록〈ul li〉 | 02 | 순서 있는 목록 〈ol li〉 실습 _ 순서 없는 목록에 순서 적용하기 10. 표(Table) 태그 실습 _ 3열 3행 표 만들기 11. 폼(Form) 태그 | 01 | 인풋(input) 태그 | 02 | 레이블(label) 태그 실습 _ 아이콘이 있는 검색 폼 만들기 12. 버튼(button) 태그 13. 미디어(Media) 태그 | 01 | 비디오(video) 태그 | 02 | 오디오(audio) 태그 | 03 | 유튜브(youtube) 연결 실습 _ 유튜브 영상을 HTML 페이지에 삽입하기 14. 의미론적인 요소로 구성된 HTML5 페이지？구조 | 01 | 헤더(header) 태그 | 02 | 내비게이션(nav) 태그 | 03 | 섹션(section) 태그 | 04 | 아티클(article) 태그 | 05 | 어사이드(aside) 태그 | 06 | 푸터(footer) 태그 실습 _ 의미론적 HTML 페이지 만들기 CHAPTER 03 CSS로 HTML 페이지 스타일링하기 01. CSS 입력법(Syntax) 02. 선택자(Selectors)의 종류 | 01 | 요소(element) | 02 | 아이디(#) | 02 | 클래스(.) | 03 | 모든(*) | 04 | 그룹(,) | 05 | 자손 선택자(한 칸 띄기) | 06 | 자식？선택자(〉) 03. 가상(pseudo) 클래스 04. HTML 페이지에 CSS 연결하기 | 01 | 외부(External CSS) 스타일 | 02 | 내부(Internal CSS) 스타일 | 03 | 인라인(Inline？CSS) 실습 _ 제목 글자 색 적용하기 05. 폰트(Fonts) | 01 | 패밀리(family) | 02 | 스타일(style) | 03 | 사이즈(size) | 04 | 웨이트(font-weight) | 05 | 구글 웹폰트(Google Web fonts) 실습 _ 구글 웹폰트 적용하기 06. 컬러(color) | 01 | 이름(names) | 02 | 16진수(HEX:Hexadecimal) | 03 | RGB(Red,？Green,？Blue) | 04 | HSL(Hue, Saturation, Lightness) | 05 | 컬러 선택기(Color Picker) 07. 텍스트 스타일링(Text styling) | 01 | 텍스트？정렬(align) | 02 | 데코레이션(decoration) | 03 | 들여쓰기(indent) | 04 | 자간(letter？spacing) | 05 | 단어 간격(word？spacing) | 06 | 행간(line？height) 08. 박스 모델(Box Model) | 01 | 크기(width,？height) | 02 | 테두리 선(border) | 03 | 여백(padding, margin) ？Padding(안쪽 여백) ？Margin(바깥 여백) | 01 | 둥근？모서리(radius) | 02 | box-sizing 09. 레이아웃(Layout) | 03 | float | 04 | clear | 05 | overflow ？이미지와 내용을 2단으로 레이아웃 구성하기 | 01 | display | 02 | position | 03 | flexbox ？부모(container)에서 사용하는 수평축 정렬 속성들 ◇ flex ◇ flex-direction ⑴ flex-direction : column ⑵ flex-direction : column-reverse ⑶ flex-direction : row ⑷ flex-direction : row-reverse ◇ flex-wrap ⑴ flex-wrap : wrap ⑵ flex-wrap : no- wrap ⑶ flex-wrap : wrap-reverse ◇ justfy-contents ⑴ justfy-contents : flex-start ⑵ justfy-contents : flex-end ⑶ justfy-contents : center ⑷ justify-contents : space-between ⑸ justify-contents : space-around ⑹ justify-contents : space-evenly ？부모(container)에서 사용하는 수직축 정렬 속성들 ◇ align-items ⑴ align-items: stretch ⑵ align-items: center ⑶ align-items: flex-start ⑷ align-items: flex-end ⑸ align-items: baseline ◇ align-contents 속성 ⑴ align-content : space-between ⑵ align-content : space-around ⑶ align-content : stretch ⑷ align-content : center ⑸ align-content : flex-start ⑹ align-content : flex-end ？자식(item)에서 사용하는 속성들 ◇ order ◇ flex-grow ◇ flex-shrink ◇ flex-basis ◇ flex ◇ align-self 실습 _ flexbox를 이용하여 HTML5 문서 레이아웃 디자인하기 | 07 | z-index 실습 _ z-index 속성 적용하기 z-index 속성을 활용해 겹침 순서 지정하기 10. 배경(background) | 01 | 배경색(background？color) 적용하기 | 02 | 배경에？이미지(background？image) 넣기 ？background-image ？background-repeat ？background-position ⑴ background-position : 키워드 ⑵ background-position : 좌푯값 ？background-size ⑴ background-size ⑵ background-size 속성의 속성값 비교 : auto, contain, cover | 03 | 불투명도(opacity) CHAPTER 04 실전 예제 웹사이트 만들기 01. 메인 페이지 만들기 | 01 | 메인 페이지 HTML 구성과 공통 CSS 만들기 | 02 | 메인 페이지에 로고와 GNB 만들기 | 03 | 이벤트 배너 배치하기 | 04 | 이미지？수평？정렬？만들기 | 05 | 유튜브 삽입하기 | 06 | 섬네일 갤러리와 뉴스 리스트 만들기 | 07 | footer 만들기 | 08 | 상단으로 이동하는 [top] 버튼 만들기 02. 서브 페이지 만들기 | 01 | 서브 페이지 HTML 구성 | 02 | 브레드크럼(breadcrumb) 만들기 | 03 | 제목과 이미지 수직 정렬 만들기 | 04 | 배경색 위에 섬네일 이미지 수평 정렬 만들기 | 05 | 제목과 이미지 가운데 정렬 만들기 | 06 | GNB 메뉴에 페이지로 이동하는 하이퍼링크 적용하기 | 부록 | 칼퇴족에게 유용한 사이트 모음