이토록 쉬운 HTML&CSS 웹 프로그래밍 입문 (딱! 일주일 만에 끝내는 프런트엔드 웹 기초)

오정민

새로운가치를만드는개발자이자IT강사.어릴때부터컴퓨터를다루는걸좋아했고,자연스럽게코딩을독학하면서SW특기자로대학에입학했다.프로그래밍을통해새로운가치를만든다는목표로‘데브파이브’를창업하였고,사회적약자를위한소프트웨어나각계각층에필요한여러서비스를개발하고있다.‘베어유’,‘패스트캠퍼스’와같은온라인플랫폼뿐만아니라,‘삼성중공업’,‘우리은행’등국내굵직한기업에서강의하며코딩의짜릿함과즐거움을널리알리고있다.

01웹개발환경구성하기
__1.1코드에디터설치하기
__1.2HTML웹프로젝트만들기
__1.3VSCode확장프로그램설치
____1.3.1라이브서버설치
__1.4웹브라우저살펴보기
____1.4.1크롬브라우저설치

02HTML이해하기
__2.1태그란?
____2.1.1마크업언어개념
____2.1.2태그의기본개념
____2.1.3태그의관계
__2.2태그의속성
____2.2.1HTML문서버전명시
____2.2.2웹페이지태그〈html〉
____2.2.3페이지설정태그〈head〉
____2.2.4페이지제목태그〈title〉
____2.2.5추가정보태그〈meta〉
____2.2.6본문태그〈body〉
____2.2.7HTML주석

03HTML기본태그
__3.1텍스트관련태그
____3.1.1제목태그〈h1〉~〈h6〉
____3.1.2문단태그〈p〉
____3.1.3줄바꿈태그〈br〉
____3.1.4미리정의된태그〈pre〉
____3.1.5강조태그,〈strong〉
____3.1.6기울임태그〈i〉
____3.1.7첨자태그〈sup〉,〈sub〉
____3.1.8루비주석태그〈ruby〉
__3.2버튼태그
____3.2.1disabled속성을통한비활성요소설정
____3.2.2type속성을통한버튼종류설정
__3.3리스트태그
____3.3.1순서가없는리스트〈ul〉
____3.3.2순서가있는리스트〈ol〉
__3.4표태그
____3.4.1표의행태그〈tr〉
____3.4.2표의셀태그〈td〉
__3.5하이퍼링크태그

04HTML의미디어태그
__4.1이미지태그
____4.1.1이미지를인터넷에서가져오기
____4.1.2이미지를로컬에서가져오기
__4.2영상태그
____4.2.1controls속성을통한컨트롤러추가
____4.2.2autoplay속성을통한자동재생
____4.2.3poster속성을통한섬네일추가
__4.3음성태그
____4.3.1controls속성을통한컨트롤러추가

05HTML의폼태그
__5.1데이터입력태그
____5.1.1name속성을통한데이터구분
____5.1.2required속성을통한필수입력값지정
____5.1.4type속성을사용한〈input〉의변화
____5.1.5checked속성을통한기본선택지정
____5.1.6value속성을통한값삽입
____5.1.7disabled속성을통한비활성
____5.1.8readonly속성을통한읽기모드
__5.2다중줄입력태그
____5.2.1rows속성을통한줄수설정
__5.3데이터설명태그
____5.3.1for속성을통한UX개선
__5.4데이터선택태그
____5.4.1multiple속성을통한다중선택지정
__5.5자동완성태그
__5.6데이터전송태그

06CSS의기본스타일
__6.1CSS기본문법
____6.1.1CSS의주석
__6.2웹의색표현방법
__6.3그레이디언트
____6.3.1선형그레이디언트
____6.3.2원형그레이디언트
____6.3.3그레이디언트생성기
__6.4텍스트스타일
____6.4.1color:텍스트색
____6.4.2font-size:텍스트크기
____6.4.3letter-spacing:텍스트자간
____6.4.4line-height:텍스트행간
____6.4.5white-space:공백처리
____6.4.6work-break:단어줄바꿈
____6.4.7text-overflow:텍스트넘침
____6.4.8text-align:텍스트정렬
____6.4.9font-weight:텍스트굵기
____6.4.10font-family:폰트지정
____6.4.11@font-face폰트추가하기
____6.4.12웹폰트추가하기
__6.5리스트스타일
____6.5.1리스트타입
____6.5.2이미지리스트심볼

07CSS의Box스타일
__7.1Box크기스타일
____7.1.1width:폭지정
____7.1.2height:높이지정
____7.1.3overflow:벗어난요소설정
____7.1.4aspect-ratio:가로세로의비율
__7.2Box배경스타일
____7.2.1background:배경
__7.3Box선스타일
____7.3.1border:테두리
____7.3.2border-radius:둥근꼭짓점설정
__7.4Box의여백설정
____7.4.1margin:겉여백
____7.4.2padding:속여백
____7.4.3box-sizing:또다른상자크기계산법
__7.5Box의그림자스타일
____7.5.1box-shadow:그림자

08CSS의선택자
__8.1태그선택자
__8.2전체선택자
__8.3아이디선택자
__8.4클래스선택자
__8.5속성선택자
__8.6가상클래스선택자
____8.6.1hover:마우스를올렸을때
____8.6.2active:활성화됐을때
____8.6.3checked:체크되었을때
____8.6.4disabled:비활성요소일때
____8.6.5enabled:활성요소일때
____8.6.6visited:방문했을때
____8.6.7focus:포커싱될때
____8.6.8nth-child:N번째요소
__8.7결합자
____8.7.1형제결합자
____8.7.2인접형제결합자
____8.7.3자식결합자
____8.7.4자손결합자

09CSS의레이아웃
__9.1디스플레이
____9.1.1block:블록요소
____9.1.2inline:인라인요소
____9.1.3inline-block:인라인블록요소
____9.1.4flexbox:플렉스박스
____9.1.5grid:그리드
__9.2포지션
____9.2.1relative:상대위치
____9.2.2absolute:절대위치
____9.2.3fixed:고정위치
____9.2.4sticky:흡착위치
____9.2.5z-index:순서설정

10변형과애니메이션
__10.1변형
____10.1.1rotate:회전
____10.1.2translate:위치
____10.1.3scale:크기
__10.2전환효과
____10.2.1transition-timing-function:타이밍함수
__10.3애니메이션
____10.3.1@keyframes:키프레임
____10.3.2animation-name:키프레임이름
____10.3.3animation-duration:지속시간
____10.3.4animation-iteration-count:반복횟수
____10.3.5animation-direction:방향
____10.3.6animation-fill-mode:종료후모드
____10.3.7animation-delay:대기시간
____10.3.8animation-timing-function:타이밍함수

11반응형웹다루기
__11.1반응형웹의기본
____11.1.1반응형웹이란?
____11.1.2viewport:뷰포트
____11.1.3@media:미디어쿼리
____11.2반응형레이아웃만들기

찾아보기

웹프로그래머로처음발걸음을내딛는모든사람에게이정표가되어주는책입니다.
_FINDA백엔드개발자ㆍ이상윤

개발자선배에게1:1속성과외를받는듯한설명과알찬예제구성이돋보이는책!
_네이버광고플랫폼개발자ㆍ고상원

단단한웹기본을쌓는건물론,실무기술을빠르게익히는데에도큰도움을받을수있습니다.
_주식회사스캐터랩개발자ㆍ김성훈

웹개발자의기초체력을강화시켜주는HTML,CSS의문법을정말친절하게안내합니다.
_데브시스터즈개발자ㆍ김경준