추가 적립 안내

어렵고 지루한 설명은 그만!
사용도가 높은 HTML 태그와 CSS 속성을 짧고 쉽게 설명한 책!

웹 디자이너로 실무를 진행하던 저자는 퍼블리싱 업무를 진행하게 되면서 부딪힌 궁금증과 시행착오를 해결하기 위해 많은 책과 씨름했다. 하지만 어려운 용어와 내용으로 가득한 사전 같은 책은 보기에도 불편하고 과한 정보로 인해 지면 낭비인 경우가 많았으며 여기저기 서치해 찾아낸 자료도 하나를 해결하면 또 다른 질문이 생겨 진일보하지 못하는 상황이었다. 20여 년간 실무에 있으면서 많은 어려움을 스스로 해결해온 저자는 활용도 높은 책의 필요성을 절감해 경험과 연륜을 모아 이 책을 집필했다.
이 책은 개념과 용도를 설명하고 바로 이어 실습을 따라 해 기능을 익히게 했고, 색과 타이포그래피, 레이아웃 등 디자인에 필요한 내용을 다루어 감각적인 디자인도 가능하게 했다. 코딩 작업의 가독성을 높이는 설정을 하고 수시로 크롬 브라우저로 미리 보기 하니 작업능률도 높다.
기능을 모두 익히고 나면 실제로 웹사이트를 만들면서 실력을 발휘해보자! 천천히 따라 하면 누구든 원하는 웹 사이트를 만들 수 있을 것이다.

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

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