칼퇴족 김대리는 알고 나만 모르는 HTML5+CSS3

칼퇴족 김대리는 알고 나만 모르는 HTML5+CSS3

$21.00
Description
어렵고 지루한 설명은 그만!
사용도가 높은 HTML 태그와 CSS 속성을 짧고 쉽게 설명한 책!
웹 디자이너로 실무를 진행하던 저자는 퍼블리싱 업무를 진행하게 되면서 부딪힌 궁금증과 시행착오를 해결하기 위해 많은 책과 씨름했다. 하지만 어려운 용어와 내용으로 가득한 사전 같은 책은 보기에도 불편하고 과한 정보로 인해 지면 낭비인 경우가 많았으며 여기저기 서치해 찾아낸 자료도 하나를 해결하면 또 다른 질문이 생겨 진일보하지 못하는 상황이었다. 20여 년간 실무에 있으면서 많은 어려움을 스스로 해결해온 저자는 활용도 높은 책의 필요성을 절감해 경험과 연륜을 모아 이 책을 집필했다.
이 책은 개념과 용도를 설명하고 바로 이어 실습을 따라 해 기능을 익히게 했고, 색과 타이포그래피, 레이아웃 등 디자인에 필요한 내용을 다루어 감각적인 디자인도 가능하게 했다. 코딩 작업의 가독성을 높이는 설정을 하고 수시로 크롬 브라우저로 미리 보기 하니 작업능률도 높다.
기능을 모두 익히고 나면 실제로 웹사이트를 만들면서 실력을 발휘해보자! 천천히 따라 하면 누구든 원하는 웹 사이트를 만들 수 있을 것이다.
저자

김태광

시각디자인을전공하고홍익대학교디자인콘텐츠대학원에서광고디자인으로석사학위를받았으며20여년이상의실무경력이있다.1997년1세대웹디자이너로디자인을시작하여UIUX디자인과웹퍼블리셔로영역을확장했으며웹디자인기능사자격증을취득했다.
현재는대학에서학생들에게디자인을가르치고있다.

목차

CHAPTER01HTML과CSS준비하기
01.HTML,CSS개념알기
|01|웹브라우저(Webbrowser)

02.뭘준비하죠?
⦁웹브라우저의종류와점유율
⦁크롬(Chrome)브라우저설치하기
⦁개발자도구
실습_웹사이트[+더보기]에서HTML요소와CSS속성과속성값알아보기
실습_[개발자도구]로색과내용수정해보기
|01|편집기(Editors)
실습_비주얼스튜디오코드파일다운로드하기
실습_비주얼스튜디오코드설치하기
⦁비주얼스튜디오코드의인터페이스알아보기
⦁편리한확장기능사용하기
실습_영문메뉴를한글로교체하기
실습_HTML파일을실시간미리보기
⦁코딩속도를높이는기능설정하기

CHAPTER02HTML페이지만들기
01.태그(tag)가뭐죠?

02.요소(elements)가뭐죠?

03.HTML문서의기본구성
실습_[자동완성]기능을이용해HTML구조알아보기

04.속성(Attributes)
|01|href속성
|02|target속성
|03|src속성
|04|alt속성

05.요소(elements)의특징
|01|Blocklevel요소(elements)
|02|Inline요소(elements)

06.텍스트(Text)요소(elements)
|01|〈h1〉~〈h6〉제목태그(tags)
|02|문단〈p〉태그
|03|줄바꿈〈br〉태그
|04|특수코드문자(entity)
|05|문자강조태그
|06|주석(comment)
실습_HTML문서만들기

07.이미지(Images)태그와속성
|01|〈img,src,alt〉를이용하여 이미지삽입하기
|02|이미지파일경로(filepaths)
|03|HTML에서사용할수있는이미지파일형식
실습_이미지삽입하기

08.하이퍼링크(Hyperlinks)
|01|이미지에링크적용하기
|02|텍스트에링크적용하기
|03|이메일에링크적용하기
|04|주소(URL)입력하기
실습_이미지를클릭해새로운탭(페이지)으로열기
실습_텍스트를클릭해새로운탭(페이지)으로열기

09.목록(List)태그
|01|순서없는목록〈ulli〉
|02|순서있는목록〈olli〉
실습_순서없는목록에순서적용하기

10.표(Table)태그
실습_3열3행표만들기

11.폼(Form)태그
|01|인풋(input)태그
|02|레이블(label)태그
실습_아이콘이있는검색폼만들기

12.버튼(button)태그

13.미디어(Media)태그
|01|비디오(video)태그
|02|오디오(audio)태그
|03|유튜브(youtube)연결
실습_유튜브영상을HTML페이지에삽입하기

14.의미론적인요소로구성된HTML5페이지 구조
|01|헤더(header)태그
|02|내비게이션(nav)태그
|03|섹션(section)태그
|04|아티클(article)태그
|05|어사이드(aside)태그
|06|푸터(footer)태그
실습_의미론적HTML페이지만들기

CHAPTER03CSS로HTML페이지스타일링하기
01.CSS입력법(Syntax)
02.선택자(Selectors)의종류
|01|요소(element)
|02|아이디(#)
|02|클래스(.)
|03|모든(*)
|04|그룹(,)
|05|자손선택자(한칸띄기)
|06|자식 선택자(〉)

03.가상(pseudo)클래스

04.HTML페이지에CSS연결하기
|01|외부(ExternalCSS)스타일
|02|내부(InternalCSS)스타일
|03|인라인(Inline CSS)
실습_제목글자색적용하기

05.폰트(Fonts)
|01|패밀리(family)
|02|스타일(style)
|03|사이즈(size)
|04|웨이트(font-weight)
|05|구글웹폰트(GoogleWebfonts)
실습_구글웹폰트적용하기

06.컬러(color)
|01|이름(names)
|02|16진수(HEX:Hexadecimal)
|03|RGB(Red, Green, Blue)
|04|HSL(Hue,Saturation,Lightness)
|05|컬러선택기(ColorPicker)

07.텍스트스타일링(Textstyling)
|01|텍스트 정렬(align)
|02|데코레이션(decoration)
|03|들여쓰기(indent)
|04|자간(letter spacing)
|05|단어간격(word spacing)
|06|행간(line height)

08.박스모델(BoxModel)
|01|크기(width, height)
|02|테두리선(border)
|03|여백(padding,margin)
⦁Padding(안쪽여백)
⦁Margin(바깥여백)
|01|둥근 모서리(radius)
|02|box-sizing

09.레이아웃(Layout)
|03|float
|04|clear
|05|overflow
⦁이미지와내용을2단으로레이아웃구성하기
|01|display
|02|position
|03|flexbox
⦁부모(container)에서사용하는수평축정렬속성들
◇flex
◇flex-direction
⑴flex-direction:column
⑵flex-direction:column-reverse
⑶flex-direction:row
⑷flex-direction:row-reverse
◇flex-wrap
⑴flex-wrap:wrap
⑵flex-wrap:no-wrap
⑶flex-wrap:wrap-reverse
◇justfy-contents
⑴justfy-contents:flex-start
⑵justfy-contents:flex-end
⑶justfy-contents:center
⑷justify-contents:space-between
⑸justify-contents:space-around
⑹justify-contents:space-evenly
⦁부모(container)에서사용하는수직축정렬속성들
◇align-items
⑴align-items:stretch
⑵align-items:center
⑶align-items:flex-start
⑷align-items:flex-end
⑸align-items:baseline
◇align-contents속성
⑴align-content:space-between
⑵align-content:space-around
⑶align-content:stretch
⑷align-content:center
⑸align-content:flex-start
⑹align-content:flex-end
⦁자식(item)에서사용하는속성들
◇order
◇flex-grow
◇flex-shrink
◇flex-basis
◇flex
◇align-self
실습_flexbox를이용하여HTML5문서레이아웃디자인하기
|07|z-index
실습_z-index속성적용하기
z-index속성을활용해겹침순서지정하기

10.배경(background)
|01|배경색(background color)적용하기
|02|배경에 이미지(background image)
넣기
⦁background-image
⦁background-repeat
⦁background-position
⑴background-position:키워드
⑵background-position:좌푯값
⦁background-size
⑴background-size
⑵background-size속성의속성값비교:auto,contain,cover
|03|불투명도(opacity)

CHAPTER04실전예제웹사이트만들기
01.메인페이지만들기
|01|메인페이지HTML구성과공통CSS만들기
|02|메인페이지에로고와GNB만들기
|03|이벤트배너배치하기
|04|이미지 수평 정렬 만들기
|05|유튜브삽입하기
|06|섬네일갤러리와뉴스리스트만들기
|07|footer만들기
|08|상단으로이동하는[top]버튼만들기

02.서브페이지만들기
|01|서브페이지HTML구성
|02|브레드크럼(breadcrumb)만들기
|03|제목과이미지수직정렬만들기
|04|배경색위에섬네일이미지수평정렬만들기
|05|제목과이미지가운데정렬만들기
|06|GNB메뉴에페이지로이동하는하이퍼링크적용하기

|부록|칼퇴족에게유용한사이트모음

출판사 서평

웹표준을위한HTML5,CSS3로
웹기본기완성!!

웹브라우저는사용자에게최고의경험을제공하기위해새로운기술과기능을제공한다.하지만다양한웹브라우저는서로다른렌더링엔진을사용하고기본설정이다르기때문에웹페이지를표시하는방식이다르다.그래서이책은브라우저의종류와버전에관계없이웹페이지표시가최대한동일하게보이고웹표준을준수하는학습을하도록했다.
시대가변하는속도에따라웹개발분야도빠르게변화하고있다.하지만HTML과CSS기본은변하지않는다.웹에막입문한독자라도책이안내하는대로HTML태그와CSS속성과속성값등의개념을알아보고다양한실습을통해소스를작성하다보면기본기를탄탄하게쌓을수있다.