HTML+CSS 웹 디자인 입문 (HTML, CSS 기초부터 반응형 웹 디자인, 실전 웹 사이트 제작까지)

Mana

일본에서2년동안그래픽디자이너로일한뒤,캐나다밴쿠버에있는웹제작학교를졸업했다.캐나다,호주,영국기업에서웹디자이너로일했으며현재는일본에서웹과관련된세미나를진행하고,웹제작컨설턴트로교육에힘쓰고있다.블로그‘웹크리에이터박스’는2010년일본알파블로거어워드를수상했다.

▣CHAPTER1:기억해두어야하는웹사이트기본
1-1좋은웹디자인이란?
__디자인의목적은상대방에게무언가를전달하는것
__쉬운사용
__보다좋은생활을제공하는것
1-2다양한종류의사이트
__기업사이트
__프로모션사이트
__포트폴리오사이트
__쇼핑사이트
__미디어사이트
__SNS
__“사용하기쉬움”을생각하기
__보기쉽게디자인하기
1-3사용성이란?
__읽기쉬운글만들기
__사용하기쉬운조작성
1-4웹사이트의구조
__인터넷이란?
__웹이란?
__웹페이지의구조
__URL이란?
1-5장치의종류
__단말기
__주변기기
1-6웹브라우저의종류
__웹페이지는웹브라우저에서
1-7제작흐름
__제작흐름
__기획
__사이트맵제작
__와이어프레임만들기
__와이어프레임작성예
__디자인
__코딩
__웹에공개
1-8제작을시작하기전에
__텍스트에디터설치
__브라우저설치
__구글크롬설치방법
__그래픽도구확인

▣CHAPTER2:웹기본구조만들기-HTML기본
2-1HTML이란?
__컴퓨터에지시를내리는HTML
2-2HTML파일만들기
__텍스트에디터실행하기
__코드작성하기
__파일저장하기
__웹브라우저에서열어보기
__HTML파일이름규칙
__[!doctypehtml]
__html~/html
__head~/head
__metacharset=“UTF-8”
2-3HTML파일의골격
__title~/title
__metaname="description"content="~"
__body~/body
2-4HTML의기본작성방법
__HTML기본문법과태그
__태그를작성하는규칙
__태그내부에있는태그
__태그에정보추가하기
2-5제목붙이기
__제목태그h1~h6태그
__제목태그를사용하는순서
2-6문장출력하기
__단락을출력하는p태그
2-7이미지삽입하기
__이미지를출력하는img태그
__파일경로지정하기
2-8링크만들기
__링크를만드는a태그
2-9리스트출력하기
__기본적인리스트를만드는“ul태그+li태그”
2-10표만들기
__순서있는리스트를만드는“ol태그+li태그”
__표기본
__셀병합하기
2-11입력양식만들기
__여러개의부품조합하기
__입력양식란을만드는form태그
__입력양식에사용하는부품
2-12사용하기쉬운입력양식만들기
__입력양식의레이블을만드는label태그
2-13블록요소로그룹나누기
__그룹구분하기
__페이지상부의헤더를만드는header태그
__내비게이션메뉴를만드는nav태그
__기사부분을만드는article태그
__테마를가진그룹을만드는section태그
__페이지의메인콘텐츠부분을만드는main태그
__메인콘텐츠가아닌추가정보aside태그
__페이지하부의푸터부분을만드는footer태그
__의미를가지지않는블록요소를만드는div태그
2-14자주사용하는HTML태그목록

▣CHAPTER3:웹디자인만들기:CSS기본
3-1CSS란?
__HTML을장식하는언어인CSS
3-2CSS를적용하는방법
__CSS파일을읽어들여적용하기
__HTML파일의head내부에style태그를넣어지정하기
__HTML태그내부에style속성지정하기
3-3CSS파일만들기
__텍스트에디터실행하기
__CSS코드작성하기
__CSS파일저장하기
__HTML파일의head내부에서CSS파일읽어들이기
__웹브라우저에서열기
__CSS파일의이름규칙
3-4CSS기본작성방법익히기
__CSS기본문법
__CSS를작성할때의규칙
3-5문자와문장장식하기
__문자의크기를변경하는“font-size속성”
__폰트의종류를지정하는“font-family속성”
__문자의두께를바꾸는“font-weight속성”
__줄높이를바꾸는“line-height속성”
__문장맞춤을지정하는“text-align속성”
3-6웹폰트사용하기
__웹폰트란?
__웹폰트사용하기
3-7색넣기
__색지정방법
__문자색을지정하는“color속성”
__배경에색을지정하는“background-color”속성
__배색잘하기
__각색을메인으로사용한참고사이트
3-8배경넣기
__배경에이미지를설치하는“background-image속성”
__배경이미지의반복출력“background-repeat속성”
__배경이미지를출력하는위치를지정하는“background-position속성”
__배경관련속성을한꺼번에지정하는“background속성”
__사진을내려받을수있는웹사이트
3-9너비와높이지정하기
__크기를지정하는“width속성”,“height속성”
__웹사이트에서사용하는단위
3-10여백조정하기
__여백의개념
__요소밖의여백“margin속성”
__요소내부의여백“padding속성”
__여백을사용해그룹만들기
__테두리와문자사이에여백만들기
3-11선긋기
__선의두께“border-width속성”
__선의종류“border-style속성”
__선색“border-color속성”
__요소주변에선을긋는“border속성”
__선디자인을효과적으로사용하기
3-12리스트장식하기
__리스트마커의종류“list-style-type속성”
__리스트마커의출력위치“list-style-position속성”
__리스트마커로사용할이미지“list-style-image속성”
__리스트마커와관련된장식을한꺼번에지정하는“list-style속성”
__리스트마커를효과적으로사용하기
3-13클래스와ID를사용한지정방법
__클래스와ID
__클래스를사용한작성방법
__ID를사용한작성방법
__태그이름과함께클래스와ID를사용하는작성방법
__클래스이름과ID이름규칙
__한태그에여러개의ID와클래스붙이기
__클래스와ID의차이
3-14레이아웃만들기
__Flexbox로수평정렬하기
__CSS그리드로타일형태로정렬하기
__보기쉬운레이아웃이란?
__레이아웃별참고사이트목록
3-15디폴트CSS리셋하기
__CSS리셋이란
__브라우저에따른외관차이
__리셋CSS사용하기
3-16자주사용하는CSS속성목록

▣CHAPTER4:풀스크린웹사이트제작하기
4-1풀스크린이란
__풀스크린레이아웃의장점과구성요소
4-2풀스크린페이지의제작흐름
__작성할페이지
__제작흐름
4-3“head”작성하기
__파일준비하기
__HTML골격만들기
__“meta”정보와“title”작성하기
__필요한CSS파일읽어들이기
4-4“header”부분만들기
__HTML에“header”부분작성하기
__CSS파일준비하기
__공통부분작성하기
__로고크기와여백조정하기
__내비게이션메뉴장식하기
__콘텐츠의최대출력너비설정하기
4-5콘텐츠부분만들기
__문장과버튼설치하기
__화면을꽉채우는배경이미지배치하기
4-6파비콘설정하기
__파비콘이란
__어떤디자인이좋을까?
__파비콘전용이미지준비하기
__HTML의“head”내부에서파비콘읽어들이기
__파비콘을만들어주는서비스사용하기
4-7풀스크린페이지변경해보기
__블랜드모드로배경이미지에색겹치기
__배경을그레이디언트색상으로설정하기
__배경이미지에블랜드모드를사용해서그레이디언트색상섞기

▣CHAPTER5:2-칼럼웹사이트제작하기
5-12-칼럼레이아웃이란
__2-칼럼레이아웃의장점과구성요소
__2-칼럼의너비비율
__반응형웹에서의배치
5-22-칼럼페이지의제작흐름
__제작흐름
5-3페이지전체의제목만들기
__파일준비하기
__HTML편집하기
__CSS로장식하기
5-4푸터부분만들기
__푸터콘텐츠작성하기
__CSS로장식하기
5-5수평정렬설정하기
__레이아웃골격만들기
__레이아웃구성하기
5-6메인콘텐츠영역만들기
__기사정보부분만들기
__이미지와본문작성하기
5-7사이드바만들기
__제목과문장장식하기
__카테고리리스트장식하기
5-8반응형웹지원하기
__반응형웹디자인이란?
__반응형웹을지원하는방법
__문자크기와여백조정하기
__콘텐츠를수직정렬하기
__브레이크포인트생각해보기
5-9칼럼페이지를변경해보기
__3-칼럼레이아웃으로설정하기
__출력할칼럼의순서변경하기

▣CHAPTER6:타일형태의웹사이트제작하기
6-1타일형태의레이아웃이란
__타일형레이아웃의장점과구성요소
6-2타일형레이아웃의제작흐름
__제작흐름
6-3페이지상부의소개문만들기
__파일준비하기
__HTML준비하기
__CSS로장식하기
6-4타일형레이아웃설정하기
__콘텐츠준비하기
__CSS그리드사용하기
6-5반응형웹지원하기
__요소를반복정렬하는“repeat”
__요소너비에최솟값과최댓값을지정하는“minmax”
__화면의너비에맞게출력하는“auto-fit”
6-6타일형레이아웃변경예
__크기가다른요소배치하기
__큰크기의그리드아이템지정하기
__이미지의높이맞추기
__이미지자르기
__반응형웹지원하기

▣CHAPTER7:외부미디어사용하기
7-1문의페이지의제작흐름
__작성할페이지
__제작흐름
7-2입력양식배치하기
__파일준비하기
__HTML편집하기
__CSS로장식하기
__입력양식서비스사용하기
7-3지도출력하기
__가게정보작성하기
__구글지도출력하기
__외관조정하기
7-4페이스북플러그인삽입하기
__SNS부분의레이아웃잡기
__페이스북플러그인코드받기
7-5트위터플러그인삽입하기