칼퇴족 김대리는 알고 나만 모르는 HTML5+CSS3

웹 표준을 위한 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 메뉴에 페이지로 이동하는 하이퍼링크 적용하기

| 부록 | 칼퇴족에게 유용한 사이트 모음

김태광 시각디자인을 전공하고 홍익대학교 디자인콘텐츠 대학원에서 광고디자인으로 석사학위를 받았으며 20여 년 이상의 실무 경력이 있다. 1997년 1세대 웹디자이너로 디자인을 시작하여 UI UX 디자인과 웹퍼블리셔로 영역을 확장했으며 웹디자인기능사 자격증을 취득했다.
현재는 대학에서 학생들에게 디자인을 가르치고 있다.