멀티 디바이스 시대의 필독서!
PC&스마트폰&태블릿 지원하는 웹 문법 사전의 최신 개정판!



웹 문서를 만드는 웹 프로그래밍 언어인 HTML(Hypertext Markup Language)은 버전5로, 웹 문서의 스타일을 미리 저장해 둔 스타일시트인 CSS(Cascading Style Sheet)는 레벨3로 설명하는 이 책은 웹 문서를 편집할 때 문법에 해당하는 사항들을 일목요연하게 정리한 사전이다.

이 책은 HTML5와 CSS3를 2부로 나눠 구성되어 있다. 각 부의 1장에서는 기초 지식을, 2장 이후에서는 레퍼런스에 대해 설명하고 있다. 특징과 개념, 신기능, 작성 방법은 각 부의 1장인 ‘HTML5의 기초 지식’과 ‘CSS3의 기초 지식’을 참조하면 된다.

2장부터 설명하는 레퍼런스에서는 각 항목을 기능별 카테고리로 나눈 후 기본 서식, 해설, 예제 소스 코드, 예제의 표시 화면, 각 브라우저의 지원표 등을 한 세트로 구성하여 수록하였다. HTML5와 CSS3의 레퍼런스는 기본적으로 동일한 형식으로 구성되어 있지만 독자들이 이해하기 편하도록 일부 형식을 변경한 것도 있다.



2년만에 출간되는 ‘HTML5 &CSS3 사전’의 개정판이다. 매일매일 추가되는 변경 사양에 맞춰 2013년 당시의 브라우저 지원 상황을 정리했다. 인터넷 익스플로러 10을 비롯한 최근 브라우저는 물론, 아이폰 및 안드로이드 탑재 표준 브라우저에서의 검증 결과도 수록하였기 때문에 어떤 브라우저, 어떤 스마트폰에서 어떤 요소와 프로퍼티를 사용할 수 있는지를 한눈에 파악할 수 있다. 차세대 규격을 다른 사람보다 먼저 익혀두고 싶은 독자는 물론, 이미 실제로 사용하고 있는 사람에게도 없어서는 안 될 필독서이다. 이 책은 익스플로러 10, 윈도 8, 아이폰 5/4, 안드로이드 4.2/4.1 사용 환경을 지원하는 웹 문서 편집에 적합하다.

제1부 제1장 HTML5의 기초 지식
HTML5란?
HTML의 기본적인 구조
문법상의 주의점
요소의 변경
글로벌 속성
콘텐츠 모델과 카테고리
섹션과 아웃라인
MathML과 SVG

제1부 제2장 HTML5 레퍼런스

<문서의 기본>

01 문서의 기본 구조를 정의한다

02 문서에 제목을 붙이고 싶다

03 기준이 되는 URL을 지정하고 싶다

04 문서 간의 관계를 나타내고 싶다

05 문서 정보를 나타내고 싶다

06 초기 정보를 나타내고 싶다

07 문자 인코딩을 나타내고 싶다

08 스타일시트를 사용하고 싶다

09 스크립트를 사용하고 싶다

10 스크립트가 실행되지 않는 환경에 대처하고 싶다


<섹션>

01 섹션을 나타내고 싶다

02 내비게이션을 나타내고 싶다

03 내용을 독립된 콘텐츠로 표시하고 싶다

04 메인 콘텐츠와는 관련이 약한 콘텐츠를 표시하고 싶다

05 제목을 표시하고 싶다

06 제목을 그룹화하고 싶다

07 머리말을 표시하고 싶다

08 바닥글을 표시하고 싶다

09 연락처를 표시하고 싶다


<콘텐츠의 그룹화>

01 단락을 표시하고 싶다

02 주제가 바뀌는 부분을 표시하고 싶다

03 입력한 대로 표시하고 싶다

04 긴 문장을 인용하고 싶다

05 목록을 만들고 싶다

06 번호가 붙은 목록을 만들고 싶다

07 목록의 시작 번호를 변경하고 싶다

08 목록의 항목 번호를 변경하고 싶다

09 목록 번호의 종류를 변경하고 싶다

10 목록을 내림차순으로 정렬하고 싶다

11 설명 목록을 표시하고 싶다

12 그림과 캡션을 표시하고 싶다

13 범용적인 영역을 설정하고 싶다


<텍스트 레벨의 의미 부여>

01 링크를 설정하고 싶다

02 링크처를 읽어들일 창을 설정하고 싶다

03 지정한 위치로 이동하고 싶다

04 강조하고 싶다

05 중요하다는 것을 나타내고 싶다

06 주석을 나타내고 싶다

07 정확하지 않게 된 내용을 나타내고 싶다

08 인용원의 제목을 표시하고 싶다

09 짧은 문장을 인용하고 싶다

10 용어 정의를 나타내고 싶다

11 약자나 머리글자를 나타내고 싶다

12 날짜 및 시간을 나타내고 싶다

13 컴퓨터 관련 텍스트를 나타내고 싶다

14 윗첨자 문자 및 아랫첨자 문자를 설정하고 싶다

15 기울임 글꼴을 나타내고 싶다

16 굵은 글꼴을 나타내고 싶다

17 텍스트에 라벨을 붙이고 싶다

18 하이라이트 표시를 하고 싶다

19 루비를 붙이고 싶다

20 텍스트의 표시 방향을 앞뒤와 독립시키고 싶다

21 텍스트의 표시 방향을 설정하고 싶다

22 범용적인 범위를 설정하고 싶다

23 줄바꿈을 하고 싶다

24 줄바꿈을 허락할 위치를 설정하고 싶다

25 내용의 추가 및 삭제를 나타내고 싶다


<콘텐츠 내장>

01 이미지를 표시하고 싶다

02 이미지맵을 만들고 싶다

03 인라인 프레임을 만들고 싶다

04 플러그인을 이용하고 싶다

05 다양한 형식의 콘텐츠를 넣고 싶다

06 플러그인의 파라미터를 설정하고 싶다

07 동영상을 재생하고 싶다

08 음성 파일을 재생하고 싶다

09 재생할 파일을 여러 개 지정하고 싶다

10 미디어에 자막을 넣고 싶다

11 스크립트를 사용하여 그림을 그리고 싶다


<표>

01 표(테이블)를 만들고 싶다

02 행과 열에 제목을 붙이고 싶다

03 캡션을 붙이고 싶다

04 열을 그룹화하고 싶다

05 열을 나타내고 싶다

06 행을 그룹화하고 싶다

07 세로 방향으로 셀을 연결하고 싶다

08 가로 방향으로 셀을 연결하고 싶다


<폼>

01 폼을 만들고 싶다

02 input 요소로 입력폼의 부품을 만들고 싶다

03 보내기 버튼을 만들고 싶다

04 리셋 버튼을 만들고 싶다

05 범용 버튼을 만들고 싶다

06 이미지를 사용하여 보내기 버튼을 만들고 싶다

07 표시하지 않고 보낼 텍스트를 지정하고 싶다

08 한 줄 입력 필드를 만들고 싶다

09 검색용 입력 필드를 만들고 싶다

10 전화번호, URL, 메일 주소용 입력 필드를 만들고 싶다

11 비밀번호용 입력 필드를 만들고 싶다

12 날짜 및 시간을 입력하고 싶다

13 날짜를 입력하고 싶다

14 연월을 입력하고 싶다

15 주를 입력하고 싶다

16 시간을 입력하고 싶다

17 수치를 입력하고 싶다

18 특정 범위의 수치를 입력하고 싶다

19 색을 지정하고 싶다

20 체크 상자를 만들고 싶다

21 라디오 버튼을 만들고 싶다

22 파일을 선택하여 업로드하고 싶다

23 버튼을 만들고 싶다

24 여러 줄을 입력할 수 있는 필드를 만들고 싶다

25 풀다운 메뉴를 만들고 싶다

26 목록 상자를 만들고 싶다

27 메뉴의 선택 항목을 그룹화하고 싶다

28 입력 후보 목록을 만들고 싶다

29 폼 부품을 그룹화하고 싶다

30 부품에 캡션을 붙이고 싶다

31 키 페어를 생성하고 싶다

32 폼의 계산 결과를 나타내고 싶다

33 진행 상황을 나타내고 싶다

34 게이지를 나타내고 싶다


<인터랙티브>

01 상세 정보를 온디맨드로 표시하고 싶다

02 명령을 나타내고 싶다

03 명령의 메뉴를 나타내고 싶다

04 사용자가 조작할 수 있는 UI를 나타내고 싶다




제2부 제1장 CSS3의 기초 지식

CSS란?

CSS의 기본 서식

셀렉터의 종류

HTML 문서에 대한 적용 방법

미디어 쿼리

박스 모델

스타일의 적용 요소, 상속, 우선순위

길이 지정 방법

색 지정 방법

각도 지정 방법

URL 지정 방법




제2부 제2장 CSS3 레퍼런스


<배경과 테두리>

01 배경 이미지를 여러 개 지정하고 싶다

02 배경을 표시할 범위를 지정하고 싶다

03 배경 이미지의 기준 위치를 지정하고 싶다

04 배경 이미지의 크기를 지정하고 싶다

05 둥근 모서리를 개별적으로 지정하고 싶다

06 둥근 모서리의 프로퍼티를 일괄 지정하고 싶다

07 테두리로 사용할 이미지를 지정하고 싶다

08 테두리에 사용할 이미지의 분할 위치를 지정하고 싶다

09 테두리 이미지의 굵기를 지정하고 싶다

10 테두리 이미지의 영역을 넓히고 싶다

11 이미지의 반복 방법을 지정하고 싶다

12 테두리 이미지를 일괄 지정하고 싶다


<박스>

01 박스에 음영을 넣고 싶다

02 내용이 넘치는 경우, 가로 방향의 표시 방법을 지정하고 싶다

03 내용이 넘치는 경우, 세로 방향의 표시 방법을 지정하고 싶다

04 너비와 높이의 산출 방법을 지정하고 싶다

05 아웃라인과 테두리 사이의 간격을 지정하고 싶다

06 요소의 크기를 변경할 수 있게 하고 싶다


<색과 그러데이션>

01 투명도를 지정하고 싶다

02 선형 그러데이션을 지정하고 싶다

03 원형(방사형) 그러데이션을 지정하고 싶다

04 그러데이션을 반복하고 싶다


<텍스트>

01 텍스트에 음영을 넣고 싶다

02 단어 중간의 줄바꿈 방법을 지정하고 싶다

03 텍스트가 넘치는 경우, 표시 방법을 지정하고 싶다

04 하이픈 표시 방법을 지정하고 싶다

05 탭 간격을 지정하고 싶다


<글꼴>

01 글꼴 크기를 조정하고 싶다

02 웹 글꼴을 사용하고 싶다


<단 구성>

01 단 수를 지정하고 싶다

02 단의 가로폭을 지정하고 싶다

03 단의 수와 폭을 일괄 지정하고 싶다

04 단의 간격을 지정하고 싶다

05 단 경계선의 종류를 지정하고 싶다

06 단 경계선의 굵기를 지정하고 싶다

07 단 경계선의 색을 지정하고 싶다

08 단 경계선의 프로퍼티를 일괄 지정하고 싶다

09 요소를 여러 단에 걸쳐서 표시하고 싶다

10 단끼리의 높이 밸런스를 지정하고 싶다

11 단 구성의 페이지 바꿈과 단 바꿈 방법을 지정하고 싶다


<플렉서블 박스 레이아웃>

01 플렉서블 박스 레이아웃을 사용하고 싶다

02 레이아웃의 방향을 지정하고 싶다

03 아이템을 여러 줄에 배치하고 싶다

04 레이아웃의 방향과 줄 수를 일괄 지정하고 싶다

05 아이템의 정렬 순서를 지정하고 싶다

06 아이템 폭의 증감을 개별적으로 지정하고 싶다

07 아이템 폭의 증감을 일괄 지정하고 싶다

08 주축 방향의 배치 방법을 지정하고 싶다

09 교차축 방향의 배치 방법을 지정하고 싶다

10 여러 줄인 경우, 교차축 방향의 배치 방법을 지정하고 싶다


<그리드 레이아웃>

01 그리드 레이아웃을 사용하고 싶다

02 그리드의 열과 행을 정의하고 싶다

03 그리드 아이템을 배치하고 싶다

04 여러 개의 그리드 셀에 배치하고 싶다

05 그리드 아이템의 맞춤 방법을 지정하고 싶다


<트랜지션>

01 트랜지션 효과를 넣고 싶다

02 트랜지션에 걸리는 시간을 지정하고 싶다

03 트랜지션의 속도 패턴을 지정하고 싶다

04 트랜지션의 시작을 늦추고 싶다

05 트랜지션의 프로퍼티를 일괄 지정하고 싶다


<애니메이션>

01 애니메이션의 키프레임을 설정하고 싶다

02 사용할 키프레임을 지정하고 싶다

03 애니메이션을 실행할 시간을 지정하고 싶다

04 애니메이션의 속도 패턴을 지정하고 싶다

05 애니메이션을 실행할 횟수를 지정하고 싶다

06 애니메이션을 반복할 방향을 지정하고 싶다

07 애니메이션의 실행 및 일시 정지를 지정하고 싶다

08 애니메이션의 시작을 늦추고 싶다

09 애니메이션의 대기 중이나 완료 후의 스타일을 지정하고 싶다

10 애니메이션의 프로퍼티를 일괄 지정하고 싶다


<변형>

01 요소에 2차원 변형 효과를 넣고 싶다

02 2차원 변형의 기점을 지정하고 싶다

03 요소에 3차원 변형 효과를 넣고 싶다

04 3차원 변형의 기점을 지정하고 싶다

05 3차원상에서 자식 요소를 그릴 방법을 지정하고 싶다

06 자식 요소를 투시도법으로 지정하고 싶다

07 자식 요소의 투시도법 기점을 변경하고 싶다

08 요소의 뒷면을 표시하는 방법을 지정하고 싶다




제3부 부록

01 폐지된 속성 목록

02 HTML5 태그 찾아보기

03 HTML5 속성 찾아보기

04 CSS3 찾아보기

05 용어 찾아보기