한 권으로 끝내는 그누위즈의 HTML5 & CSS3 웹 디자인 입문+활용 (세로스크롤형, 풀페이지형, 가로스크롤형, 반응형 웹 사이트 만들기)

윤성훈,정지영,정동진

현)웹에이젼시그누위즈대표
현)gnuwiz.com대표운영자
현)웹프로그래밍프리랜서강사
현)Youtube"그누위즈"채널운영

(저서)
그누위즈의PHP&MySQL웹프로그래밍입문+활용(앤써북)
JSPStudy의JSP웹프로그래밍입문+활용(2판)(앤써북)
그누위즈의HTML5&CSS3웹디자인입문+활용(앤써북)

Part01HTML시작하기
Chapter00들어가기에앞서
01_웹디자이너에게HTML&CSS가필요한이유
02_코딩?코딩을배우는방법
02-1코딩이란
02-2코딩을공부하는방법
03_코딩프로그램설치
03-1비주얼스튜디오코드(VSCode)다운로드및설치
03-2비주얼스튜디오코드(VSCode)확장프로그램설치하기
03-3비주얼스튜디오코드(VSCode)환경설정

Chapter01웹사이트기본알아보기
01_웹사이트란?
01-1웹의개념
01-2웹사이트의종류(기업,브랜드,프로모션등)
02_웹사이트의구조
03_웹브라우저종류
04_웹표준과웹접근성
04-1웹표준
04-2웹접근성
05_크로스브라우징(웹호환성)
핵심정리
실습예제

Chapter02HTML기본알아보기
01_HTML이란무엇인가?
02_HTML파일만들기
03_HTML기본문서구조
03-1〈!DOCTYPEhtml〉
03-2〈html〉~〈/html〉
03-3〈head〉~〈/head〉
03-4〈meta〉
03-5〈title〉~〈/title〉
03-6〈body〉~〈/body〉
04_HTML기본문법
04-1HTML기본작성규칙
04-2셀프클로징(Self-Closing),빈태그
04-3HTML요소구조
04-4블록요소,인라인요소,인라인-블록요소
04-5주석
핵심정리
실습예제

Chapter03HTML웹문서에다양한내용입력하기
01_텍스트입력하기
01-1제목〈h1〉~〈h6〉
01-2문단〈p〉
01-3줄바꿈〈br〉
01-4글자기울임〈i〉
01-5글자굵게
01-6텍스트강조〈em〉
01-7텍스트강조〈strong〉
01-8텍스트작게〈small〉
01-9마킹표시〈mark〉
02_목록만들기
02-1순서없는목록〈ul〉〈il〉
02-2순서있는목록〈ol〉〈li〉
03_표만들기84
03-1표삽입〈table〉84
03-2표제목〈caption〉87
03-3표의열을묶는그룹〈colgroup〉〈col〉
03-4표영역을그룹화〈thead〉〈tbody〉〈tfoot〉
03-5표의행생성〈tr〉
03-6표의열생성〈td〉
03-7표의행,열타이틀생성〈th〉
03-8셀열(가로)병합colspan
03-9셀행(세로)병합rowspan
04_이미지삽입하기
04-1이미지삽입〈img〉
04-2〈img〉태그에서사용하는URL주소와파일경로
05_하이퍼링크삽입하기
05-1하이퍼링크〈a〉
핵심정리
실습예제

Chapter04HTML입력양식작성하기
01_폼삽입하기
01-1입력폼〈form〉
01-2사용자입력〈input〉
01-3선택목록〈select〉
01-4〈select〉〈datalist〉태그의항목정의〈option〉
01-5〈option〉항목을묶는그룹〈optgroup〉
01-6문장입력〈textarea〉
01-7버튼〈button〉
01-8라벨〈label〉
핵심정리
실습예제

Chapter05HTML부모요소,자식요소,형제요소
01_DOM으로요소관계파악하기
02_HTML요소관계파악하기
핵심정리


Part02CSS다루기
Chapter06CSS기본알아보기
01_CSS란무엇인가?
02_CSS기본문법
02-1CSS기본구조
02-2주석
03_CSS스타일시트적용
03-1인라인스타일
03-2내부스타일시트〈style〉〈/style〉
03-3외부스타일시트〈link〉
03-4외부스타일시트@import
04_CSS스타일적용우선순위(캐스케이딩)
04-1스타일시트파일우선순위
04-2동일스타일시트내에우선순위
핵심정리
실습예제

Chapter07CSS선택자알아보기
01_CSS기본선택자
01-1전체선택자*
01-2태그선택자〈태그명〉
01-3클래스선택자.
01-4아이디선택자#
01-5속성강제적용!important
01-6선택자우선순위(캐스케이딩)
핵심정리
실습예제

Chapter08텍스트꾸미기
01_폰트(글꼴)관련속성
01-1폰트스타일font-style
01-2폰트두께font-weight
01-3폰트사이즈font-size
01-4폰트종류font-family
01-5폰트색상color
02_텍스트관련스타일
02-1텍스트정렬text-align
02-2글자라인text-decoration
02-3텍스트그림자text-shadow
02-4텍스트를대문자나소문자변경text-transform
02-5글자사이간격letter-spacing
03_문단(문장)관련속성
03-1문장과문장사이의간격line-height
03-2줄바꿈,공백,줄속성white-space
03-3줄바꿈속성word-break
03-4단어사이의간격word-spacing
03-5줄바꿈설정word-wrap
04_목록관련속성
04-1목록스타일list-style
04-2목록마커의유형list-style-type
04-3목록마커의이미지설정list-style-image
04-4목록마커의위치속성list-style-position
05_웹폰트사용하기
05-1시스템폰트vs이미지폰트vs웹폰트
05-2웹폰트특징과종류
05-3웹폰트를사용하기위해알아야할@font-face
05-4구글웹폰트사용
핵심정리
실습예제

Chapter09색과배경넣어서꾸미기
01_색상관련속성
01-1색상값종류
01-2투명도지정opacity
02_배경지정관련속성
02-1배경속성background
02-2배경색지정(단색)background-color
02-3배경이미지지정background-images
02-4배경색지정(선형그라데이션)
02-5배경색지정(원형그라데이션)
03_배경이미지관련속성
03-1배경이미지고정여부background-attachment
03-2배경이미지위치기준점background-origin
03-3배경이미지위치영역background-position
03-4배경이미지사용반복여부background-repeat
03-5배경이미지사이즈background-size
핵심정리
실습예제

Chapter10레이아웃을만들기위한CSS박스모델
01_CSS박스모델
01-1박스모델개념
01-2CSS박스요소
02_콘텐츠관련속성들
02-1요소너비width
02-2요소높이height
03_테두리관련속성들
03-1요소테두리border
03-2요소테두리모양설정border-style
03-3요소테두리색상설정border-color
03-4요소테두리두께설정border-width
03-5요소테두리둥글게설정border-radius
04_여백관련속성들
04-1요소바깥여백margin
04-2요소내부여백padding
04-3박스크기기준box-sizing
핵심정리
실습예제

Chapter11내스타일적용을위한CSS초기화
01_CSS초기화
01-1CSS초기화개념
01-2CSS초기화기초
01-3CSS초기화응용
01-4외부CSS초기화(Reset)코드사용
핵심정리
실습예제

Chapter12레이아웃배치를위한CSS포지셔닝
01_가로로배치하는float
01-1가로배치속성float
01-2가로왼쪽정렬속성left
01-3가로오른쪽정렬속성right
01-4float해제속성clear
02_원하는위치에배치하는position
02-1브라우저좌표
02-2원하는위치에배치하는속성position
02-3자기자신기준relative
02-4부모기준absolute
02-5브라우저기준fixed
02-6스크롤영역기준sticky
02-7요소의순서를제어하는속성z-index
03_중앙으로배치하는쉬운방법
03-1text-align/line-height사용(텍스트)
03-2vertical-align사용(인라인요소)
03-3margin사용(블록요소)
03-4position/margin사용(블록요소)
03-5position/transform사용(블록요소)
04_플렉스박스
04-1배치속성flex
04-2플렉스박스속성
04-3flex를활용하여가로배치
05_레이아웃속성활용해보기
핵심정리
실습예제


Part03HTML&CSS한걸음나아가기
Chapter13HTML시멘틱태그
01_문서구조화를위한시맨틱태그란?
01-1시맨틱태그개념
01-2시맨틱태그를사용해야하는이유
02_시맨틱태그종류
02-1페이지상단에위치한머리말요소〈header〉
02-2메인메뉴부분을나타내는요소〈nav〉
02-3페이지전체의주요콘텐츠를나타내는요소〈main〉
02-4주제별로나눌수있는요소〈section〉
02-5개별콘텐츠를나타내는요소〈article〉
02-6주요콘텐츠가아닌부가적인정보를나타내는요소〈aside〉
02-7페이지하단에위치한꼬리말요소〈footer〉
02-8의미를가지지않는블록요소를만드는〈div〉
02-9의미를가지지않는인라인요소를만드는〈span〉
핵심정리
실습예제

Chapter14CSS스타일상속
01_CSS스타일상속
01-1상속가능한속성
01-2상속이되지않는속성
01-3강제상속(inherit키워드)
핵심정리

Chapter15CSS고급선택자
01_그룹선택자(,)
02_하위선택자
03_자식선택자(〉)
04_인접형제선택자(+)
05_일반형제선잭자(~)
06_속성선택자
07_반응선택자
0