『HTML5 CSS3 무작정 따라하기』는 HTML5와 CSS3를 통해 최신 웹 표준 사이트 만드는 법을 쉽게 설명하고 있다. HTML5에서 추가되거나 바뀐 부분을 적용하여 웹 표준 기술을 쉽게 학습할 수 있게 구성 하였으며 웹사이트를 만드는 데 필요한 핵심적인 내용만 체계적으로 엮어 실전에 활용할 수 있게 하였다.

저자 김선화 저자 김선화는 컴퓨터공학을 전공하고 대학원 과정으로 소프트웨어공학을 이수하였습니다. 2000년대 초 벤처 붐이 일어날 당시 기존 시스템을 웹 환경으로 구축하는 SI 업무를 하면서 웹 개발을 시작했습니다. 엔터프라이즈 환경에서 오픈 소스를 활용한 프레임워크 구축에 관심이 많습니다. 최근에는 모바일을 접목한 하이브리드 환경에 관심을 두고, Agile, UI/UX, HTML5, Spring 등 아키텍처 전반에 걸친 기술에 주목하고 있습니다. 저서 《웹 표준 사이트 & 모바일 애플리케이션 개발을 위한 HTML5&CSS3》 (다올미디어, 2012)

첫째마당 | HTML5와 CSS3 시작하기 1. 웹(Web)의 시작 2. 웹 개발 환경 살펴보기 웹브라우저의 종류 웹 개발 편집기 [무작정 따라하기] 노트패드++ 설치하기 [무작정 따라하기] 주요 브라우저 설치하기 3. HTML 시작하기 HTML5의 새로운 특징 HTML 작성하기 [무작정 따라하기] 여러 브라우저로 HTML파일 실행하기 [무작정 따라하기] 웹 문서에 공백 삽입하기 4. CSS 시작하기 CSS3의 새로운 특징 CSS 작성하기 CSS 적용 방법 살펴보기 CSS 활용하기 [무작정 따라하기] HTML 태그에 스타일 적용하기 [무작정 따라하기] 외부 CSS3 파일 적용하기 5. HTML과 관련된 웹 언어 살펴보기 자바 스크립트(Javascript) 서버 사이드 스크립트 언어 모바일 웹 앱 [무작정 따라하기] 자바스크립트로 알림메시지 띄우기 둘째마당 | HTML 기본 문서 만들기 1. HTML 문서 만들기 문서 구조 만들기 《head》 영역 정의하기 《body》 영역 정의하기 HTML5의 시맨틱 태그 [무작정 따라하기] 타이틀 바에 제목 적용하기 [무작정 따라하기] 인용문에 스타일 적용하기 [무작정 따라하기] 시맨틱 태그에 스타일 적용하기 2. CSS를 사용하여 문서 스타일 적용하기 원하는 위치에 배치하기 배경 색상 변경하기 배경 이미지 지정하기 배경 이미지 반복하기 배경 이미지 고정하기 배경 이미지 위치 지정하기 통합된 배경 적용하기 [무작정 따라하기] 이미지 자유롭게 배치하기 [무작정 따라하기] 배경 이미지에 패턴 적용하기 [무작정 따라하기] 제목 표시줄에 배경 이미지 적용하기 3. CSS3의 확장된 문서 스타일 다루기 미디어 쿼리로 상황에 맞는 스타일 적용하기 배경에 그라디언트 적용하기 배경 이미지 크기 조절하기 배경 잘라내기 배경 이동하기 배경에 여러 이미지 적용하기 [무작정 따라하기] 미디어 쿼리로 인쇄용 화면 만들기 [무작정 따라하기] 여러 배경 이미지를 활용하여 편지지 꾸미기 셋째마당 | 텍스트와 목록, 하이퍼링크 다루기 1. 텍스트와 목록 구성하기 형식에 맞는 텍스트 삽입하기 목록 삽입하기 정의 목록 삽입하기 [무작정 따라하기] 웹 문서에 목록 삽입하기 [무작정 따라하기] 목록 태그를 사용하여 가로 메뉴 만들기 [무작정 따라하기] 목록 태그를 사용하여 드롭다운 메뉴 만들기 2. 하이퍼링크로 내용 연결하기 하이퍼링크 삽입하기 새 창으로 하이퍼링크 열기 HTML5에서 추가된 type과 media 속성 HTML5로 여러 태그에 하이퍼링크 적용하기 [무작정 따라하기] 웹페이지에 책갈피 사용하기 3. CSS로 텍스트와 목록, 하이퍼링크 스타일 변경하기 텍스트 스타일 다루기 단락 스타일 다루기 목록 스타일 다루기 하이퍼링크 스타일 다루기 [무작정 따라하기] 목록에 이미지 스타일 적용하기 [무작정 따라하기] 마우스에 반응하는 메뉴 만들기 4. CSS3로 확장된 텍스트, 단락 효과 다루기 확장된 텍스트 스타일 다루기 확장된 단락 스타일 다루기 CSS3의 멀티 컬럼(Multi Column) [무작정 따라하기] 텍스트 그림자 효과 적용하기 [무작정 따라하기] 웹 폰트 사용하기 넷째마당 | 박스 모델과 표 만들기 1. 박스 모델과 표 작성하기 박스 모델 만들기 표 삽입하기 표 합치기 표에 레이아웃 작성하기 [무작정 따라하기] 박스 모델 레이아웃 배치하기 [무작정 따라하기] 표에 캡션 추가하기 [무작정 따라하기] 표를 이용하여 TV 영화 편성표 만들기 2. CSS로 표 스타일 다루기 여백과 테두리 지정하기 크기 지정하기 확장된 표 속성 다루기 [무작정 따라하기] 식단표 만들기 3. CSS3를 사용하여 스타일 확장하기 둥근 테두리 테두리에 이미지 적용하기 그림자 적용하기 [무작정 따라하기] 둥근 모서리 표 생성하기 [무작정 따라하기] 표에 그림자 적용하기 다섯째마당 | 입력 폼과 박스 만들기 1. 폼 삽입하기 폼(form)이란? 폼 태그 속성 2. 폼 태그에 입력 양식 삽입하기 입력 양식 《input》 태그 선택 목록 양식 《select》 태그 여러 줄 입력 양식 《textarea》 태그 [무작정 따라하기] 웹페이지에서 폼 태그 속성 확인하기 [무작정 따라하기] 간단한 회원 가입 폼 만들기 3. HTML5의 확장된 폼 양식 확장된 폼 태그의 속성 《input》 태그의 확장된 타입 새로 추가된 폼 양식 [무작정 따라하기] 브라우저별 최신 《input》 타입 지원여부 확인하기 [무작정 따라하기] CSS3를 적용하여 회원가입 폼 업그레이드하기 [무작정 따라하기] CSS3를 사용하여 버튼 스타일 변경하기 여섯째마당 | 이미지와 멀티미디어 사용하기 1. 이미지 사용하기 이미지 파일의 종류 이미지 파일 삽입하기 [무작정 따라하기] 다른 사이트의 이미지 파일 삽입하기 2. CSS3로 이미지 다루기 다양한 이미지 효과 적용하기 이미지 변형하기 이미지 전환하기 [무작정 따라하기] 이미지를 회전하여 사진 앨범 꾸미기 [무작정 따라하기] 메뉴에 마우스를 올렸을 때 변환/전환 효과 적용하기 3. 멀티미디어 활용하기 멀티미디어 파일의 종류 HTML5의 동영상 파일 삽입하기 HTML5로 오디오 파일 삽입하기 여러 개의 동영상과 음악 형식 지정하기 그 밖의 멀티미디어 파일 재생하기 [무작정 따라하기] 유튜브에서 동영상 가져오기 [무작정 따라하기] CSS3를 사용하여 플레이어 꾸미기 부록 코드 미리보기

HTML5와 CSS3를 통해 최신 웹 표준 사이트 만들기 - 왕초보에게 가장 좋은 책! 웹 개발, 웹 디자인의 시작인 HTML은 개념이 어렵지 않고, 깊은 선행지식이 필요하지 않습니다. 하지만 최신 버전인 HTML5는 범위가 넓고 복잡해졌습니다. 『HTML5+CSS3 무작정 따라하기』는 HTML5에서 추가되거나 바뀐 부분을 적용하여 웹 표준 기술을 쉽게 학습할 수 있게 구성했습니다. HTML 기본기부터 웹 표준의 필요성, 페이지를 만들 때 HTML 코드와 CSS를 분리하는 이유까지, 최신의 웹 표준 사이트를 만드는 HTML5와 CSS3를 제대로 배워보세요! 출판사 리뷰 HTML5와 CSS3를 통해 최신 웹 표준 사이트 만들기 - 왕초보에게 가장 좋은 책! 직접 따라하면서 재미있게! HTML5 웹 페이지를 무작정 따라하면서 쉽게 만들어볼 수 있습니다. 본문에서 배운 내용을 응용하여 다채로운 웹 페이지를 만들어 보세요. 군더더기 없는 코드로 쉽게! 웹사이트를 만드는 데 필요한 핵심적인 내용만 체계적으로 엮어 실전에 활용할 수 있게 했습니다. 미리보기로 확실하게! HTML5는 지원하는 속성이 많습니다. 코드만 봐서는 알기 힘든 다양한 속성의 결과를 미리보기로 바로 확인할 수 있습니다. ※ 이 책의 대상 독자 웹 개발과 웹 디자인에 입문하는 초보자를 위한 책입니다. 차세대 웹 표준인 HTML5와 CSS3를 처음 접하는 사람을 대상으로 합니다. ※ 이 책의 구성 첫째마당. HTML5와 CSS3 시작: HTML5는 웹 문서를 만드는 데 사용하는 언어입니다. 웹페이지에서 볼 수 있는 문장, 이미지, 동영상 등은 모두 HTML5를 통해 표현됩니다. 물론 HTML만으로도 웹페이지를 만들 수 있지만 좀 더 멋있게 구성하려면 CSS3가 필수입니다. 둘째마당. 기본 HTML 문서: HTML5 문서를 논리적인 의미에 따라 여러 영역으로 구분하여 코드를 쉽게 이해하도록 할 수 있습니다. 또한 문서의 우측에 광고나 배너를 위치시키는 등 CSS3를 사용하여 원하는 위치에 요소를 배치할 수 있습니다. 셋째마당. 텍스트와 목록, 하이퍼링크: 잘 만들어진 HTML5 문서는 사용자에게 전달하고자 하는 정보가 명확하게 전달합니다. HTML5 문서에서 많은 부분을 차지하는 텍스트를 CSS3를 사용하여 효과적으로 표현하는 방법을 살펴봅니다. 넷째마당. 박스 모델과 표: 수많은 박스 모델 중에서도 표(table)는 데이터를 일목요연하게 정리해서 보여주기 위해 사용되는 대표적인 HTML5 태그입니다. 표는 큰 범위에서 박스 모델에 속하기 때문에, 박스 모델의 구조와 스타일 정의 방법을 이해하면 자유자재로 표를 다룰 수 있습니다. 다섯째마당. 입력 폼과 박스: 로그인, 결제 페이지 등 사용자 정보를 입력받는 웹 페이지는 폼을 이용하여 만듭니다. 사용자에게 정보를 효율적으로 입력받기 위해 좀 더 간결해진 HTML5의 폼 양식을 알아봅니다. 여섯째마당. 이미지와 멀티미디어: 웹 페이지를 살아 움직이게 하는 이미지와 동영상 파일을 삽입하고 효과적으로 보여주는 방법에 대해 살펴봅니다.