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

김태광 저자(글)

책밥 · 2023년 04월 01일

책 소개

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

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

작가정보

저자(글) 김태광

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

목차

• 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 메뉴에 페이지로 이동하는 하이퍼링크 적용하기
  
  | 부록 | 칼퇴족에게 유용한 사이트 모음

출판사 서평

웹 표준을 위한 HTML5, CSS3로
웹 기본기 완성!!

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

기본정보

ISBN	9791190641982
발행(출시)일자	2023년 04월 01일
쪽수	408쪽
크기	148 * 210 * 33 mm / 749 g
총권수	1권

Klover 리뷰 (2)

[al*****]

그동안 학원에서 배운 부분인데 강의교재는 없고 정리는 필요 해서 교보문고 갔다가 구매했어요 - 다른 책에 비해 크기도 작은 편이고 내용도 예시나 도움되는 그림들이 중간중간 잘 되어 있어서 보충용이나 사전처럼 활용히기 좋을 것 같더라고요- 잘 보겠습니다 :)

[si******]

좋은책을 빠르게 배송해주셔서 감사합니다.