HOME > 상세정보

상세정보

(따라만 해도 완성되는 웹사이트를 위한) HTML5 + CSS3 무작정 따라하기 (20회 대출)

자료유형
단행본
개인저자
김선화
서명 / 저자사항
(따라만 해도 완성되는 웹사이트를 위한) HTML5 + CSS3 무작정 따라하기 / 김선화 지음
발행사항
서울 :   길벗,   2013  
형태사항
507 p. : 천연색삽화 ; 26 cm + 전자 광디스크 (CD-ROM) 1매
총서사항
무작정 따라하기 시리즈 = The cakewalk series - HTML5 & CSS3
ISBN
9788966185795
일반주기
부록: 코드미리보기  
색인수록  
000 00867camcc2200265 c 4500
001 000045810859
005 20140917134137
007 ta
008 140917s2013 ulka 001c kor
020 ▼a 9788966185795 ▼g 93560
035 ▼a (KERIS)BIB000013276333
040 ▼a 211019 ▼c 221022 ▼d 221022 ▼d 211009
082 0 4 ▼a 005.72 ▼a 006.74 ▼2 23
085 ▼a 005.72 ▼2 DDCK
090 ▼a 005.72 ▼b 2013z5
100 1 ▼a 김선화
245 2 0 ▼a (따라만 해도 완성되는 웹사이트를 위한) HTML5 + CSS3 무작정 따라하기 / ▼d 김선화 지음
260 ▼a 서울 : ▼b 길벗, ▼c 2013
300 ▼a 507 p. : ▼b 천연색삽화 ; ▼c 26 cm + ▼e 전자 광디스크 (CD-ROM) 1매
440 0 0 ▼a 무작정 따라하기 시리즈 = ▼x The cakewalk series - HTML5 & CSS3
500 ▼a 부록: 코드미리보기
500 ▼a 색인수록
945 ▼a KLPA
949 ▼a Cakewalk series - HTML5 & CSS3

소장정보

No. 소장처 청구기호 등록번호 도서상태 반납예정일 예약 서비스
No. 1 소장처 과학도서관/Sci-Info(1층서고)/ 청구기호 005.72 2013z5 등록번호 121230772 도서상태 대출가능 반납예정일 예약 서비스 B M

컨텐츠정보

책소개

HTML5에서 추가되거나 바뀐 부분을 적용하여 웹 표준 기술을 쉽게 학습할 수 있게 구성했다. HTML 기본기부터 웹 표준의 필요성, 페이지를 만들 때 HTML 코드와 CSS를 분리하는 이유까지, 최신의 웹 표준 사이트를 만드는 HTML5와 CSS3를 제대로 배울 수 있는 책이다.

HTML5와 CSS3를 통해 최신 웹 표준 사이트 만들기 - 왕초보에게 가장 좋은 책!
웹 개발, 웹 디자인의 시작인 HTML은 개념이 어렵지 않고, 깊은 선행지식이 필요하지 않습니다. 하지만 최신 버전인 HTML5는 범위가 넓고 복잡해졌습니다. 『HTML5+CSS3 무작정 따라하기』는 HTML5에서 추가되거나 바뀐 부분을 적용하여 웹 표준 기술을 쉽게 학습할 수 있게 구성했습니다.

HTML 기본기부터 웹 표준의 필요성, 페이지를 만들 때 HTML 코드와 CSS를 분리하는 이유까지, 최신의 웹 표준 사이트를 만드는 HTML5와 CSS3를 제대로 배워보세요!

직접 따라하면서 재미있게!
HTML5 웹 페이지를 무작정 따라하면서 쉽게 만들어볼 수 있습니다. 본문에서 배운 내용을 응용하여 다채로운 웹 페이지를 만들어 보세요.

군더더기 없는 코드로 쉽게!
웹사이트를 만드는 데 필요한 핵심적인 내용만 체계적으로 엮어 실전에 활용할 수 있게 했습니다.

미리보기로 확실하게!
HTML5는 지원하는 속성이 많습니다. 코드만 봐서는 알기 힘든 다양한 속성의 결과를 미리보기로 바로 확인할 수 있습니다.

※ 이 책의 대상 독자
웹 개발과 웹 디자인에 입문하는 초보자를 위한 책입니다. 차세대 웹 표준인 HTML5와 CSS3를 처음 접하는 사람을 대상으로 합니다.

※ 이 책의 구성
첫째마당. HTML5와 CSS3 시작: HTML5는 웹 문서를 만드는 데 사용하는 언어입니다. 웹페이지에서 볼 수 있는 문장, 이미지, 동영상 등은 모두 HTML5를 통해 표현됩니다. 물론 HTML만으로도 웹페이지를 만들 수 있지만 좀 더 멋있게 구성하려면 CSS3가 필수입니다.

둘째마당. 기본 HTML 문서: HTML5 문서를 논리적인 의미에 따라 여러 영역으로 구분하여 코드를 쉽게 이해하도록 할 수 있습니다. 또한 문서의 우측에 광고나 배너를 위치시키는 등 CSS3를 사용하여 원하는 위치에 요소를 배치할 수 있습니다.

셋째마당. 텍스트와 목록, 하이퍼링크: 잘 만들어진 HTML5 문서는 사용자에게 전달하고자 하는 정보가 명확하게 전달합니다. HTML5 문서에서 많은 부분을 차지하는 텍스트를 CSS3를 사용하여 효과적으로 표현하는 방법을 살펴봅니다.

넷째마당. 박스 모델과 표: 수많은 박스 모델 중에서도 표(table)는 데이터를 일목요연하게 정리해서 보여주기 위해 사용되는 대표적인 HTML5 태그입니다. 표는 큰 범위에서 박스 모델에 속하기 때문에, 박스 모델의 구조와 스타일 정의 방법을 이해하면 자유자재로 표를 다룰 수 있습니다.

다섯째마당. 입력 폼과 박스: 로그인, 결제 페이지 등 사용자 정보를 입력받는 웹 페이지는 폼을 이용하여 만듭니다. 사용자에게 정보를 효율적으로 입력받기 위해 좀 더 간결해진 HTML5의 폼 양식을 알아봅니다.

여섯째마당. 이미지와 멀티미디어: 웹 페이지를 살아 움직이게 하는 이미지와 동영상 파일을 삽입하고 효과적으로 보여주는 방법에 대해 살펴봅니다.


정보제공 : Aladin

저자소개

김선화(지은이)

서강대학교 컴퓨터공학과 소프트웨어공학 연구실 석사과정을 졸업하고 삼성전자에서 책임연구원으로 10년을 근무하였다. 현재는 홀리카우소프트를 설립, 소프트웨어 유아교육과 관련된 프로젝트를 진행하고 있다. 저서로는 'HTML5+CSS3 무작정 따라하기'를 비롯 '웹 표준사이트 & 모바일 애플리케이션 개발을 위한 HTML5+CSS3', 'MongoDB 핵심 가이드 : 클라우드와 빅데이터의 강력한 파트너-열혈강의'가 있으며 테크트랜스 그룹 T4라는 번역 그룹으로도 활동, '스프링 인 액션', '구글 애널리틱스로 하는 데이터 분석', '실무에 바로 적용하는 Node.js' 등 10권 이상의 번역에 참여했다.

정보제공 : Aladin

목차

첫째마당 : HTML5 와 CSS3 시작하기 
01 웹(Web)의 시작 = 22 
1. HTML5의 시작 = 23 
02 웹 개발 환경 살펴보기 = 24 
1. 웹 브라우저의 종류 = 25 
인터넷 익스플로러〔Internet Explorer〕 = 25 
파이어폭스〔Firefox〕 = 27 
크롬〔Chrome〕 = 28 
오페라〔Opera〕 = 28 
사파리〔Safari〕 = 29 
2. 웹 개발 편집기 = 31 
메모장〔Notepad〕 = 31 
노트패드++〔Notepad++〕 = 31 
아크로에디트〔AcroEdit〕 = 32 
드림위버〔DreamWeaver〕 = 33 
무작정 따라하기|노트패드++ 설치하기 = 34 
무작정 따라하기|주요 브라우저 설치하기 = 40 
03 HTML 시작하기 = 43 
1. HTML5의 새로운 특징 = 44 
2. HTML 작성하기 = 46 
시작 태그와 종료 태그 = 47 
태그의 중첩 사용 = 48 
들여쓰기와 줄 바꿈 = 49 
대소문자구분 = 50 
태그 내 글자의 공백 처리 = 50 
태그 내 속성 정의 = 51 
무작정 따라하기|여러 브라우저로 HTML 파일 실행하기 = 52 
무작정 따라하기|웹 문서에 공백 삽입하기 = 54 
04 CSS 시작하기 = 59 
1. CSS3의 새로운 특징 = 60 
글자와 박스의 그림자 효과 = 61 
둥근 테두리와 이미지 테두리 = 61 
불투명도(Opacitiy) 적용 = 61 
그레이디언트(Gradient) 효과 = 62 
도형의 회전 및 변형과 애니메이션 = 62 
웹 폰트(Web Font) 적용 = 62 
미디어 쿼리(@media) 적용 = 63 
2. CSS 작성하기 = 63 
3. CSS 적용 방법 살펴보기 = 65 
〈style〉태그 사용하기 = 65 
하나의 HTML 태그에 style 속성 적용하기 = 66 
별도의 CSS 파일로 저장하여 HTML 문서에 연결시키기 = 66 
4. CSS 활용하기 = 68 
무작정 따라하기|HTML 태그에 스타일 적용하기 = 72 
무작정 따라하기|외부 CSS3 파일 적용하기 = 77 
05 HTML과 관련된 웹 언어 살펴보기 = 80 
1. 자바스크립트(Javascript) = 81 
2. 서버 사이드 스크립트 언어 = 84 
3. 모바일 웹 앱 = 85 
무작정 따라하기|자바스크립트로 알림 메시지 띄우기 = 87 
둘째마당 : HTML 기본 문서 만들기 
01 HTML 문서구조 만들기 = 92 
1. 문서구조 만들기 = 93 
2.〈head〉영역 정의하기 = 95 
문서 정보 지정하기(〈meta〉) = 95 
문서 제목 지정하기(〈title〉) = 98 
3.〈body〉영역 정의하기 = 100 
단락 제목 지정하기(〈hi〉∼〈h6〉) = 100 
단락정의하기(〈p〉) = 100 
영역 정의하기(〈div〉,〈span〉) = 102 
줄바꾸기(〈br〉) = 105 
수평선 삽입하기(〈hr〉) = 105 
인용문 정의하기(〈blockquote〉,(q)) = 107 
4. HTML5의 시맨틱 태그 = 109 
문서 구조 적용하기 = 109 
그 밖의 시맨틱 태그 = 112 
무작정 따라하기|타이틀 바에 제목 적용하기 = 114 
무작정 따라하기|인용문에 스타일 적용하기 = 118 
무작정 따라하기|시맨틱 태그에 스타일 적용하기 = 122 
02 CSS를 사용하여 문서 스타일 적용하기 = 125 
1. 원하는 위치에 배치하기 = 126 
요소를 원하는 위치에 배치하기(position 속성) = 126 
좌/우 배치하기(float 속성) = 132 
좌우배치 해제하기(dear 속성) = 134 
배치 방식 변경하기(display 속성) = 135 
2. 배경 색상 변경하기 = 138 
3. 배경 이미지 지정하기 = 140 
4. 배경 이미지 반복하기 = 141 
5. 배경 이미지 고정하기 = 143 
6. 배경 이미지 위치 지정하기 = 143 
7. 통합된 배경 적용하기 = 147 
무작정 따라하기| 이미지 자유롭게 배치하기 = 149 
무작정 따라하기|배경 이미지에 패턴 적용하기 = 153 
무작정 따라하기|문서 제목에 배경 이미지 적용하기 = 157 
03 CSS3의 확장된 문서 스타일 다루기 = 161 
1. 미디어 쿼리로 상황에 맞는 스타일 적용하기 = 162 
미디어 쿼리 적용 방법 = 162 
미디어 타입과 조건 = 163 
2. 배경에 그레이디언트 적용하기 = 167 
3. 배경 이미지 크기 조절하기 = 171 
4. 배경 잘라내기 = 173 
5. 배경 이동하기 = 175 
6. 배경에 여러 이미지 적용하기 = 178 
무작정 따라하기|미디어 쿼리로 인쇄용 화면 만들기 = 180 
무작정 따라하기|여러 배경 이미지를 활용하여 편지지 꾸미기 = 185 
셋째마당 : 텍스트와 목록, 하이퍼링크 다루기 
01 텍스트와 목록 구성하기 = 192 
1. 형식에 맞는 텍스트 삽입하기 = 193 
2. 목록 삽입하기 = 195 
3. 정의 목록 삽입하기 = 197 
무작정 따라하기|웹 문서에 목록 삽입하기 = 200 
무작정 따라하기|목록 태그를 사요하여 가로 메뉴 만들기 = 204 
무작정 따라하기|목록 태그를 사용하여 드롭다운 메뉴 만들기 = 207 
02 하이퍼링크로 내용 연결하기 = 210 
1. 하이퍼링크 삽입하기 = 211 
2. 새 창으로 하이퍼링크 열기 = 214 
3. HTML5에서 추가된 type과 media 속성 = 215 
4. HTML5로 여러 태그에 하이퍼링크 적용하기 = 217 
무작정 따라하기|웹페이지에 책갈피 적용하기 = 220 
03 CSS로 텍스트와 목록, 하이퍼링크 스타일 변경하기 = 224 
1. 텍스트 스타일 다루기 = 225 
글꼴 지정하기(font-family) = 225 
텍스트 크기 지정하기(font-size) = 227 
텍스트 스타일 지정하기(font-style) = 228 
텍스트 굵기 지정하기(font-weight) = 228 
작은 대문자 지정하기(font-variant) = 229 
통합하여 지정하기(font) = 230 
색상 지정하기(color) = 230 
2. 단락 스타일 다루기 = 232 
줄 간격 지정하기(line-height) = 233 
글자/단어 간격 지정하기(letter-spacing, word-spacing) = 233 
단락 첫 글자 들여쓰기l(text-indent) = 234 
단락 정렬하기(text-align) = 234 
단락 꾸미기(text-decoration) = 235 
영역 밖의 텍스트/단락 보여주기l(overflow) = 236 
3. 목록 스타일 다루기 = 238 
항목의 구분자 타입 지정하기l(list-style-type) = 238 
항목에 이미지 구분자 지정하기(list-style-image) = 239 
항목에 들여쓰기 적용하기(list-style-position) = 240 
4. 하이퍼링크 스타일 다루기 = 242 
무작정 따라하기목록에 이미지 스타일 적용하기 = 245 
무작정 따라하기|마우스에 반응하는 메뉴 만들기 = 248 
04 CSS3로 확장된 텍스트, 단락 효과 다루기 = 252 
1. 확장된 텍스트 스타일 다루기 = 253 
텍스트에 그림자 효과 적용하기(text-shadow) = 253 
영역 밖의 단락 보여주기(overflow-x&overflow-y) = 254 
영역 밖의 텍스트 표시하기(text-overflow) = 255 
웹 폰트 적용하기@(font-face) = 256 
2. 확장된 단락스타일 다루기 = 260 
영역 내 긴 단어 표시하기(word-wrap) = 260 
하이픈(-)에서 줄 바꿈하기(word-break) = 261 
3. CSS3의 멀티 컬럼(Multi Column) = 264 
정해진 개수로 컬럼 나누기(column—count) = 264 
정해진 너비로 컬럼 나누기(column-width) = 265 
여백/선 스타일 지정하기(column-gap, column-rule) = 266 
무작정 따라하기|텍스트 그림자 효과 적용하기 = 269 
무작정 따라하기|웹 폰트 사용하기 = 274 
넷째마당 : 박스 모델과 표 만들기 
01 박스모델과 표 작성하기 = 280 
1. 박스 모델 만들기 = 281 
바깥 여백 다루기(margin) = 282 
안쪽 여백 다루기(padding) = 283 
내용 영역 크기 다루기(width, height) = 284 
테두리 지정하기 = 286 
2. 표 삽입하기 = 292 
3. 표 합치기 = 297 
행합치기 = 297 
열합치기 = 300 
4. 표에 레이아웃 작성하기 = 303 
표의 제목 텍스트 삽입하기(〈caption〉) = 303 
표의 제목 행/열 삽입하기(〈th〉) = 303 
표 내부 구조 지정하기 = 304 
무작정 따라하기|박스 모델 레이아웃 배치하기 = 308 
무작정 따라하기|표에 캡션 추가하기 = 313 
무작정 따라하기|표를 이용하여 TV 영화 편성표 만들기 = 317 
02 CSS로 표 스타일 다루기 = 322 
1. 여백과 테두리 지정하기 = 323 
2. 크기 지정하기 = 329 
박스 모델로크기 지정하기 = 329 
대표 크기 지정하기(〈colgroup〉,〈col〉) = 332 
동일한 크기 지정하기(table-layout) = 335 
3. 확장된 표 속성 다루기 = 338 
무작정 따라하기|식단표 만들기 = 343 
03 CSS3를 사용하여 스타일 확장하기 = 347 
1. 둥근 테두리 만들기 = 348 
2. 테두리에 이미지 적용하기 = 349 
3. 그림자 적용하기 = 352 
무작정 따라하기|둥근 모서리표 생성하기 = 354 
무작정 따라하기|표에 그림자 적용하기 = 356 
다섯째마당 : 입력 폼과 박스 만들기 
01 폼 삽입하기 = 362 
1. 폼(form)이란? = 363 
2. 폼 태그 속성 = 364 
02 폼 태그에 입력 양식 삽입하기 = 367 
1. 입력 양식〈input〉태그 = 368 
텍스트 입력을 위한 text 타입 = 369 
비밀번호 입력을 위한 password 타입 = 369 
버튼 삽입을 위한 button/submit/reset 타입 = 370 
파일 첨부를 위한 file 타입 = 371 
라디오 버튼 삽입을 위한 radio 타입 = 373 
체크박스 삽입을 위한 checkbox 타입 = 374 
데이터를 숨겨 전송하기 위한 hidden 타입 = 376 
2. 선택 목록 양식〈select〉태그 = 377 
3. 여러 줄 입력 양식〈textarea〉태그 = 382 
무작정 따라하기|웹 페이지에서 폼 태그 속성 확인하기 = 384 
무작정 따라하기|간단한 회원 가입 폼 만들기 = 386 
03 HTML5의 확장된 폼 양식 = 390 
1. 확장된 폼 태그의 속성 = 391 
2.〈input〉태그의 확장된 타입 = 396 
이메일 주소 입력받는 email 타입 = 397 
전화번호를 받기 위한 tel 타입 = 398 
웹 사이트 주소를 입력받기 위한 url 타입 = 400 
숫자를 입력받기 위한 number 타입 = 401 
범위 값을 입력받기 위한 number 타입 = 404 
날짜와 시간 입력받기 위한 datetime 타입 = 405 
검색 테이터 입력을 위한 search 타입 = 408 
색상 코드를 입력받기 위한 color 타입 = 409 
3. 새로 추가된 폼 양식 = 410 
진행상태 확인을 위한〈progress〉태그와〈meter〉태그 = 410 
힌트 목록을 제공하기 위한〈datalist〉태그 = 412 
무작정 따라하기|브라우저별 최신〈input〉타입 지원 여부 확인하기 = 414 
무작정 따라하기|CSS3를 적용하여 회원가입 폼 업그레이드하기 = 417 
무작정 따라하기|CSS3를 사용하여 버튼 스타일 변경하기 = 422 
여섯째마당 : 이미지와 멀티미디어 사용하기 
01 이미지 사용하기 = 428 
1. 이미지 파일의 종류 = 429 
2. 이미지 파일 삽입하기 = 430 
이미지 경로 지정하기 = 431 
이미지 크기 지정하기 = 431 
대체 텍스트 지정하기 = 431 
풍선 도움말 설정하기 = 433 
무작정 따라하기|다른 사이트의 이미지 파일 삽입하기 = 435 
02 CSS3로 이미지 다루기 = 440 
1. 다양한 이미지 효과 적용하기 = 441 
그림자 효과 적용하기 = 441 
둥근 모서리 효과 적용하기 = 443 
반사 효과 적용하기 = 444 
필터 효과 적용하기 = 445 
2. 이미지 변형하 = 449 
이미지 회전하기 = 449 
이미지확대/축소하기 = 450 
이미지 기울이기 = 451 
이미지 이동하기스 = 452 
3. 이미지 전환하기 = 455 
전환 효과 속성 설정하기 = 455 
전환 효과 지속 시간 설정하기 = 456 
전환 효과 가속 속성 설정하기 = 456 
전환 효과 대기시간 설정하기 = 457 
무작정 따라하기|이미지를 회전하여 사진 앨범 꾸미기 = 460 
무작정 따라하기|메뉴에 마우스를 올렸을 때 변환/전환 효과 적용하기 = 465 
03 멀티미디어 활용하기 = 469 
1. 멀티미디어 파일의 종류 = 470 
비디오 파일 = 470 
오디오 파일 = 471 
HTML5에서 지원 가능한 포맷 = 472 
2. HTML5에서 동영상 파일 삽입하기 = 472 
파일 경로 설정하기 = 473 
컨트롤 버튼 삽입하기 = 473 
자동으로 재생 시작하기 = 473 
동영상 파일 미리 다운로드하기 = 474 
그 밖의 속성 = 474 
3. HTML5에서 오디오 파일 삽입하기 = 476 
파일 경로 설정하기 = 477 
컨트롤 버튼 삽입하기 = 477 
자동으로 재생하기 = 477 
동영상 파일 미리 다운로드하기 = 477 
반복 재생하기 = 478 
4. 여러 개의 동영상과 음악 형식 지정하기 = 480 
5. HTML5에서 지원하지 않는 멀티미디어 파일 재생하기 = 483 
멀티미디어 삽입하기 = 483 
멀티미디어 컨트롤하기 = 484 
무작정 따라하기|유튜브에서 동영상 가져오기 = 487 
무작정 따라하기|CSS3를 사용하여 플레이어 꾸미기 = 491 
부록 : 코드미리보기 = 495

관련분야 신착자료