Do it! 인터랙티브 웹 페이지 만들기

최성일

성균관대학교예술학부에서서피스디자인을전공하고,웹디자이너와웹퍼블리셔그리고프런트엔드개발자를거쳐현재는리액트네이티브를활용한프로그레시브앱개발과비전공자를위한IT국비취업교육기관을운영하고있다.저자가그러했듯이비전공자도누구나쉽게웹개발을시작할수있다고믿으며,블로그를통해UI디자인,웹개발에관한무료동영상과프런트엔드웹개발관련정보를제공하고있다.저자가진행한주요프로젝트로대한주택보증,교육과정평가원,안산예술의전당,한국의집,쌍용자동차,외교부독도사이트등이있다.

[필수문법]
HTML,CSS,자바스크립트
한번에끝내기
-----------------
01장웹페이지제작준비하기
__01-1웹페이지를만들기전에
____인터랙티브UI/UX
____UI/UX작업방식의변화와코딩의중요성
____비전공자와디자이너도코딩을할수있는이유
____HTML,CSS,자바스크립트의역할
__01-2웹브라우저와웹에디터
____웹브라우저설치하기
____웹에디터설치하기
____비주얼스튜디오코드설치하기
__01-3제작속도를2배높여줄작업도구
____[Doit!]비주얼스튜디오코드의확장기능설치하기
__01-4웹페이지의필수재료
____[Doit!]기본폴더와HTML파일만들기

02장HTML기본문법빠르게끝내기
__02-1HTML파일둘러보기
____태그란
____부모태그와자식태그
____HTML의기본구조
____[Doit!]에디터에서HTML파일수정하기
__02-2시맨틱태그-웹페이지구조나누기
__02-3서식태그-텍스트를넣어웹페이지채우기
____〈h1〉~〈h6〉-문서의제목지정하기
____〈p〉-문단지정하기
____〈div〉-콘텐츠그룹화하기
____〈strong〉,〈em〉-특정단어강조하기
____〈a〉-웹페이지에링크연결하기
____〈span〉-인라인요소태그그룹화하기
____〈img〉-문서에이미지삽입하기
____〈br〉-강제줄바꿈구현하기
__02-4목록태그-메뉴를깔끔하게정리하기
____〈ul〉-순서가없는목록만들기
____〈ol〉-순서가있는목록만들기
____〈dl〉,〈dt〉,〈dd〉-정의형목록만들기
____[Doit!]중첩된목록작성하기
__02-5폼태그-사용자정보입력받기
____〈input〉-다양한정보입력받기
____〈select〉-드롭다운메뉴로항목선택하기
____〈textarea〉-텍스트를여러줄입력받기
____〈form〉-여러입력양식을그룹화하고전송하기
__02-6비디오·오디오태그-멀티미디어콘텐츠삽입하기
____〈audio〉-오디오파일재생하기
____〈video〉-동영상파일재생하기

03장CSS기본문법빠르게끝내기
__03-1HTML에CSS연결하기
____[Doit!]HTML파일에외부CSS파일연결하기
__03-2CSS로HTML요소다양하게선택하기
____전체선택자-모든HTML요소를한꺼번에선택하기
____태그선택자-태그명을이용하여선택하기
____자손선택자-자식과하위요소를모두선택하기
____자식선택자-직계자식요소만선택하기
____그룹선택자-여러개의요소를그룹으로선택하기
____순서선택자-형제요소의순서를이용하여선택하기
____수열선택자-수식을이용하여선택하기
____마지막요소선택자-형제요소중마지막요소를선택하기
____홀수,짝수선택자-홀수또는짝수요소를선택하기
____속성선택자-속성값을이용하여선택하기
____가상선택자-가상의요소를선택하기
____클래스선택자-클래스명으로요소를선택하기
____아이디선택자-아이디명으로요소를선택하기
__03-3폰트스타일링하기
____폰트굵기바꾸기
____폰트크기바꾸기
____폰트모양바꾸기
____[Doit!]구글웹폰트사용하기
____[Doit!]웹폰트아이콘적용하기
____폰트색상바꾸기
____텍스트줄간격바꾸기
____텍스트정렬방향지정하기
____텍스트자간지정하기
__03-4웹페이지에서영역별크기정하기
____너비와높이지정하기
____바깥쪽여백지정하기
____안쪽여백지정하기
____기존박스크기를유지하면서안쪽여백지정하기
____테두리의형태지정하기
____블록요소와인라인요소태그
03-5웹페이지의배경꾸미기
____배경색지정하기
____배경이미지삽입하기
____배경이미지크기조절하기
____[Doit!]두배경이미지를웹브라우저에고정하기
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벡터이미지파일제어하기
____비트맵이미지와벡터이미지의차이
____[Doit!]SVG파일을웹브라우저에출력하기
____[Doit!]SVG의path스타일변경하기
____패스의stroke-dasharray와stroke-dashoffset속성이해하기
____마우스포인터를올리면선이그려지는모션만들기
__04-5화면너비에따라웹페이지디자인변경하기
____[Doit!]미디어쿼리를사용하여배경색바꾸기

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자바스크립트시작하기
____[Doit!]HTML과자바스크립트연결하기
__06-2자바스크립트로HTML요소선택하기
____document.querySelector()-요소선택하기
____document.querySelectorAll()-요소를모두선택하기
____[Doit!]부모,자식,형제요소선택하기
__06-3자바스크립트로스타일제어하기
__06-4자바스크립트로이벤트연결하기
____클릭이벤트연결하기
____호버이벤트연결하기
____반복되는요소에이벤트한꺼번에연결하기
____클릭이벤트가발생할때숫자를증가,감소하기
____문자안에변수삽입하기
____[Doit!]클릭하면좌우로회전하는박스만들기
__06-5자바스크립트로클래스제어하기
__06-6함수를활용하여코드패키징하기
____함수정의및호출로기능재활용하기
____[Doit!]활성화기능함수정의하고사용하기
__06-7HTML요소의속성값제어하기
____속성값알아내기
____속성값변경하기
__06-8자바스크립트로사용자브라우저판단하기


-----------------
[실전예제]
실무에서바로쓰는
포트폴리오완성하기
-----------------
07장온라인프로필카드제작하기

08장기업형웹페이지제작하기

09장마을애니메이션제작하기

10장파노라마회사소개페이지제작하기

11장flex기반동영상웹페이지제작하기

12장뮤직플레이어제작하기

13장핀터레스트스타일의반응형웹갤러리제작하기

[스페셜]깃허브페이지에작업물배포하기

찾아보기

[PDF책]스와이프갤러리제작하기

“아무것도모르는비전공자도웹개발자가될수있나요?”
“물론이죠!저도그랬거든요.”
--------------------------
비전공자였지만프런트엔드웹개발자가된저자는비전공자나코딩왕초보에게는결과물부터만들면서이론을배우는것이효과적이라고말한다.그래서이책은비전공자눈높이에맞춰서최소한의문법만활용하여다양한결과물을계속해서만들수있도록구성했다.또한초보자가헷갈릴수있는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,자바스크립트공부를한번에끝낼수있다.

--------------------------
함께배우고,나누고,성장하는
‘Doit!스터디룸’에서만나요!
--------------------------
혼자공부하다가궁금한내용이생기거나,혹시나공부를포기하고싶을때는‘Doit!스터디룸’카페에접속해보자.이책을공부하는다른독자를만나서로도움을주고받으면더훌륭한개발자로성장할수있다.스터디를통해성장하는뿌듯함을느낄뿐아니라이책을끝까지포기하지않고마칠수있어서더욱좋다.
[Doit!스터디룸:cafe.naver.com/doitstudyroom]

★이책의대상독자★
-프런트엔드웹페이지를클론코딩하고싶은대학생
-화려한웹포트폴리오가필요한웹디자이너
-최신인터랙티브웹을다루고싶은웹퍼블리셔
-프런트엔드영역을제대로배우고싶은웹개발자
-웹사이트창업을준비하는CEO

▶추천평
웹의기본부터실무까지!신입퍼블리셔에게강추!
처음웹퍼블리싱을배울때‘내가정말웹페이지를제작할수있을까?’걱정했습니다.특히문법을배울때가장스트레스받았던것같습니다.조금이라도복잡한문법이나오면무작정외웠습니다.혹시이런경험을한사람이있다면『Doit!인터랙티브웹페이지만들기』를추천하고싶습니다.이책은코딩왕초보자도이해하기쉽게설명해서기본부터탄탄하게다질수있고,책에나온예제를직접만들다보면문법을더확실하게이해하고활용할수있으니까요.HTML,CSS,그리고자바스크립트까지웹페이지를만들때필요한문법을한권으로끝내고싶은사람,코딩을시작하고싶지만어려울까봐망설이는비전공자,저와같은신입퍼블리셔에게강력추천하는책입니다.
2년차웹에이전시신입사원ㆍ김지수

10년차편집디자이너에서웹퍼블리셔로커리어전환을도와준책!
10년동안일했던편집디자인을잠시중단하고,새롭게웹퍼블리셔공부를하다가『Doit!인터랙티브웹페이지만들기』를만났습니다.문법보다실무감각을먼저익히고싶었던저에게는이책이‘딱!’이었습니다.책에서소개하는대로화려한웹사이트포트폴리오를만들때마다마치그림의퍼즐조각이제자리를찾아서완성되는짜릿한성취감을맛볼수있었습니다.작은도전에서시작한웹퍼블리셔의꿈을이책덕분에더빠르게이룰수있을것같습니다.웹퍼블리셔를꿈꾸는많은사람이이책을읽고자신의목표에한발자국더가까이다가갈수있기를바랍니다.
편집디자이너에서웹퍼블리셔로다시시작하는도전자ㆍ양희영

어디에내놓아도손색없는결과물을만들수있는책!
비전공자이다보니HTML단어조차몰라서웹에서검색하며공부를시작했습니다.어마어마한시간이들었죠.하지만이책을만나고검색하는시간이줄어들었습니다!아무것도모르고맨땅에헤딩하는식으로공부하던때와달리웹페이지를만드는데꼭필요한것부터설명하니,그동안궁금했던것들이시원하게해결되는느낌이었습니다.특히실전예제는어디에내놓아도손색없는훌륭한포트폴리오로활용할수있어서정말좋았습니다.웹개발이처음이거나비전공자라면고민하지말고이책을잡으세요.지금까지경험해보지못한웹의세계로향하는문이활짝열릴것입니다.
시각디자인을전공하고웹개발자를꿈꾸는취준생ㆍ오지연