웹 애플리케이션 시작의 핵심!
한 권으로 HTML, CSS, javascript 해결

이 책은 웹 퍼블리싱에 대해 아무런 지식이 없는 상태에서 시작할 수 있도록 개발 환경 구축부터 시작해서 실전 프로젝트까지 스스로 코딩 할 수 있도록 도와주고 있다. HTML 기초에서는 다양한 태그의 사용법을 학습하고 웹페이지 제작의 가장 큰 목표인 내용을 정확하게 전달하고, 웹 표준을 준수하여 태그를 작성할 수 있게 가르친다.

CSS 부분은 HTML에서 사용하는 주요 요소들에 대한 설명을 하고 있다. 그리고 동적인 웹사이트를 구현하는데 사용하는 속성들을 학습해볼 수 있다. 후반에는 javascript 내용으로 웹에서 자주 사용하게되는 문법들을 설명한다. 그동안 눈에 보이는 것들을 만졌다면 이제는 구동하는 방법 더 적은 코드로 화면을 구성하는 방법을 배우게 된다.

그리고 웹사이트에서 자주 구현하는 UI/UX 기능을 구현해본다. 사용자의 행동에 따라 웹사이트에서 보는 내용들이 달라지게 되고 반응을 하게된다. 최근에는 다양한 디바이스가 있는 만큼 우리가 사용자들에게 다양한 화면을 어떻게 보여줄 것인지 배우면서 고민을 해보시기 바란다. 마지막으로 실전 프로젝트로 우리가 학습한 내용을 바탕으로 웹사이트를 구현해본다. 이것으로 HTML, CSS, javascript가 어떻게 연계되는지 학습해볼 수 있다.

모바일 웹 시장은 계속 확장되고 있다. 이에 대부분의 IT 웹앱 서비스 회사들이 웹 뷰를 도입하여 웹 프론트엔드 개발자의 수요가 증가하고 있다. 이에 맞게 개발자들은 사용자에게 전달이 잘 될 수 있도록 하는 것이 중요해진다. 기본적인 HTML, CSS, javascript를 다루게 되면 앞으로 웹서비스를 어떻게 구현할지 고민을 해야 할 것이다. 이 책은 그 기본을 알 수 있게 도와주는 책이므로 차근차근 따라하다 보면 능숙하게 다룰 수 있을 것이고 어렵다면 유튜브 강의와 코딩 플랫폼을 통해 복습해 볼 수 있으니 한번 도전해보시기 바란다.

지은이의 글
이 책의 특징
베타 리더
PART 1 HTML 기초
1. HTML의 구조
2. 블록 및 인라인 레벨 요소
3. 텍스트 정의 요소
4. div 요소로 작성하는 문서의 그룹화
5. HTML5 섹셔닝
6. 제목, 문단, 구분선, 정형화된 텍스트
7. 목록을 표현하는 요소
8. 표를 만드는 테이블 요소
9. 앵커(Anchor)의 표현
10. 이미지와 관련된 요소들
11. 폼 요소의 종류
12. 오디오, 비디오 활용
이번 장의 마무리
연습 문제
실전 예제

PART 2 CSS 기초편
1. CSS 문법
2. 색상과 단위
3. 선택자
4. 선택자 우선순위
5. 서체, 글 스타일
6. 목록 스타일
7. display 디스플레이
8. overflow
9. background 스타일
10. box model 박스 모델
11. 레이아웃 positioning style
이번 장의 마무리
연습 문제

PART 3 CSS 중급편
1. shadow
2. gradient
3. transition
4. animation
5. transform
6. responsive 반응형
이번 장의 마무리
연습 문제
실전 예제

PART 4 javascript 기초
1. 기본 용어
2. 변수
3. 산술 연산자
4. 함수
5. 객체
6. 배열
7. 조건문
8. 반복문
9. 문자열
10. 타이머
11. 수학 연산
이번 장의 마무리
연습 문제

PART 5 javascript 응용
1. DOM 조작
2. 선택자
3. 이벤트
4. ECMAScript 6
이번 장의 마무리
연습 문제
실전 예제

PART 6 실전 프로젝트
1. 준비하기
2. 기본 쉘 생성하기
3. 디자인 확인 및 HTML 작성하기
4. 디자인 참조하여 CSS 작성하기
5. CSS 작성
6. script 작성
프로젝트 마무리

연습 문제 정답
찾아보기

이 책은 HTML, CSS, javascript 크게 3파트로 구성되어 있습니다. 각 파트는 기본 문법을 설명하는 부분과 기초 부분에서 학습한 내용을 복습할 수 있는 실전 프로젝트로 구성되어 있습니다. 특히 javascript 파트에서는 기초 문법뿐만 아니라 웹페이지 구현에서 자주 사용하는 UI/UX 효과를 구현할 수 있는 간단한 실전 예제와 실전 프로젝트로 구성되어 있습니다.

이 책은 다음과 같이 구성되어 있습니다.
· Part 1 HTML5
· Part 2 CSS 기초
· Part 3 CSS 중급
· Part 4 javascript 기초
· Part 5 javascript 응용
· Part 6 실전 프로젝트

학습 순서는 Part 1부터 순서대로 학습하면 되겠습니다. 처음부터 모든 것을 외워버리겠다고 너무 큰 욕심을 가지고 시작하면 금방 지칠 수 있습니다. 우선 학습을 진행하면서 이렇게 했더니 화면에 이렇게 출력이 되는지 하나씩 확인해가면서 일부 이해가 되지 않는 부분들은 다음 과정으로 넘어가고 일단 진행해봅니다. 그렇게 진행하다 보면 앞부분에서 이해하지 못했던 내용들이 뒷부분의 CSS에서 또는 javascript에서 이해되는 부분들도 많이 있습니다. 그러니 처음부터 과욕을 버리고 차근차근 천천히 학습하시기 바랍니다.

【 대상 독자층 】
- 코딩에 대한 기초가 없는 분.
- 내 손으로 웹페이지를 구성해보고 싶은 분.
- 웹 퍼블리싱 및 프론트엔드 개발 입문자

〈베타 리더 중에서〉
“평소 웹 퍼블리싱에 관심은 많았지만 바쁜 일상으로 인해 엄두를 내지 못했던 분들이 공부하기에 적합한 책이라고 생각합니다.”

“취업을 준비하면 가볍게 CSS 지식을 훑고 지나갈 수 있는 정도의 수준으로 프론트엔드를 준비하는 분들도 필수로 읽으시면 큰 도움을 받을 수 있습니다.”

“감히 웹 퍼블리싱 입문을 위한 현존 최고의 책이라 말씀드리고 싶습니다.”

■ 작가의 말

웹페이지를 개발할 때 필요한 언어와 학습해야 할 기술들은 상상할 수 없을 정도로 많습니다. 하지만 웹페이지를 구성하는 언어를 크게 나누면 방문자들이 최종적으로 보는 화면의 모든 요소를 구현하는 프론트엔드 언어와 방문자에게는 노출되지 않지만, 사용자들이 생성하는 정보가 저장되는 데이터베이스와 그 외 텍스트, 이미지, 영상 등의 콘텐츠 정보를 제공하는 웹 서버 등을 설계하고 관리하는 백엔드 언어가 있습니다. 본 도서는 사용자들이 마지막에 브라우저에서 접하는 화면을 구성하는 가장 기본적인 언어인 HTML, CSS, javascript에 초점을 두고 집필되었습니다.

본 도서를 통해 웹페이지의 내용은 어떻게 구성되고, 그 내용을 기획 의도에 맞게 표현하고, 클릭, 스크롤, 마우스 호버 등 다양한 사용자의 액션에 따라 어떻게 동적으로 상호작용하는지 등의 기본기를 확실하게 학습하실 수 있습니다.

웹개발의 다양한 분야에서 어떤 분야를 목표로 두고 있든 가장 기본이 되는 언어는 HTML, CSS, javascript라고 할 수 있습니다. 이 언어를 숙지하고 있다면 웹개발 프로세스의 이해도가 높은 기획자, 개발에 용이하고 효율적인 디자인을 할 수 있는 디자이너, 백엔드 개발자와 협업이 잘되는 프론트엔드 개발자, 또한 프론트 개발을 이해하는 백엔드 개발자가 되실 수 있습니다. 본 도서를 통해 웹개발의 흥미를 느끼고 기본기가 확실한 인재가 되시길 바랍니다.