Do it! 프런트엔드 UI 개발 with Vue.js - 웹 사이트 하나를 통째로 만들며 배운다! <*> Do it! 시리즈
김윤미 (지은이)이지스퍼블리싱2023-08-08
웹어워드코리아(i-award.or.kr)에서 대상과 최우수상을 수상한 17년 차 프런트엔드 개발자가 알려 주는 방법 그대로 웹 사이트 하나를 통째로 만든다. HTML과 CSS는 복습하는 차원으로 실무에서 유용한 내용만 다뤘으며, 자바스크립트와 Vue.js 또한 핵심 문법 위주로 이론 공부에 대한 부담을 줄였다.
그 대신 실무에서 자주 사용하는 코드 패턴에 집중하였으며, 웹 사이트를 만드는 실습 과정을 상세히 설명하여 '러닝 바이 두잉(learning by doing, 직접 해보며 배우기)'으로 실무 감각을 익힐 수 있도록 구성했다.
개발 환경 설정부터 폴더와 파일을 만들고 코드를 어떻게 작성하는지 웹 사이트 개발의 전체 과정을 저자가 실무에서 작업하는 방식 그대로 본문에 옮겨 놓았다. 또한 중간중간 ‘알아 두면 좋아요’, ‘실무 코칭’ 등 저자가 개발 현장에서 직접 몸으로 배워 얻은 노하우까지 덤으로 챙길 수 있다.
목차
==========================
첫째마당 HTML과 CSS 그리고 반응형 웹
==========================
01 HTML과 CSS 복습하기
01-1 HTML과 시맨틱 웹
01-2 실무에서 유용한 HTML 요소
01-3 CSS 기초 문법 복습하기
01-4 스타일을 적용할 요소 선택하기
02 실무에서 유용한 CSS 패턴 알아보기
02-1 박스 모델 이해하기
02-2 CSS 속성 알아보기
02-3 가상 요소 알아보기
03 레이아웃과 반응형 웹
03-1 요소의 흐름을 지정하는 속성 — float
03-2 레이아웃을 위한 속성 — flex
03-3 반응형 웹 만들기
03-4 반응형 웹은 미디어 쿼리로만 만들까?
================
둘째마당 웹 프로그래밍
================
04 자바스크립트 프로그래밍
04-1 자바스크립트의 역할
04-2 자바스크립트 기본 문법
04-3 제어문
04-4 배열
04-5 반복문
04-6 Node.js 설치하기
05 Vue.js 프로그래밍
05-1 싱글 페이지 애플리케이션 개발
05-2 Vue.js 프레임워크 소개
05-3 라우터
05-4 컴포넌트 만들기
05-5 템플릿 문법
05-6 주요 속성
05-7 UI 프레임워크 소개
==============
셋째마당 SPA 만들기
==============
06 프로젝트 환경 설정하기
06-1 프로젝트 환경 설정하기
06-2 프로젝트 폴더 살펴보기
07 SPA 기본 골격 만들기
07-1 기본 레이아웃 만들기
07-2 헤더 영역 만들기
07-3 메뉴 데이터 만들기
07-4 푸터 영역 만들기
07-5 반응형으로 만들기
08 로그인/회원가입 대화 상자 만들기
08-1 부트스트랩 뷰란?
08-2 부트스트랩 뷰 컴포넌트
08-3 부트스트랩 아이콘
08-4 로그인 대화 상자 만들기
08-5 회원가입 대화 상자 만들기
09 메인 콘텐츠 만들기
09-1 메인 콘텐츠 레이아웃 만들기
09-2 분야별 새로 나온 도서 영역 만들기
09-3 도서 검색 만들기
09-4 배너 메뉴 만들기
09-5 공지 사항 만들기
10 서브 페이지 레이아웃 만들기
10-1 메뉴 고정하기
10-2 서브 페이지 레이아웃 만들기
11 도서 소개 페이지 만들기
11-1 도서 목록 만들기
11-2 도서 기본 정보 만들기
11-3 도서 상세 탭 메뉴 만들기
11-4 동적 라우팅으로 구현하기
12 SPA 완성하기
12-1 자료실/동영상 강의 페이지 만들기
12-2 교재 샘플 페이지 만들기
12-3 회사 소개 페이지 만들기
찾아보기