서브메뉴

본문

HTML5+CSS3 실무테크닉 (웹 표준에 맞는 HTML5와 CSS3를 한 번에 끝내자)
HTML5+CSS3 실무테크닉 (웹 표준에 맞는 HTML5와 CSS3를 한 번에 끝내자)
저자 : 김은기
출판사 : 성안당
출판년 : 2015
ISBN : 9788931553451

책소개

W3C(World Wide Web Consortium)에 의해 표준으로 채택된 HTML5는 기존의 텍스트와 하이퍼링크만으로 구성되어 있던 HTML에 비디오, 오디오, 그래픽, 위치 정보 등을 처리할 수 있는 기능을 포함시킨 기술이다. 이에 따라 웹 브라우저를 만드는 업체에서는 표준화가 진행된 기능들을 웹 브라우저에 포함하여 버전 업을 계속 진행하고 있으며, 웹 사이트에서도 HTML5의 기능을 이용하여 콘텐츠를 제공하고자 하는 노력을 계속 기울이고 있다.

이 책은 웹 사이트 제작에 필요한 HTML5와 CSS3에 대한 내용을 담고 있다. 처음 시작하는 분들이라도 따라하기를 통해 쉽고 재미있게 배울 수 있고, 실무에서도 활용할 수 있도록 구성하였다. 그리고 웹 사이트를 만드는 데 필요한 내용만을 다루었기 때문에 지루한 이야기나 쓸모없는 설명에 시간을 빼앗기지 않고 필요로 하는 정보만을 습득할 수 있다.
[예스24에서 제공한 정보입니다.]

출판사 서평

■ 책 소개
웹 표준에 맞는 HTML5와 CSS3를 한 번에 끝내자!


W3C(World Wide Web Consortium)에 의해 표준으로 채택된 HTML5는 기존의 텍스트와 하이퍼링크만으로 구성되어 있던 HTML에 비디오, 오디오, 그래픽, 위치 정보 등을 처리할 수 있는 기능을 포함시킨 기술입니다. 이에 따라 웹 브라우저를 만드는 업체에서는 표준화가 진행된 기능들을 웹 브라우저에 포함하여 버전 업을 계속 진행하고 있으며, 웹 사이트에서도 HTML5의 기능을 이용하여 콘텐츠를 제공하고자 하는 노력을 계속 기울이고 있습니다.

이 책은 웹 사이트 제작에 필요한 HTML5와 CSS3에 대한 내용을 담고 있습니다. 처음 시작하는 분들이라도 따라하기를 통해 쉽고 재미있게 배울 수 있고, 실무에서도 활용할 수 있도록 구성하였습니다. 그리고 웹 사이트를 만드는 데 필요한 내용만을 다루었기 때문에 지루한 이야기나 쓸모없는 설명에 시간을 빼앗기지 않고 필요로 하는 정보만을 습득할 수 있습니다.

■ 출판사 서평
이 책은 HTML4와 HTML5의 차이점을 꼼꼼히 짚어주고, 기본부터 체계적으로 설명해 주며, 기능이나 태그마다 설명, 소스, 화면으로 구성되어 있어 내용을 직관적으로 이해할 수 있고, 바로 따라해 보고 조금씩 응용해볼 수 있습니다.
또한 CSS를 적용하여 HTML 문서를 꾸는 방법도 쉽게 설명되어 있어 HTML 문서에 스타일을 쉽게 적용할 수 있고, 브래킷이라는 에디터와 크롬의 사용 방법에 대해서도 설명하고 있어 생소한 프로그램을 이용하는 데에도 문제가 없었습니다. 예제 또한 저자가 현장 실무에서 익힌 노하우가 그대로 녹아 있어 실무에서 바로 사용할 수 있게 만들어져 있습니다.
[교보문고에서 제공한 정보입니다.]

목차정보

Part 1 HTML5의 기초 다지기



Lesson 01 웹 브라우저의 언어, HTML5

HTML의 개념

HTML5의 개념

HTML5의 주요 기능

Lesson 02 웹 스타일을 책임지는 스타일시트, CSS3

스타일시트(CSS)의 개념

업그레이드된 CSS3

CSS3 주요 기능

HTML5와 CSS3를 지원하는 웹 브라우저

Lesson 03 웹 페이지를 새롭게 만드는 자바스크립트(JavaScript)

자바스크립트 소스

자바스크립트의 매력

Lesson04 HTML5, CSS3, JavaScript의 상관관계

HTML5, CSS3, JavaScript

웹 문서 작성 시 지켜야 할 규칙

Lesson 05 학습을 위한 준비

브래킷

웹 브라우저, 크롬

웹 사이트에서 샘플 다운로드하기



Part 2 HTML5 태그 정복하기



Lesson 01 HTML 기본 구조 들여다보기

HTML5의 기본 구조

HTML 태그의 특징

HTML 문서 연습하기

Lesson 02 웹 사이트의 안내자 <meta> 태그

<head> 태그 속의 <meta> 태그

문서의 문자 셋 선언하기

시간 설정하여 자동으로 페이지 이동하기

Lesson 03 HTML5 시멘틱 구조 태그

시멘틱 웹의 개념

제목 크기를 조절하는 <h1>~<h6> 태그

구획 정의를 위한 태그

Lesson 04 똑똑한 비서, 정리 태그 알아보기

<br> 태그 vs. <p> 태그

수평선을 긋는 <hr> 태그

입력한 형태 그대로 보여주는 <pre> 태그

<div>와 <span> 태그

Lesson05 보기 좋은 목록을 만드는 태그

목록 만드는 태그

계층 구조를 만드는 <dl> 태그

Lesson 06 타이포에 마술을 거는 태그

글자 스타일을 바꾸는 태그

글자 위의 주석, 루비 글자 태그

특수 문자 입력하기

Lesson 07 웹 문서를 재미있게 꾸미는 태그

이미지를 삽입하는 <img> 태그

이미지 크기 지정하기

상대 경로와 절대 경로

웹 문서 속의 웹 문서 <iframe>

멀티미디어를 삽입하는 <embed> 태그

<audio>와 <video> 태그

동영상을 자동 재생하고 반복하기

이미지맵을 설정하는 <map> 태그

Lesson 08 깔끔한 웹 문서의 필수품, Table

<table>의 기본 태그

테이블로 문서 편집하기

가로, 세로 내 마음대로 셀 합치기

테이블 안에 아기 테이블 넣기

Lesson 09 웹 공간을 마음대로 헤엄치는 하이퍼링크

URL로 하이퍼링크 연결하기

하나의 문서 안에서 특정 위치로 이동하기

하이퍼링크로 할 수 있는 다양한 것

Lesson 10 폼(form)으로 방문자와 대화하기

server-side를 처리하기 위한 <form>

<form> 안에 사용되는 입력 양식

HTML5 <input> 태그

Lesson 11 HTML5에서 더 이상 지원하지 않는 태그

HTML5에서 지원하는 태그

HTML5에서 새로 지원하는 태그



Part 3 CSS 기초 이해하기



Lesson 01 나만의 스타일을 만드는 CSS3

스타일시트의 개념

스타일시트의 매력

Lesson 02 스타일시트를 적용하는 여러 가지 방법

외부 문서에서 연결하기(linked Style)

문서 내부에 정의하기(Embedded Style)

태그에 직접 정의하기(Inline Style)



Lesson 03 기초부터 알아보는 스타일시트

스타일시트 기본 형식

특정 태그에 스타일 지정하기

그룹으로 만든 태그에 스타일 지정하기

하위 태그에 스타일 지정하기

클래스 이용하기

아이디(ID) 이용하기

Lesson 04 배경을 꾸미는 스타일시트

배경 색상 바꾸기(background-color)

배경 그림 바꾸기(background-image)

반복되는 배경 그림 바꾸기(background-repeat)

배경 그림의 스크롤 지정하기(background-attachment)

배경 그림의 위치 지정하기(background-position)

배경 그림의 속성을 한 번에 지정하기(background)

Lesson 05 테두리를 폼 나게 꾸미는 스타일시트

테두리 형태 지정하기(border-style)

테두리의 색상 지정하기(border-color)

테두리의 두께 지정하기(border-방향-width)

테두리의 두께를 한 번에 지정하기(border-width)

Lesson 06 세련미를 풍기는 박스 여백

바깥 여백 지정하기(margin-방향)

바깥 여백 한 번에 지정하기(margin)

안쪽 여백 지정하기(padding-방향)

문단의 위치와 폭, 높이 지정하기

Lesson 07 다양한 글씨를 표현하는 스타일시트

글자 색상 바꾸기(color)

글꼴 지정하기(font-family)

글자 형태 지정하기(font-style)

글자 굵기 지정하기(font-weight)

글자 크기 지정하기(font-size)

글자 속성 한 번에 지정하기(font)

Lesson 08 문자와 문단을 꾸미는 스타일시트

자간 지정하기(letter-spacing)

단어 간격 지정하기(word-spacing)

줄 간격 지정하기(line-height)

공백과 줄바꿈 지정하기(white-space)

Lesson 09 내 마음대로 문서를 꾸미는 스타일시트

문단 들여쓰기 지정하기(text-indent)

글자에 밑줄 긋기(text-decoration)

영문자의 대/소문자 속성(text-transform)

Lesson 10 목록을 꾸미는 스타일시트

목록의 머리 기호 바꾸기(list-style-type)

그림으로 목록의 머리 기호 만들기(list-style-image)

목록의 들여쓰기 지정하기(list-style-position)

Lesson 11 하이퍼링크를 꾸미는 스타일시트

하이퍼링크 색상과 밑줄 표시하기

한 문서에 여러 가지 하이퍼링크 스타일 적용하기

Lesson 12 여러 개의 스타일을 동시에 적용하기



Part 4 업그레이드된 CSS3 살펴보기



Lesson 01 CSS3 살짝 맛보기

CSS3 접두어

Lesson 02 테두리 속성, border

다양해진 테두리 효과

테두리를 둥글게 만들기(border-radius)

테두리에 그림자 만들기(box-shadow)

테두리에 이미지 사용하기(border-image)

Lesson 03 배경 이미지 속성, background

배경 이미지 크기 지정하기(background-size)

배경 이미지 위치 지정하기(background-origin)

배경 이미지 여러 개 지정하기(background)

Lesson 04 그레이디언트 속성, gradient

선형 그레이디언트 주기(linear-gradient)

선형 그레이디언트에 방향 주기(linear-gradient)

선형 그레이디언트에 여러 개의 색상 주기(linear-gradient)

선형 그레이디언트에 투명도 주기(linear-gradient)

선형 그레이디언트 반복하기(linear-gradient)

방사형 그레이디언트 만들기(radial-gradient)

방사형 그레이디언트에 모양 주기(radial-gradient)

방사형 그레이디언트에 크기와 위치 지정하기(radial-gradient)

방사형 그레이디언트 반복하기(radial-gradient)

Lesson 05 텍스트와 관련된 여러 가지 속성

Text Shadow

Word Wrapping

Lesson 06 CSS3를 이용한 간단한 애니메이션

animation 정의하기

@keyframe을 이용하여 Animation의 중간 상태 기술하기

Lesson 07 위치, 모양, 크기를 내 맘대로, transform

transform 사용하기

Lesson 08 애니메이션 속도를 제어하는 transition

transition 사용하기

Lesson 09 사용자 인터페이스(Basic User Interface) 만들기

Resizing

Box Sizing

Outline Offset

Multi-column



Part 5 반응형 웹 디자인과 부트스트랩



Lesson 01 반응형 웹 디자인 이해하기

반응형 웹 디자인의 개념

반응형 웹 사이트

반응형 웹 디자인이 적용된 경우

반응형 웹 디자인을 위한 브레이크 포인트

Lesson 02 웹 디자인 레이아웃을 위한 그리드 시스템

그리드 시스템의 기능

그리드 시스템 참조 사이트

정적, 동적, 반응형 그리드 시스템

Lesson 03 float과 display로 3단 레이아웃 만들기

float로 만든 3단 레이아웃

display:table-cell로 만든 3단 레이아웃

Lesson 04 미디어 타입과 미디어 쿼리

미디어 타입

미디어 쿼리

미디어 쿼리의 문법

Lesson 05 반응형 웹 디자인 따라하기

브레이크 포인트

가변 그리드 패턴

단 드롭 패턴

레이아웃 시프터 패턴

작은 변화 패턴

오프 캔버스 패턴

Lesson 06 이전 웹 브라우저에서 HTML5 사용하기

사람들은 어떤 웹 브라우저를 많이 사용할까?

웹 브라우저 버전에 따른 HTML5 사용하기

IE7 미만에서 HTML 및 CSS 엘리먼트, 투명 PNG 지원하기

Lesson 07 트위터의 오픈 소스, 부트스트랩

부트스트랩의 특징

부트스트랩 다운로드

부트스트랩 기본 문서 템플릿

그리드 시스템

테이블

폼과 버튼

기타 다양하게 제공되는 CSS

다양한 컴포넌트

반응형 디자인

커스터마이징



Part 6 따라해보는 실무 예제 및 템플릿



Lesson 01 따라하기 전 준비 사항

Lesson 02 가장 많이 사용하는 드롭다운 상단 메뉴

Lesson 03 펼쳐지고 접혀지는 아코디언 메뉴

Lesson 04 그룹화시켜 보여주는 탭 메뉴

Lesson 05 CSS를 이용한 아이콘 버튼

Lesson 06 여러 가지 이미지를 보여주는 이미지 슬라이더

Lesson 07 동영상을 컨트롤하는 동영상 플레이어

Lesson 08 실무에서 바로 써먹는 웹 사이트 템플릿

웹 사이트의 기초 설계

Top Menu & Footer

Main Page

Photo Gallery

Movie Gallery

About

Contact
[알라딘에서 제공한 정보입니다.]