데브코스 웹풀스택 과정/TIL
[8기 9회차] 0904 웹 서비스의 이해 - 웹 구조, HTML
thinktank911
2025. 9. 4. 09:06
- 웹의 이해
1) 웹의 이해
2) 웹의 구조
3) 웹 개발 직무 이해
1) 웹의 이해
인터넷
- 전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가진 International Network의 약자
"우리는 모두 연결되어 있다"
웹이란?
- 월드와이드웹이란, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간
간단하게 WWW, W3 그리고 월드 와이드 웹을 줄여서 웹이라고도 불린다.
웹의 특징
- 정보를 하이퍼텍스트 형식으로 표현하여, 하이퍼텍스트(링크)를 따라 이동해다양한 정보/문서들을 연결, 제공한다.
- 하이퍼텍스트란, 단순히 글자가 아닌 그 이상의 기능을 가진 텍스트로 주로 링크, 참조의 역할을 하는 기술
웹 페이지 vs 웹 사이트
- 웹으로 된 페이지
- 웹페이지 모아놓은 게 웹 사이트
*웹 페이지 링크 타고 다른 웹 페이지로 이동하는 것을 퓁서핑한다 or 웹 브라우징한다고 표현
웹 브라우저란?
- 어떤 것(=웹 페이지 or 웹상 데이터)을 찾거나 읽을 때 사용하는 것
2) 웹의 구조
클라이언트
- 서비스를 이용하는 (요청하는) 컴퓨터
서버
- 서비스를 제공하는 컴퓨터
클라이어트와 서버 간의 약속, 프로토콜
- 서로 정보를 주고 받을 때에 지켜야 하는 약속이 존재
- 반드시 이 약속을 지켜서 통신해야 하며, 이 약속을 프로토콜이라 부른다.
웹 사용방법
- 인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP(HyperText Transfer Protocol) 사용하여 데이터 주고받음
3) 웹 개발 직무 이해
프론트엔드
- 웹 서비스(웹 사이트)에서 사용자의 측면(Client-side)의 그래픽 사용자 인터페이스로,
사용자와 상호작용(글자 입력, 버튼 클릭, 화면 출력 등)을 담당
백엔드
- 웹 서비스(웹 사이트)에서 사용자의 눈에 보이지 않는 서버 측(Server-side)에서
프론트엔드에서 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 프론트엔드에 결과 전달
- 프론트엔트
1) HTML, CSS, Javascript 소개
웹 구성
- HTML : 웹 페이지 구성 요소들의 구조
- CSS : 웹 페이지 구성 요소들을 꾸밈
- Javascript : 웹 페이지 구성 요소들에게 기능을 추가한다.
HTML의 이해
- HTML이란
- 하이퍼텍스트 즉, 웹 페이지를 연결하는 기능을 가진 텍스트이자 웹페이지의 구조를 명시하는 언어
- Hyper Text Markup Language
- <>를 태그라고 부른다.
- 태그는 웹 페이지 구성 요소 하나하나로 역할을 하게 된다.
<HTML 실습>
