[ HTML+CSS+자바스크립트 웹 표준의 정석] 1장, 2장

01. 웹 개발 시작하기
02. 웹 개발 환경 만들기
03. HTML 기본 문서 만들기
04. 다양한 내용 입력하기
05. 입력 양식 작성하기
06. CSS 기본
07. 텍스트를 표현하는 다양한 스타일
08. 레이아웃을 구성하는 CSS 박스 모델
09. 이미지와 그러데이션 효과로 배경 꾸미기(1~7페이지)
10. CSS 고급 선택자
11. 트랜지션과 애니메이션

---

01. 웹 개발 시작하기

웹 개발은 브라우저 화면에 보이는 겉모습을 만드는 게 전부가 아님. 웹 사이트에서 사용자에게 제공할 기능, 서비스까지 모두 담아야 함.

*서버 vs 클라이언트

클라이언트는 사용자가 웹 사이트에 접근할 때 사용하는 기기, 좁은 의미로는 웹 브라우저를 나타낸다.

서버는 인터넷에 연결된 컴퓨터로, 웹 요소와 여러 정보가 저장된다.

만약 클라이언트 쪽에서 로그인을 한다면, 웹 브라우저를 통해 서버에게 필요한 정보를 요청한다. 서버는 요청을 처리해서 클라이언트에게 알맞은 정보를 전달한다.

*프런트엔드 개발 vs 백엔드 개발

프런트엔드 개발에서는 웹 브라우저 화면에 보이는 부분을 다룬다. 웹 사이트를 제작하는 것이다. HTML, CSS, 자바스크립트를 사용한다.

백엔드 개발은 사용자 뒤에서 보이지 않는 영역, 즉 서버를 다룬다. 데이터베이스를 설계하거나 데이터를 처리한다. 자바, PHP, 파이썬 등 프로그래밍 언어를 사용한다.



웹 개발을 위해 공부해야 할 기술 중 기본 영역에는 HTML, CSS, 자바스크립트, 깃/깃허브가 있다.

프런트엔드 쪽으로 가면 다양한 라이브러리에는 제이쿼리, D3.js, 부트스트랩이 있고, 프레임워크에는 리액트, 앵귤러, 뷰 등이 있다.

백엔드 영역으로는 리눅스 서버, 네트워크, 데이터베이스 구축 기술이 필요하다. 서버 언어에는 파이썬, 자바, PHP, 닷넷 등이 있고, 프레임워크에는 노드제이에스, 스프링, 장고, 코드이그나이터 등이 있다.

<웹 개발의 기본>

HTML: 웹 문서의 뼈대를 만듦.
웹 브라우저 창에 웹 문서의 내용을 보여주기 위한 약속이다. HTML에서 약속한 표기법을 사용해서 문서를 작성해야 한다.

CSS: 웹 문서를 꾸밈.
웹 문서를 꾸미거나 웹 요소를 적절하게 배치하는 방법이다. 다양한 디바이스에 맞는 반응형 웹 디자인을 만들기 위해 필수적으로 학습해야 한다

자바스크립트: 사용자 동작에 반응하게 함.
사용자 동작이 반응해서 동적인 효과를 만들기 위한 기술이다. 이 자바스크립트를 알고 있다면, 새로운 프레임워크를 배우기 쉽다.

<프런트엔드 개발을 위한 기술>

* 라이브러리
제이쿼리(jQuery): DOM을 활용

D3.js: 웹 브라우저에서 실시간으로 변하는 정보를 시각적으로 표시하기에 적합한 라이브러리 도구. 이거 외에도 라파엘, Three.js 등이 있음.

부트스트랩(Bootstrap): 웹 사이트 디자인을 쉽게 만들어줌. CSS로 PC, 태블릿, 휴대전화 등에서 동작하는 반응형 디자인을 만들 수 있게 해줌.

* 프레임워크
리액트(React): 페이스북처럼 한 화면에서 모든 내용을 볼 수 있는 사이트를 SPA(single page application)이라고 하는데, 이렇게 복잡한 사이트를 개발할 때 사용하는 프레임워크이다. 페이스북에서 개발했다.

앵귤러(Angular): 구글에서 개발했다. 웹 애플리케이션을 제작하는 프레임워크.

뷰(Vue): 웹 애플리케이션에서 사용자 인터페이스를 만드는 프레임워크. 화면에 보이는 부분에만 초점을 맞춤. 다른 라이브러리,프레임워크와 함께 사용할 수 있음.

<백엔드 개발을 위한 기술>

노드제이에스, 익스프레스: Node.js는 서버에서 자바스크립트를 실행할 수 있는 환경. 플랫폼.

자바, 스프링

파이썬, 장고: 데이터를 많이 다뤄야 하는 분야에서는 파이썬 쓰는게 유리함.

PHP, 코드이그나이터: PHP는 백엔드 개발에서 오랫동안 사용된 개발 언어임.

---

02. 웹 개발 환경 만들기

웹 브라우저는 크롬(구글), 엣지(마이크로소프트), 파이어폭스(모질라) 등이 있다.

웹 편집기로는 visual studio code를 쓴다. 무료 소프트웨어이고, 플랫폼에 구애받지 않는다. 또한 파이썬, node.js도 작성 가능하다.

웹 문서는 웹 편집기에서 작성하고, 웹 브라우저에서 확인한다.