칼퇴족 김대리는 알고 나만 모르는 HTML5+CSS3
$24.15
SKU
9791190641982
[Free shipping over $100]
Standard Shipping estimated by Tue 12/17 - Mon 12/23 (주문일로부 10-14 영업일)
Express Shipping estimated by Thu 12/12 - Mon 12/16 (주문일로부 7-9 영업일)
* 안내되는 배송 완료 예상일은 유통사/배송사의 상황에 따라 예고 없이 변동될 수 있습니다.
| Publication Date | 2023/04/01 |
| Pages/Weight/Size | 148*210*30mm |
| ISBN | 9791190641982 |
| Categories | IT 모바일 > 웹사이트 |
Description
어렵고 지루한 설명은 그만!
사용도가 높은 HTML 태그와 CSS 속성을 짧고 쉽게 설명한 책!
웹 디자이너로 실무를 진행하던 저자는 퍼블리싱 업무를 진행하게 되면서 부딪힌 궁금증과 시행착오를 해결하기 위해 많은 책과 씨름했다. 하지만 어려운 용어와 내용으로 가득한 사전 같은 책은 보기에도 불편하고 과한 정보로 인해 지면 낭비인 경우가 많았으며 여기저기 서치해 찾아낸 자료도 하나를 해결하면 또 다른 질문이 생겨 진일보하지 못하는 상황이었다. 20여 년간 실무에 있으면서 많은 어려움을 스스로 해결해온 저자는 활용도 높은 책의 필요성을 절감해 경험과 연륜을 모아 이 책을 집필했다.
이 책은 개념과 용도를 설명하고 바로 이어 실습을 따라 해 기능을 익히게 했고, 색과 타이포그래피, 레이아웃 등 디자인에 필요한 내용을 다루어 감각적인 디자인도 가능하게 했다. 코딩 작업의 가독성을 높이는 설정을 하고 수시로 크롬 브라우저로 미리 보기 하니 작업능률도 높다. 기능을 모두 익히고 나면 실제로 웹사이트를 만들면서 실력을 발휘해보자! 천천히 따라 하면 누구든 원하는 웹 사이트를 만들 수 있을 것이다.
사용도가 높은 HTML 태그와 CSS 속성을 짧고 쉽게 설명한 책!
웹 디자이너로 실무를 진행하던 저자는 퍼블리싱 업무를 진행하게 되면서 부딪힌 궁금증과 시행착오를 해결하기 위해 많은 책과 씨름했다. 하지만 어려운 용어와 내용으로 가득한 사전 같은 책은 보기에도 불편하고 과한 정보로 인해 지면 낭비인 경우가 많았으며 여기저기 서치해 찾아낸 자료도 하나를 해결하면 또 다른 질문이 생겨 진일보하지 못하는 상황이었다. 20여 년간 실무에 있으면서 많은 어려움을 스스로 해결해온 저자는 활용도 높은 책의 필요성을 절감해 경험과 연륜을 모아 이 책을 집필했다.
이 책은 개념과 용도를 설명하고 바로 이어 실습을 따라 해 기능을 익히게 했고, 색과 타이포그래피, 레이아웃 등 디자인에 필요한 내용을 다루어 감각적인 디자인도 가능하게 했다. 코딩 작업의 가독성을 높이는 설정을 하고 수시로 크롬 브라우저로 미리 보기 하니 작업능률도 높다. 기능을 모두 익히고 나면 실제로 웹사이트를 만들면서 실력을 발휘해보자! 천천히 따라 하면 누구든 원하는 웹 사이트를 만들 수 있을 것이다.
Contents
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 메뉴에 페이지로 이동하는 하이퍼링크 적용하기
| 부록 | 칼퇴족에게 유용한 사이트 모음
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 메뉴에 페이지로 이동하는 하이퍼링크 적용하기
| 부록 | 칼퇴족에게 유용한 사이트 모음