HTML+CSS 실전 입문서

김영일

(eden)

홍익대학교일반대학원영상인터랙션과박사학위와홍익대학교영상대학원인터랙션디자인과에서석사학위를받았다.

2004년부터CJ오쇼핑,SK커뮤니케이션즈의Nate,Cyworld,11번가등에서UIUX디자이너로근무하였고,SamsungPTKorea글로벌삼성그룹디지털UIUX팀장,GrouponKorea,위메프등에서e-커머스팀장으로다양한웹앱디지털서비스를제작하였다.

現)한양여자대학교스마트IT과조교수로재직중이며,Web/App,UIUX,Html&Css,Javascript,React,Futter,Nodejs,FullStackdeveloper,메타버스지향C#,C++Unity,UnrealVR,AR,3DBlender교육을담당하고있고,한국e-스포츠학회부회장을겸하고있다.

저서로는『기초탄탄UXUI디자인을위한AdobeXD』제이펍(2022),『메타버스교과서』(세종도서학술부문선정)길벗캠퍼스(2023),『블렌더교과서』길벗캠퍼스(2024)등이있으며,다양한분야의집필활동을이어가고있다.

1장|웹이해및웹표준화
1.1실습환경IDE:VisualStudioCode(코드실습환경)
1.2Internet의시작
클라이언트와웹서버의관계
클라이언트-웹서버-데이터베이스의관계
1.3HTML+CSS+JAVASCRIPT의유기적구조
1.4WebStandards&WebAccessibility(웹표준화접근성)
1.5WebApplicationArchitecture&MarkupLanguage(웹시스템구조및웹데이터의논리적구성)
1.6Browser점유율
전체모든플랫폼(데스크톱+모바일+테블릿)
데스크톱환경
핵심요약

2장|HTML기본구조및필수태그
2.1HTML의구조
2.2head태그
인코딩
반응형웹표시
브라우저타이틀
외부경로
자바스크립트작성
스타일시트작성
2.3body태그
HeadingText(헤딩텍스트)
Text
주석처리
문단(paragraph)태그
list태그
img태그
2.4공간태그:div/span
div태그
span태그
2.5blocklevel태그/inlinelevel태그
2.6semantic태그
2.7form태그
2.8기타태그
멀티미디어태그
테이블태그
color
2.9상대/절대경로
핵심요약
연습문제

3장|CSS:선택자,박스모델
3.1CSS구조와이해
CSS의기능
CSS의기본구조
3.2CSS크로스브라우징호환성체크
3.3CSS초기화
3.4CSS사용법3가지
EXTERNALCSS(외부링크)
INTERNALCSS(STYLE내부작성)
INLINECSS(body태그에삽입)
3.5Selector(선택자)
3.6background
3.7BoxModel-padding,border,margin
box-sizing:박스기준설정
3가지박스모델
시계방향1~4개개수별차이
핵심요약
연습문제

4장|CSS:폰트,크기
4.1font,text
텍스트컬러
텍스트정렬
텍스트대문자표현
텍스트데코레이션
글자그림자표현
Font
4.2width/height,px,%,vh,vw
PX(pixel)고정:기본절댓값
%(percent)가변:상댓값
VW(viewportwidth)
VH(viewportheight)
4.3em/rem
4.4line-height
4.5vertical-align
핵심요약
연습문제

5장|CSS:layout1
5.1가상엘리먼트
앵커가상클래스
순서의가상클래스
가상요소
5.2box-sizing
5.3고전적float:left
5.4overflow
5.5display
display:none
display:inline
display:block
display:inline-block
display:flex
display:grid
5.6BlockFormattingContext(BFC)
핵심요약
연습문제

6장|CSS:layout2
6.1layout1:clear:both;
6.2layout2:overflow:hidden
6.3layout3:clearfix
6.4position/z-index
position
z-index
6.5현대적flex
부모속성
자식속성
6.6현대적grid
핵심요약
연습문제

7장|CSS:알아두면유용한팁
7.1margincollapsing(마진겹침현상)
7.2negativemargin
7.3inheritance(상속)
7.4가로또는세로정렬(centeralign)
1줄텍스트정렬일경우
2줄이상텍스트중앙정렬일경우
7.5중앙정렬(가로+세로)
마진과위치값을활용한방법
마진오토와양끝모서리부분0값을활용한방법
display:table-cell이용한방법
flex방법
7.6가시성,투명도,애니메이션(visibility,transitions,transform,@keyframes,animation)
7.7기타유용한팁
핵심요약
연습문제

8장|CSS함수및반응형레이아웃
8.1반응형웹
8.2css함수:var()
8.3css함수:calc()
핵심요약
연습문제

9장|HTML,CSS입문실습
9.1HTML기초하이퍼링크
9.2HTML구조와절대/상대경로
9.3HTML,CSS이미지와내비게이션
9.4HTML,CSS반응형에따른메뉴가로&세로
반응형에따른가로형태
반응형에따른세로형태
9.5HTML,CSS반응형이미지카드갤러리

10장|HTML,CSS기초레이아웃실습
10.1기초웹페이지응용실습1
10.2기초웹페이지응용실습2
10.3기초웹페이지응용실습3

11장|HTML,CSS활용실습
11.1forms활용한로그인페이지
결과미리보기
html
css
11.2forms활용한회원가입및요청사항폼
결과미리보기
html
css
11.3dropdown가로메뉴
결과미리보기
html
css
11.4dropdown세로메뉴
결과미리보기
html+javascript
css
11.5TABLE활용한리스트
결과미리보기
html
css
11.6이미지가들어간로그인페이지254
결과미리보기
html
css

12장|HTML,CSS실전실습
12.1실전학습을위한기초내용체크
html
css
12.2실전학습을위한예제1
pc화면
모바일화면
html+css전체코드
12.3실전학습을위한예제2
pc화면
모바일화면
html
12.4실전학습을위한예제3
pc화면
모바일화면
html
style.css
12.5실전학습을위한예제4
pc화면
모바일화면
html
css

13장|GIT데이터버전관리
13.1GIT(깃)버전관리프로그램
git소개
git설치
13.2생성공간에파일업로드방법
가장빠르게업로드하는방법
Git코드사용법
vscode에서세팅후업로드방법
업로드/다운로드GIT명령어정리
13.3GitHub계정으로생성형ai코드활용법

누구나쉽게디자인하고코딩한다!
AI의시대의근간이되는웹과앱의필수학습과정이자,웹디자인,UI,인터페이스를구성하는기본구성인HTML&CSS를비전공자나디자이너도알기쉽게웹,앱구성의필수레이아웃및자주사용하는기능적요소만엄선하여소개합니다.

STEP1웹과앱의디자인이론과개념의이해
STEP2자주쓰는중요기능중심의HTML5,CSS3실습
STEP3핵심요약및연습문제로배운내용스스로점검하며완성