목요일 학습 시작
[목차]
Chapter 1. 웹의 이해
Chapter 2. 웹의 구조
Chapter 3. 웹 개발 직무 이해
Chapter 4. 프론트엔드 3대장
Chapter 5. [예제로 배우는] HTML의 이해
Chapter 6. [예제로 배우는] CSS의 이해
Chapter 7. [예제로 배우는] JavaScript의 이해
웹의 이해
인터넷(Internet)
전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가진 International Network의 약자
"우리는 모두 연결되어 있다"
웹(web)이란?
월드 와이 웹 (World Wide Web)이란, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간을 말합니다.
간단하게 www, w3 그리고 월드 와이드 웹을 줄여서 웹(Web)이라고도 불립니다.
웹(Web)의 시작
1980년대 어느 날, 스위스의 한 유럽 입자 물리 연구소의 컴퓨터과학자 팀 버너스-리에 의해 탄생합니다.
연구원들 간 신속한 정보교환을 위해 고안 되었다고 합니다.
*웹의 탄생 배경은 페이스북의 탄생 배경과 비슷하다 (옆의 연구실 친구랑 대화하기 귀찮아서 고안한..)
웹(Web)의 특징
정보를 하이퍼텍스트 형식으로 표현하여, 하이퍼텍스트(링크)를 따라 이동하며 다양한 정보/문서들을 연결, 제공합니다.
*하이퍼텍스(hypertext)란, '단순히 글자가 아닌 그 이상의 기능을 가진 텍스트'로 주로 링크, 참조의 역할을 하는 기술을 말합니다.
웹 페이지 vs 웹 사이트
웹 페이지는 페이지 하나하나 라면 웹 사이트는 웹 페이지들을 모아둔 책같은 느낌이라고 보시면 된다.
*웹 페이지 링크를 타고 다른 웹 페이지를 이동하는 것을 '웹 서핑을 한다' 또는 '웹 브라우징을 한다'고 표현합니다.
웹 브라우저(Web browser)란?
즉, 어떤 것(=웹 페이지 또는 웹 상의 데이터)을 찾거나 읽을 때 사용하는 것을 우리는 웹 브라우저(Web browser)라고 부릅니다.
웹 브라우저는 브라우즈를 위해 사용하는 어떠한 프로그램인 것 입니다.
즉 웹을 서핑하기 위해서 브라우즈, 즉 데이터를 찾고, 웹을 찾고, 웹 페이지를 읽고 할 때 사용하는것을 웹 브라우저라고 합니다.
ex) 사파리, 크롬, 인터넷익스플로어, 파이어폭스, 등등
웹의 구조
클라이언트와 서버
클라이언트(Client) : 서비스를 이용하는 (요청하는) 컴퓨터
서버(Server) : 서비스를 제공하는 컴퓨터
즉 하나의 컴퓨터가 서비스를 요청하는 역할을 한다면
요청하는 서비스를 대응하고 제공해주는 또 다른 컴퓨터를 서버라고 부른다.
ex) *고객이 메뉴를 주문하면 그걸 받는 사람 서버가 있는것 처럼
*현실 세게의 클라이언트와 서버 의미와 동일합니다.
그렇다면 서로 통신을 어떻게 할까?
클라이언트와 서버 간의 약속, 프로토콜
서로 정보를 주고 받을 때에 지켜야 하는 약속이 존재합니다.
반드시 이 약속을 지켜서 통신해야 하며, 우리는 이 약속을 "프로토콜"이라 부릅니다.
우리는 어떻게 웹을 사용하고 있는 걸까?
인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP(HyperText Transfer Protocol)를 사용하여 데이터를 주고 받습니다.
고객(내 컴퓨터)이 요청하는 사이트(쇼핑몰, 등등)에서 회사의 서버역할을 하는 컴퓨터에 요청!
이 요청을 회사 컴퓨터에 통신을하기 위해 사용되는 것이 인터넷입니다.
웹은 인터넷으로 연결된 사용자들이 정보를 공유할수 있는 공간
즉, 평소에 우리가 서비스나 요청을 요구할때, 내 컴퓨터에서는
인터넷을 통해 클라이언트와 서버가 통신을 하고 있던 것 입니다.
웹의 개발 직무 이해
지금까지 웹에 대한 이해와, 구조(클라이언트와 서버)를 알았다면
어떤 직무가 있는지 알아보자(뭘 해야 하는 가?)
우리가 개발하는 웹 서비스를 인간이 어디까지 케어를 해야 하는 가?
하나의 웹 서비스를 만들때 총 흐름
프론트엔드
웹 서비스(웹 사이트)에서 사용자의 측면(Client-side)의 그래픽 사용자 인터페이스(화면)로,
사용자와 상호작용(글자 입력, 버튼 클릭, 화면 출력 등)을 담당합니다.
클라이언트 쪽 개발, 프론트엔드 웹 개발 서비스 앞단에 서 있다. 라는 뜻을 가지고 있다.
백엔드
웹 서비스(웹 사이트)에서 사용자의 눈에 보이지 않는 서버 측(Server-side)에서
프론트엔드에서 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 프론트엔드에 결과를 전달합니다.
프론트엔드와 백엔드는 이렇게 일을 합니다.
프론트엔드 개발자는 고객이 서비스를 "요청"하는 화면을 구현한다면
백엔드 개발자는 요청을 받는 서버쪽에서 "제공"할 서비스를 구현한다고 생각하면 된다.
프론트엔드 3대장
웹은 무엇으로 이루어져 있을까?
HTML + CSS + Javascript
HTML : 웹 페이지 구성 요소들의 구조
정말로 단순히 구성 요소들로만 이루어져있다면
HTML + CSS : 웹 페이지 구성 요소들을 꾸밈
Javascript : 웹 페이지 구성 요소들에게 생명력을 주는 역할
[예제로 배우는] HTML의 이해
우리는 웹 개발을 어디서 할까?
도자기 공방, 가죽 공방이 존재하듯이
웹서비스를 개발을 하기 위해서, 프로그래밍을 하기 위해서 컴퓨터 안에 공방을 만들어 두었다.
하나의 프로그램 안에서 서비스를 처음부터 끝까지 완성을 할수 있기에 또 다른 공방이라고 생각할수 있다.
웹 개발을 할 수 있는 유명한 툴
= IDE (Integrated Development Environment, 통합 개발 환경) 이라고도 불립니다.
처음부터 끝까지 프로세스를 관할을 할 수 있는 하나의 공간
즉, 통합적으로 개발을 할 수 있는 환경을 갖추었다 라고 해서 IDE 라고 불립니다.
하이퍼텍스트 즉, 웹 페이지를 연결하는 기능을 가진 텍스트이자 웹페이지의 구조를 명시하는 언어입니다.
텍스트 이상의 기능을 하는, 즉 다른 페이지로 링크를 해주는, Hyper Text Markup Language
HTML 은<> 괄호를 사용합니다. 우리는 이걸 태그라고 부릅니다.
태그는 웹 페이지의 구성 요소 하나하나로 역할을 하게 됩니다.
<태그> 감싸진 글자가 그 태그의 역할을 맡습니다. </태그>
* 여는 태그와 닫는 태그가 한 쌍일 수도 있고, 닫는 태그 없이 여는 태그가 단독으로 쓰이는 경우도 있습니다.
<!DOCTYPE html>
다큐먼트 타입 html
이문서의 타입은 HTML 입니다.
<head></head>
head 에는 이 문서(html파일)에 대한 정보를 적어준다.
<meta charset="UTF-8">
meta태그 이 문서의 정보를 적어주는 태그가 있다.
보통 여기엔 이 문서의 문자는 URF-8이라는 것으로 이루어져 있음을 알려준다.
<title></title>
<body></body>
화면에 뿌려지는 공간
Hello, HTML! 이 화면에 출력되는것을 확인 가능하다.
해딩의 약자 h 와 숫자가 붙어있는 태그
제목을 적는 태그
<a></a>
Anchor 앵커라는 단어의 약자, 닻이라는 뜻을 가지고 있다. 닻을 내려 다른 페이지로 가겠다! 라는 뜻을 가지고 있다.
*배가 어디에 정박을 할때 닻을 내리는 행위, 난 이제 다른 곳으로 가겠다!\
링크를 걸어 내가 이동할 페이지, 공간의 좌표라 생각하시면 된다! 게임으로 치면 ~로 통하는 포털 같은 느
<br>
엔터값을 갖는 태그
ㅋㅋㅋ 그냥 나란히 있던 글을 밑으로 내리는 느낌?
<form>
<input> 사용자에게 입력 받을 수 있는 모든 역할을 할수 있다.
</form>
input아 너의 역할은 text를 받는 역할이란다.
<input type ="text">
<br>
input아 너는 password를 적는 역할이란다.
<input type = "password">
<input type = "button" value="로그인">
너의 타입은 버튼 타입이고 value 속성을 사용해서 값을 넣어줄수 있다. "로그인" 이라는 글자 값을
input 을 text로 받을때 와 pw를 받을때
버튼에 속성값을 넣어줬을때
오늘 학습은~
여기까지
'pgms' 카테고리의 다른 글
| [2주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 8 (0) | 2026.01.12 |
|---|---|
| [1주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 7 (0) | 2026.01.09 |
| [1주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 5 (5) | 2026.01.07 |
| [1주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 4 (0) | 2026.01.06 |
| [1주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 3 (0) | 2026.01.05 |