장바구니 담기 close

장바구니에 상품을 담았습니다.

장바구니로 계속쇼핑하기
칼퇴족 김대리는 알고 나만 모르는 HTML5+CSS3
미리보기

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

  • 김태광
  • |
  • 책밥
  • |
  • 2023-04-01 출간
  • |
  • 408페이지
  • |
  • 148 X 210 X 30mm
  • |
  • ISBN 9791190641982
판매가

21,000원

즉시할인가

18,900 원

카드할인

0원(즉시할인 0%)

적립금

1,050원 적립(5%적립)

배송비

무료배송

(제주/도서산간 배송 추가비용:3,000원)

추가혜택

네이버페이 무조건 1%적립+ 추가 1%적립

추가상품
상품선택
독서대 7,900원 독서대 선택안함 0원
수량
+ -
총주문금액
18,900원
장바구니 구매하기

※ 스프링제본 상품은 반품/교환/환불이 불가능하므로 신중하게 선택하여 주시기 바랍니다.

북스크린영상으로 만나보는 한 권의 책 이야기

출판사서평

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

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

교환 및 환불안내

도서교환 및 환불
  • ㆍ배송기간은 평일 기준 1~3일 정도 소요됩니다.(스프링 분철은 1일 정도 시간이 더 소요됩니다.)
  • ㆍ상품불량 및 오배송등의 이유로 반품하실 경우, 반품배송비는 무료입니다.
  • ㆍ고객님의 변심에 의한 반품,환불,교환시 택배비는 본인 부담입니다.
  • ㆍ상담원과의 상담없이 교환 및 반품으로 반송된 물품은 책임지지 않습니다.
  • ㆍ이미 발송된 상품의 취소 및 반품, 교환요청시 배송비가 발생할 수 있습니다.
  • ㆍ반품신청시 반송된 상품의 수령후 환불처리됩니다.(카드사 사정에 따라 카드취소는 시일이 3~5일이 소요될 수 있습니다.)
  • ㆍ주문하신 상품의 반품,교환은 상품수령일로 부터 7일이내에 신청하실 수 있습니다.
  • ㆍ상품이 훼손된 경우 반품 및 교환,환불이 불가능합니다.
  • ㆍ반품/교환시 고객님 귀책사유로 인해 수거가 지연될 경우에는 반품이 제한될 수 있습니다.
  • ㆍ스프링제본 상품은 교환 및 환불이 불가능 합니다.
  • ㆍ군부대(사서함) 및 해외배송은 불가능합니다.
  • ㆍ오후 3시 이후 상담원과 통화되지 않은 취소건에 대해서는 고객 반품비용이 발생할 수 있습니다.
반품안내
  • 마이페이지 > 나의상담 > 1 : 1 문의하기 게시판 또는 고객센터 1800-7327
교환/반품주소
  • 경기도 파주시 문발로 211 1층 / (주)북채널 / 전화 : 1800-7327
  • 택배안내 : CJ대한통운(1588-1255)
  • 고객님 변심으로 인한 교환 또는 반품시 왕복 배송비 5,000원을 부담하셔야 하며, 제품 불량 또는 오 배송시에는 전액을 당사에서부담 합니다.