이미 소장하고 있다면 판매해 보세요.
- 국내배송만 가능
- 문화비소득공제 가능
이 분야의 이벤트
관련 상품
이지스퍼블리싱-Do it! 시리즈
이 상품의 시리즈 알림신청
이 상품의 태그
상세 이미지
책소개
관련 동영상
목차
|
-----------------
[필수 문법] HTML, CSS, 자바스크립트 한 번에 끝내기 ----------------- 01장 웹 페이지 제작 준비하기 __01-1 웹 페이지를 만들기 전에 ____인터랙티브 UI/UX ____UI/UX 작업 방식의 변화와 코딩의 중요성 ____비전공자와 디자이너도 코딩을 할 수 있는 이유 ____HTML, CSS, 자바스크립트의 역할 __01-2 웹 브라우저와 웹 에디터 ____웹 브라우저 설치하기 ____웹 에디터 설치하기 ____비주얼 스튜디오 코드 설치하기 __01-3 제작 속도를 2배 높여 줄 작업 도구 ____[Do it!] 비주얼 스튜디오 코드의 확장 기능 설치하기 __01-4 웹 페이지의 필수 재료 ____[Do it!] 기본 폴더와 HTML 파일 만들기 02장 HTML 기본 문법 빠르게 끝내기 __02-1 HTML 파일 둘러보기 ____태그란 ____부모 태그와 자식 태그 ____HTML의 기본 구조 ____[Do it!] 에디터에서 HTML 파일 수정하기 __02-2 시맨틱 태그 ? 웹 페이지 구조 나누기 __02-3 서식 태그 ― 텍스트를 넣어 웹 페이지 채우기 ____〈h1〉~〈h6〉 ― 문서의 제목 지정하기 ____〈p〉 ― 문단 지정하기 ____〈div〉 ― 콘텐츠 그룹화하기 ____〈strong〉, 〈em〉 ― 특정 단어 강조하기 ____〈a〉 ― 웹 페이지에 링크 연결하기 ____〈span〉 ― 인라인 요소 태그 그룹화하기 ____〈img〉 ― 문서에 이미지 삽입하기 ____〈br〉 ― 강제 줄 바꿈 구현하기 __02-4 목록 태그 ― 메뉴를 깔끔하게 정리하기 ____〈ul〉 ― 순서가 없는 목록 만들기 ____〈ol〉 ― 순서가 있는 목록 만들기 ____〈dl〉, 〈dt〉, 〈dd〉 ― 정의형 목록 만들기 ____[Do it!] 중첩된 목록 작성하기 __02-5 폼 태그 ― 사용자 정보 입력받기 ____〈input〉 ― 다양한 정보 입력받기 ____〈select〉 ― 드롭다운 메뉴로 항목 선택하기 ____〈textarea〉 ― 텍스트를 여러 줄 입력받기 ____〈form〉 ― 여러 입력 양식을 그룹화하고 전송하기 __02-6 비디오·오디오 태그 ― 멀티미디어 콘텐츠 삽입하기 ____〈audio〉 ― 오디오 파일 재생하기 ____〈video〉 ― 동영상 파일 재생하기 03장 CSS 기본 문법 빠르게 끝내기 __03-1 HTML에 CSS 연결하기 ____[Do it!] HTML 파일에 외부 CSS 파일 연결하기 __03-2 CSS로 HTML 요소 다양하게 선택하기 ____전체 선택자 ― 모든 HTML 요소를 한꺼번에 선택하기 ____태그 선택자 ― 태그명을 이용하여 선택하기 ____자손 선택자 ― 자식과 하위 요소를 모두 선택하기 ____자식 선택자 ― 직계 자식 요소만 선택하기 ____그룹 선택자 ― 여러 개의 요소를 그룹으로 선택하기 ____순서 선택자 ― 형제 요소의 순서를 이용하여 선택하기 ____수열 선택자 ― 수식을 이용하여 선택하기 ____마지막 요소 선택자 ― 형제 요소 중 마지막 요소를 선택하기 ____홀수, 짝수 선택자 ― 홀수 또는 짝수 요소를 선택하기 ____속성 선택자 ― 속성값을 이용하여 선택하기 ____가상 선택자 ― 가상의 요소를 선택하기 ____클래스 선택자 ― 클래스명으로 요소를 선택하기 ____아이디 선택자 ― 아이디명으로 요소를 선택하기 __03-3 폰트 스타일링하기 ____폰트 굵기 바꾸기 ____폰트 크기 바꾸기 ____폰트 모양 바꾸기 ____[Do it!] 구글 웹 폰트 사용하기 ____[Do it!] 웹 폰트 아이콘 적용하기 ____폰트 색상 바꾸기 ____텍스트 줄 간격 바꾸기 ____텍스트 정렬 방향 지정하기 ____텍스트 자간 지정하기 __03-4 웹 페이지에서 영역별 크기 정하기 ____너비와 높이 지정하기 ____바깥쪽 여백 지정하기 ____안쪽 여백 지정하기 ____기존 박스 크기를 유지하면서 안쪽 여백 지정하기 ____테두리의 형태 지정하기 ____블록 요소와 인라인 요소 태그 03-5 웹 페이지의 배경 꾸미기 ____배경색 지정하기 ____배경 이미지 삽입하기 ____배경 이미지 크기 조절하기 ____[Do it!] 두 배경 이미지를 웹 브라우저에 고정하기 03-6 웹 페이지의 레이아웃 구성하기 ____CSS 초기화하기 ____float ― 블록 요소 좌우로 배치하기 ____position ― 요소를 자유롭게 배치하기 ____object-fit ― 콘텐츠를 특정 영역에 채우기 ____z-index ― 겹쳐 있는 요소의 z축 순서 지정하기 ____opacity ― 요소의 투명도 설정하기 __03-7 다양한 그래픽 효과 적용하기 ____box-shadow, text-shadow ― 요소의 그림자 만들기 ____border-radius ― 모서리를 둥글게 만들기 ____linear-gradient, radial-gradient ― 그레이디언트 적용하기 ____filter ― 특수 효과 사용하기 04장 인터랙티브 웹을 위한 CSS 다루기 __04-1 콘텐츠 모양을 자유롭게 변형하기 __04-2 사용자 행동에 반응하는 전환 효과 만들기 __04-3 자동으로 움직이는 애니메이션 효과 만들기 __04-4 벡터 이미지 파일 제어하기 ____비트맵 이미지와 벡터 이미지의 차이 ____[Do it!] SVG 파일을 웹 브라우저에 출력하기 ____[Do it!] SVG의 path 스타일 변경하기 ____패스의 stroke-dasharray와 stroke-dashoffset 속성 이해하기 ____마우스 포인터를 올리면 선이 그려지는 모션 만들기 __04-5 화면 너비에 따라 웹 페이지 디자인 변경하기 ____[Do it!] 미디어 쿼리를 사용하여 배경색 바꾸기 05장 flex 방식으로 레이아웃 만들기 __05-1 부모 요소에 flex 적용하기 ____display ― 자식 요소의 배치 방법 지정하기 ____flex-direction ― 자식 요소의 정렬 방향 변경하기 ____flex-wrap ― 자식 요소에 줄 바꿈 적용하기 ____flex-flow ― flex-direction, flex-wrap 속성을 한꺼번에 적용하기 05-2 자식 요소 정렬하기 ____justify-content ― 기본 축으로 정렬하기 ____align-content, align-items ― 반대 축으로 정렬하기 05-3 자식 요소의 순서 지정하기 05-4 요소의 여백 비율 지정하기 ____flex-grow ― 요소의 안쪽 여백 확대하기 ____flex-shirink ― 요소의 안쪽 여백 축소하기 ____flex ― 전체 너빗값의 비율 조절하기 06장 자바스크립트로 웹 페이지 제어하기 __06-1 자바스크립트 시작하기 ____[Do it!] HTML과 자바스크립트 연결하기 __06-2 자바스크립트로 HTML 요소 선택하기 ____document.querySelector( ) ― 요소 선택하기 ____document.querySelectorAll( ) ― 요소를 모두 선택하기 ____[Do it!] 부모, 자식, 형제 요소 선택하기 __06-3 자바스크립트로 스타일 제어하기 __06-4 자바스크립트로 이벤트 연결하기 ____클릭 이벤트 연결하기 ____호버 이벤트 연결하기 ____반복되는 요소에 이벤트 한꺼번에 연결하기 ____클릭 이벤트가 발생할 때 숫자를 증가, 감소하기 ____문자 안에 변수 삽입하기 ____[Do it!] 클릭하면 좌우로 회전하는 박스 만들기 __06-5 자바스크립트로 클래스 제어하기 __06-6 함수를 활용하여 코드 패키징하기 ____함수 정의 및 호출로 기능 재활용하기 ____[Do it!] 활성화 기능 함수 정의하고 사용하기 __06-7 HTML 요소의 속성값 제어하기 ____속성값 알아내기 ____속성값 변경하기 __06-8 자바스크립트로 사용자 브라우저 판단하기 ----------------- [실전 예제] 실무에서 바로 쓰는 포트폴리오 완성하기 ----------------- 07장 온라인 프로필 카드 제작하기 08장 기업형 웹 페이지 제작하기 09장 마을 애니메이션 제작하기 10장 파노라마 회사 소개 페이지 제작하기 11장 flex 기반 동영상 웹 페이지 제작하기 12장 뮤직 플레이어 제작하기 13장 핀터레스트 스타일의 반응형 웹 갤러리 제작하기 [스페셜] 깃허브 페이지에 작업물 배포하기 찾아보기 [PDF 책] 스와이프 갤러리 제작하기 |
저자 소개 1
성균관대학교 예술학부에서 서피스 디자인을 전공하고, 웹디자이너와 웹 퍼블리셔 그리고 프런트엔드 개발자를 거쳐 현재는 리액트 네이티브를 활용한 프로그레시브 앱 개발과 비전공자를 위한 IT 국비 취업 교육 기관을 운영하고 있다. 저자가 그러했듯이 비전공자도 누구나 쉽게 웹 개발을 시작할 수 있다고 믿으며, 블로그를 통해 UI 디자인, 웹 개발에 관한 무료 동영상과 프런트엔드 웹 개발 관련 정보를 제공하고 있다. 저자가 진행한 주요 프로젝트로 대한주택보증, 교육과정평가원, 안산 예술의전당, 한국의집, 쌍용자동차, 외교부 독도 사이트 등이 있다.
관련 분류
품목정보
- 발행일
- 2021년 08월 23일
- 쪽수, 무게, 크기
- 480쪽 | 188*257*30mm
- ISBN13
- 9791163032823
출판사 리뷰
|
--------------------------
이 책에 나온 HTML, CSS, 자바스크립트만 알아도 충분하다! 비전공자도 만드는 최신 프런트엔드 웹 사이트 8가지! -------------------------- 최신 프런트엔드 웹 디자인은 물론 인터랙티브 웹 사이트 8개를 한 번에 완성할 수 있는 책이 나왔다! 베테랑 웹 디자이너이자 프런트엔드 개발자인 저자가 HTML, CSS, 자바스크립트만으로 누구나 화려한 웹 사이트를 만들 수 있게 알려 준다. 또한 실무에서 잘 쓰지 않는 기본 문법을 모두 배우느라 지치지 않게, 실전 예제에 꼭 필요한 웹 표준 문법만 간추려서 빠르고 쉽게 익힐 수 있도록 도와준다. 이 책에서 제공하는 8가지 프런트엔드 웹 사이트는 현업에서 최신 트렌드로 자리 잡은 인터랙티브 웹 포트폴리오를 만들 수 있게 구성했다. 완성된 웹 사이트를 직접 클론 코딩하면서 실력을 높이고, 덤으로 나만의 웹 포트폴리오를 가질 수 있는 기회를 놓치지 말자. 웹의 기초가 필요한 비전공자부터 화려한 디자인이 필요한 웹 디자이너, 최신 웹 기술을 반영하려는 웹 퍼블리셔까지 프런트엔드 기술이 필요한 사람이라면 꼭 읽어야 할 책이다. ★ 이 책에서 만드는 포트폴리오 8가지! 1. 온라인 프로필 카드 웹 페이지 2. 기업형 기본 웹 페이지 3. 밤낮이 바뀌는 마을 애니메이션 페이지 4. 306도 회전하는 파노라마 회사 소개 페이지 5. FLEX 레이아웃 기반의 동영상 웹 페이지 6. 자동으로 음악이 나오는 뮤직 플레이어 7. 핀터레스트 스타일의 반응형 웹 갤러리 8. 웹 플러그인을 사용한 스와이프 갤러리(무료 전자책 제공) -------------------------- “아무것도 모르는 비전공자도 웹 개발자가 될 수 있나요?” “물론이죠! 저도 그랬거든요.” -------------------------- 비전공자였지만 프런트엔드 웹 개발자가 된 저자는 비전공자나 코딩 왕초보에게는 결과물부터 만들면서 이론을 배우는 것이 효과적이라고 말한다. 그래서 이 책은 비전공자 눈높이에 맞춰서 최소한의 문법만 활용하여 다양한 결과물을 계속해서 만들 수 있도록 구성했다. 또한 초보자가 헷갈릴 수 있는 CSS 선택자, 플렉스 레이아웃, 미디어 쿼리, 반응형 웹, 자바스크립트 함수 등의 내용도 쉽게 이해할 수 있도록 정리했다. 이 모든 과정을 마치면 HTML5, CSS3, ES6의 최신 웹 표준 기술을 완벽하게 익히고, 인터랙티브 웹 사이트 하나쯤은 거뜬히 만들 수 있는 웹 개발자가 될 수 있다. -------------------------- 현직 웹 디자이너의 진짜 포트폴리오를 클론 코딩하면서 내 것으로 만든다! -------------------------- 이 책에서 제공하는 8가지 포트폴리오는 사용자의 시선을 사로잡아 상호 작용할 수 있는 ‘인터랙티브 웹’ 기술을 적용해 만들었다. 동영상, 음악 플레이어는 물론 사용자가 이미지를 스와이프하거나 3D 화면을 제어하는 등의 화려한 사이트를 만들 수 있어 취업이나 과제의 포트폴리오로 활용하기에 좋다. 또한 현업에서 사용하는 웹 문법과 최신 웹 기술까지 모두 다뤘으니 실무 능력을 키우면서 포트폴리오도 완성하는 일석이조의 효과를 얻어 보자. -------------------------- [필수 문법]과 [실전 예제] 중 골라서 공부하자! 현업 개발자라면 포트폴리오 사이트부터 시작! -------------------------- 이 책의 1~6장은 [필수 문법], 7~13장은 [실전 예제] 파트로 구성했다. 초보자라면 1장부터 차근차근 공부하면 된다. 그러나 웹 문법을 공부한 적이 있다면 7~13장부터 읽어도 좋다. 웹 사이트를 만드는 데 필요한 HTML, CSS, 자바스크립트는 필수 문법 파트에 모두 담겨 있다. 코딩을 하다가 기초 문법이 궁금해지면 이 책에서 안내하는 대로 필수 문법 파트로 돌아가 공부해 보자. 이렇게 문법과 실전 예제를 같이 공부하다 보면 어느새 탄탄한 기본기와 수준 높은 코딩 실력을 겸비할 수 있을 것이다. -------------------------- 마지막 포트폴리오 「스와이프 갤러리」 온라인 무료 전자책으로 공개! -------------------------- 독자에게 웹 사이트 제작 경험을 더욱 풍부하게 제공하기 위해 원래 7개였던 포트폴리오에 하나를 추가했다! 이 8번째 포트폴리오는 누구나 쉽게 체험해 볼 수 있도록 무료 전자책으로 제공한다. 총 30쪽 분량으로 간단하면서도 업계에서 필수로 사용하는 스와이프 모션과 플러그인 기능을 담아 웹 갤러리 페이지를 완성할 수 있게 만들었다. 책을 받기 전 미리 예습한다는 마음으로 읽어도 좋고, 완독 후에 복습하는 자세로 읽으면 학습 효과를 배로 얻을 수 있다. [전자책 파일 다운로드: 이지스퍼블리싱 홈페이지 www.easyspub.co.kr → 자료실]에서 도서명 검색 후 내려받기 -------------------------- 대학, 학원 강의에 최적화된 교재! 모든 예제 소스 파일 무료 제공! -------------------------- 16주 차로 강의 계획을 세워서 이론 시간에는 [필수 문법] 파트를, 실습 시간에는 [실전 예제] 파트를 진행할 수 있으니 학원이나 대학 교재로도 적합하다. 그리고 책에서 다루는 모든 예제 파일은 [이지스퍼블리싱 홈페이지 → 자료실]에서 무료로 내려받을 수 있다. 예제를 하나하나 직접 입력해 보는 것도 좋고, 소스 파일을 내려받은 후 완성 예제를 실행해 결과 화면을 보면서 익히는 것도 좋다. [예제 파일 다운로드: 이지스퍼블리싱 홈페이지 www.easyspub.co.kr → 자료실]에서 도서명 검색 후 내려받기 -------------------------- 1:1 과외를 받는 듯한 저자 직강 동영상 무료 제공! -------------------------- 베테랑 웹 디자이너 & 개발자이자 IT 전문 교육원을 운영하는 최성일 저자의 직강 동영상을 무료로 제공한다. 영상과 책을 같이 본다면 중간에 포기하지 않고 끝까지 쉽게 공부할 수 있다. 웹 개발을 독학하는 사람도, 학교에서 공부한 내용을 복습하고 싶은 사람도 꼭 필요한 동영상 강의를 놓치지 말고 활용하자. -------------------------- 최신 HTML5, CSS3, ES6 문법을 배우는 데 필요한 시간은 딱 10일! 10일 집중 코스, 20일 정석 코스 안내! -------------------------- 무엇이든 목표가 있으면 더 힘차게 달릴 수 있다! 이 책에서는 웹을 정복하고 싶어 하는 독자를 위해 ‘학습 계획표’를 제공한다. 코딩 왕초보라면 [20일 정석 코스]로 기초부터 실전 예제까지 하나씩 차근차근 배우고, 핵심만 빠르게 공부하고 싶은 독자라면 [15일 집중 코스]에 도전해 보자. 자신이 세운 목표대로 학습 계획표에 직접 날짜를 적어 HTML, CSS, 자바스크립트 공부를 한 번에 끝낼 수 있다. -------------------------- 함께 배우고, 나누고, 성장하는 ‘Do it! 스터디룸’에서 만나요! -------------------------- 혼자 공부하다가 궁금한 내용이 생기거나, 혹시나 공부를 포기하고 싶을 때는 ‘Do it! 스터디룸’ 카페에 접속해 보자. 이 책을 공부하는 다른 독자를 만나 서로 도움을 주고받으면 더 훌륭한 개발자로 성장할 수 있다. 스터디를 통해 성장하는 뿌듯함을 느낄 뿐 아니라 이 책을 끝까지 포기하지 않고 마칠 수 있어서 더욱 좋다. [Do it! 스터디룸: cafe.naver.com/doitstudyroom] ★ 이 책의 대상 독자 ★ - 프런트엔드 웹 페이지를 클론 코딩하고 싶은 대학생 - 화려한 웹 포트폴리오가 필요한 웹 디자이너 - 최신 인터랙티브 웹을 다루고 싶은 웹 퍼블리셔 - 프런트엔드 영역을 제대로 배우고 싶은 웹 개발자 - 웹 사이트 창업을 준비하는 CEO ▶ 추천평 웹의 기본부터 실무까지! 신입 퍼블리셔에게 강추! 처음 웹 퍼블리싱을 배울 때 ‘내가 정말 웹 페이지를 제작할 수 있을까?’ 걱정했습니다. 특히 문법을 배울 때 가장 스트레스받았던 것 같습니다. 조금이라도 복잡한 문법이 나오면 무작정 외웠습니다. 혹시 이런 경험을 한 사람이 있다면 『Do it! 인터랙티브 웹 페이지 만들기』를 추천하고 싶습니다. 이 책은 코딩 왕초보자도 이해하기 쉽게 설명해서 기본부터 탄탄하게 다질 수 있고, 책에 나온 예제를 직접 만들다 보면 문법을 더 확실하게 이해하고 활용할 수 있으니까요. HTML, CSS, 그리고 자바스크립트까지 웹 페이지를 만들 때 필요한 문법을 한 권으로 끝내고 싶은 사람, 코딩을 시작하고 싶지만 어려울까 봐 망설이는 비전공자, 저와 같은 신입 퍼블리셔에게 강력 추천하는 책입니다. 2년 차 웹 에이전시 신입 사원 · 김지수 10년 차 편집 디자이너에서 웹 퍼블리셔로 커리어 전환을 도와준 책! 10년 동안 일했던 편집 디자인을 잠시 중단하고, 새롭게 웹 퍼블리셔 공부를 하다가 『Do it! 인터랙티브 웹 페이지 만들기』를 만났습니다. 문법보다 실무 감각을 먼저 익히고 싶었던 저에게는 이 책이 ‘딱!’이었습니다. 책에서 소개하는 대로 화려한 웹 사이트 포트폴리오를 만들 때마다 마치 그림의 퍼즐 조각이 제 자리를 찾아서 완성되는 짜릿한 성취감을 맛볼 수 있었습니다. 작은 도전에서 시작한 웹 퍼블리셔의 꿈을 이 책 덕분에 더 빠르게 이룰 수 있을 것 같습니다. 웹 퍼블리셔를 꿈꾸는 많은 사람이 이 책을 읽고 자신의 목표에 한 발자국 더 가까이 다가갈 수 있기를 바랍니다. 편집 디자이너에서 웹 퍼블리셔로 다시 시작하는 도전자 · 양희영 어디에 내놓아도 손색없는 결과물을 만들 수 있는 책! 비전공자이다 보니 HTML 단어조차 몰라서 웹에서 검색하며 공부를 시작했습니다. 어마어마한 시간이 들었죠. 하지만 이 책을 만나고 검색하는 시간이 줄어들었습니다! 아무것도 모르고 맨땅에 헤딩하는 식으로 공부하던 때와 달리 웹 페이지를 만드는 데 꼭 필요한 것부터 설명하니, 그동안 궁금했던 것들이 시원하게 해결되는 느낌이었습니다. 특히 실전 예제는 어디에 내놓아도 손색없는 훌륭한 포트폴리오로 활용할 수 있어서 정말 좋았습니다. 웹 개발이 처음이거나 비전공자라면 고민하지 말고 이 책을 잡으세요. 지금까지 경험해 보지 못한 웹의 세계로 향하는 문이 활짝 열릴 것입니다. 시각디자인을 전공하고 웹 개발자를 꿈꾸는 취준생 · 오지연 |
25,200원
총 1개
25,200원
