Do it! HTML+CSS+자바스크립트 웹 표준의 정석: 01. 웹 개발 시작하기, 02. 웹 개발 환경 만들기

첫째마당. 웹 개발 기본 다지기

웹 동작 방식

HTML : 내용 (텍스트, 이미지...) 배치

CSS : 디자인 (색, 정렬, 위치...)

JavaScript : 프로그램 (동적)

01. 웹 개발 시작하기

01-1 웹 개발 알아보기

웹 개발이란?

정적 사이트(static site) : 방문자에게 보여지는 사이트 (html+css)

동적 사이트(dynamic site) : 다양한 서비스를 제공하고, 화면이 움직이는 사이트 (html+css+js)

 

서버와 클라이언트

클라이언트 : (좁은 의미) 웹 브라우저, 사용자가 웹 사이트에 접근할 때 사용하는 기기

서버 : 인터넷에 연결된 컴퓨터, 웹 요소와 여러 정보가 저장됨

 

웹 사이트에서 입력받은 정보를 서버로 전달하고,

서버는 저장된 여러 정보 중에서 로그인을 요청한 사용자의 정보가 있는지 검색,

일치하는 정보가 있으면 성공한 화면 보여줌. (일치하는 정보 없으면 로그인 실패 결과 보여줌)

 

웹 사이트에서 정보 검색, 처리하는 일은 서버가 하고

사용자의 요청을 받아 처리하는 결과는 클라이언트에서 보여준다.

클라이언트는 사용자와 서버 사이에서 화면을 보여주는 역할을 한다.

 

프론트엔드 개발과 백엔드 개발

프론트엔드: 웹 브라우저 화면에 보이는 것 다룸. HTML, CSS, JS

백엔드: 뒤에서 보이지 않는 영역. 정보, 글 등은 서버에 DB 형태로 저장된다.이런 DB를 설계하거나 데이터 처리하는 것이 백엔드 개발 영역. 백엔드 개발에는 Java, PHP, 파이썬 등

 

 

01-2 웹 개발, 어디서부터 시작할까

웹 개발을 위해 공부해야 할 기술

 

웹 개발의 기본 HTML, CSS, 자바스크립트

웹 문서의 뼈대를 만드는 HTML

: 웹 브라우저 창에 웹 문서의 내용을 보여주는 데 필요한 약속

웹 문서를 꾸미는 CSS

: HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치

사용자의 동작에 반응하는 자바스크립트

: 동적인 효과를 사용. 규모가 큰 웹 사이트에서는 리액트, 뷰 같은 JS 프레임 워크를 사용.

 

프론트엔드 개발을 위한 기술

 

백엔드 개발을 위한 기술

 

 

02. 웹 개발 환경 만들기

02-1 웹 브라우저와 웹 편집기

웹 브라우저

웹 개발자가 웹 편집기로 작성한 문서를 화면에 나타내는 프로그램

 

02-2 웹 개발 환경 만들기

.html, .htm 같음

VSCode 설치 후 Extension 설치

! 누르면 자동 완성

 

VSCode에서 alt + L + O 누르면 서버 뜸

l, 1이 구분되는 D2코딩 폰트 추천