웹 서비스의 이해: 웹 생태계부터 웹 브라우저, 그리고 데이터베이스까지(1)-HTML

웹의 이해

인터넷(Internet)

: 전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가진 International Network의 약자

웹(Web)

: World Wide Web, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간

 

웹의 시작

1980년대 스위스 유럽 입자 물리 연구소(CERN)의 컴퓨터과학자 팀 버너스-리에 의해 탄생

연구원들 간 신속한 정보교환을 위해 고안됨

 

웹의 특징

정보를 하이퍼텍스트 형식으로 표현하여 링크를 따라 이동해서 다양한 정보/문서들을 연결, 제공한다.

웹 페이지가 모여 웹 사이트가 된다.

 

웹 브라우저(Web browser)

: 웹 페이지 또는 웹 상의 데이터를 찾거나 읽을 때 사용하는 것

웹의 구조

클라이언트(Client)

: 서비스를 이용(요청)하는 컴퓨터

서버(Server)

:서비스를 제공하는 컴퓨터

 

프로토콜

: 클라이언트와 서버간의 약속

HTTP(Hyper Text Transfer Protocol)

: 인터넷으로 연결된 클라이언트와 서버가 통신할때 사용하는 약속

HTTP를 사용하여 데이터를 주고받음

웹 개발 직무 이해

프론트엔드

웹 서비스(웹 사이트)에서 사용자의 측면(Client-side)의 그래픽 사용자 인터페이스로,

사용자와 상호작용(글자 입력, 버튼 클릭, 화면 출력 등)을 담당한다.

백엔드

웹 서비스(웹 사이트)에서 사용자의 눈에 보이지 않는 서브 측(Server-side),

프론트엔드에서 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 프론트엔드에 결과를 전달함

---

웹 개발을 할 수 있는 유명한 툴

IDE(Integrated Development Environment, 통합 개발 환경)이라고도 부름

✨프론트엔드

HTML의 이해

- 웹 페이지 구성 요소들의 구조

하이퍼텍스트 즉, 웹 페이지를 연결하는 기능을 가진 텍스트이자 웹 페이지의 구조를 명시하는 언어

<>를 사용하고 이를 '태그'라고 부르며 웹 페이지의 구성 요소 하나하나로 역할을 하게 된다.

 

html과 인사하기

<h2> 제목태그. 1이 제일큰 폰트이다.

<br /> 한 줄 띄우는 태그

<a href='링크'> 앵커 링크 태그 사용하기

❄️로그인 페이지 구현해보기

<form> 폼태그 안에 input태그를 넣을 수 있다

<input> 사용자가 직접 입력하여 데이터를 얻을 수 있는 태그

type이 여러가지이고 사용목적에 따라 알맞게 사용할 수 있다.

🔥자주 쓰이는 HTML 태그🔥

CSS의 이해

-웹 페이지 구성 요소들을 꾸밈

JavaScript의 이해

-웹 페이지 구성 요소들에게 동적인 이벤트를 등록함