Hello Coding HTML5+CSS3 (워드보다 쉬운 웹사이트 만들기)

황재호

경희대학교전자공학과를졸업하고동대학원에서석ㆍ박사를취득했다.KT연구개발본부에서연구원으로근무하며MPEG-2비디오코덱시스템의소프트웨어와하드웨어를개발하였다.경희대학교컴퓨터공학과등에서C++네트워크프로그래밍,자바프로그래밍,HTML/CSS,PHP,자바스크립트등을강의하였다.현재는수원여자대학교예술학부에서UX/UI디자인과프로그래밍등을강의하고있다.
최근에는코딩스쿨사이트(http://codingschool.info)를운영하고관련서적을집필하며비전공입문자들을위한코딩교육에힘쓰고있다.

Part1HTML기본기다지기
chapter1HTML이란?
--HTML과CSS는웹사이트를꾸미는뼈대와살입니다.이제뼈대를만들준비를해볼까요?
_01HTML과웹브라우저알아보기
__02실습준비하기
__03HTML문서구조이해하기
__04CSS맛보기
__요점정리

chapter2글자관련태그를익혀보자
문단을나누고글자에색칠하고힘을줘볼까요?
__01글제목만들기
__02단락나누기?
__03글자두껍게하기
__04줄바꿈과공백삽입하기
__05목록만들기
__06HTML문서에설명글달기
__프로젝트1:간단한로제파스타만들기
__요점정리

chapter3멀티미디어와링크에대해알아보자
이제웹사이트에동영상과그림,음악을추가해봅시다.
__01이미지삽입하기
__02태그의속성알아보기
__03오디오삽입하기
__04비디오삽입하기
__05링크걸기__프로젝트2:이미지,소리,비디오보여주기
__요점정리

chapter4테이블과폼양식을만들어보자
스케줄표를만들어보고싶어요.
__01테이블삽입하기
__02테이블의행과열합치기
__프로젝트3:태풍정보
__03폼양식이란?
__04텍스트와비밀번호입력창만들기
__05라디오버튼과체크박스만들기
__06파일선택창만들기
__07선택박스만들기
__08다중입력창만들기
__09버튼만들기
__프로젝트4:문의게시판글쓰기
__요점정리91

Part2CSS기초와응용
chapter5CSS기본을다지자
드디어CSS입니다.이제부터웹사이트에살을붙일겁니다.
__01CSS란?
__02글자스타일지정하기
__03목록스타일지정하기
__04CSS에설명글달기
__프로젝트5:루바토펜션안내
__요점정리

chapter6CSS선택자에대해알아보자
꾸며주려는영역을선택하는방법을알아봅시다.
__01CSS선택자란?
__02태그선택자
__03id선택자
__04클래스선택자
__프로젝트6:양평국제기타페스티벌
__요점정리

chapter7레이아웃의기초,박스모델을이해하자
대체웹사이트는어떤식으로구성될까요?레이아웃의기초를익혀꾸며봅시다.
__01박스모델이란?
__02경계선그리기
__03패딩과마진설정하기
__04패딩과마진초기화하기
__프로젝트7:주말야간개장안내
__요점정리

chapter8배경색상과이미지를설정해보자
웹사이트의배경을꾸며볼까요?저는꽃무늬벽지를넣고싶어요.
__01배경색상설정하기
__02배경이미지삽입하기
__03배경이미지반복설정하기
__프로젝트8:봄맞이세일
__요점정리

chapter9테이블을꾸며보자
4장에서만들었던표도조금더보기좋게만들어봅시다.
__01테이블경계선그리기
__02테이블너비지정과텍스트정렬하기
__03테이블배경색상지정하기
__프로젝트9:일정(스케줄)표
__요점정리

Part3레이아웃과포토강좌페이지제작하기
chapter10레이아웃의기초를다지자
이제준비가됐습니다.드디어나만의레이아웃을만들어봅시다.
__01레이아웃이란?
__02display속성
__03float속성
__04clear속성
__프로젝트10:판매도서목록
__요점정리

chapter11웹페이지레이아웃에대해알아보자
10장에서만든레이아웃을조금더다듬어볼까요?
__01HTML5의레이아웃태그
__02전체웹페이지레이아웃
__03상단헤더와내비게이션메뉴레이아웃
__04콘텐츠영역과사이드바레이아웃
__05하단푸터레이아웃
__06전체웹페이지레이아웃완성하기
__요점정리

chapter12포토아카데미페이지를만들어보자
지금까지배운내용을기반으로드디어완성된페이지를만들거에요.
__01실습용포토아카데미페이지소개
__02웹페이지기본틀만들기
__03상단헤더만들기
__04메인이미지만들기
__05서브메뉴와메인콘텐츠만들기
__06하단푸터만들기
__07소스정리하여완성하기
__요점정리

프로그래밍이처음인가요?배운적은있지만,재미를느끼지못했다고요?그래서시리즈를준비했습니다!이시리즈의목표는‘쉽고’,‘재미있게’,‘끝까지’책을읽는데있습니다.이책한권으로프로그래밍의고수가될수는없겠지만,프로그래밍의재미는확실하게느낄수있을겁니다.

-초보자를위한헬로코딩카페(http://cafe.naver.com/codinghello)
혼자서책을공부하다가도저히모를때는헬로코딩카페에놀러오세요.친절하게답해드리겠습니다.
?http://cafe.naver.com/codinghello

-당장컴퓨터가없어도괜찮아요
프로그래밍책은지하철에서,버스에서읽을수없다고요?실습할수없는환경에있더라도,염려하지마세요!코드와실행화면을바로바로매칭해서책만으로도학습이가능합니다.

-꼭꼭씹어서내것으로만드는4단계반복학습
이론+짧은퀴즈+프로젝트완성,요점정리,이4단계를통해서책의내용을확실하게익힐수있습니다.책을다읽어가는데기억이안난다고요?그래서마지막장에는종합프로젝트를준비했습니다.

-10개의프로젝트
이론은배웠지만,어떻게써야할지모른다고요?각장의마지막에는프로젝트가있어이번에배운내용이어디에어떤식으로사용하는지바로바로확인할수있습니다.

[관련서적]
-『모던웹디자인을위한HTML5+CSS3입문,개정판』(한빛미디어,2015)
-『HTML5+CSS3정복:실습위주의친절한HTML5자습서』(한빛미디어,2014)
-『인터랙티브웹디자인북:웹디자이너를위한HTML5+CSS3+jQuery사용설명서』(한빛미디어,2015)
-『모던웹을위한JavaScript+jQuery입문(3판)』(한빛미디어,2017)
-『JavaScript+jQuery정복:보고,이해하고,바로쓰는자바스크립트공략집』(한빛미디어,2014)