2024년 8월 20일
✏️ Web
💡 인터넷(Internet)
: 전세계가 연결된 하나의 통신망(International Network)
💡 웹(Web)
: 인터넷에 연결된 컴퓨터를 통해 정보를 공유하는 공간 / WWW(World Wide Web), W3라고도 부름
-
웹의 시작
: 1980년대 어느날, 팀 버너스리가 연구원들 간 빠른 정보교환을 위해 만들어졌다가 탄생됨 -
웹의 특징
: 하이퍼텍스트형식으로 표현하고, 하이퍼텍스트(링크)를 따라 이동하며 다양한 정보와 문서들을 연결하고 제공함
*하이퍼텍스트(단순히 글자가 아니라 그 이상의 기능을 가진 텍스트. 링크, 참조의 역할) -
웹페이지 vs 웹사이트
- 웹페이지 : 페이지 하나하나
- 웹사이트 : 페이지를 묶은 것
-
웹서핑 : 링크를 타고 다른 웹페이지로 이동 / 웹브라우징이라고도 함
-
웹브라우저 : 웹페이지 또는 웹상의 데이터를 찾거나 읽을 때 사용
ex) 사파리, 크롬, 엣지 등
✏️ Web의 구조
💡 클라이언트
: Client
서비스를 요청하는 컴퓨터
💡 서버
: Server
서비스를 제공하는 컴퓨터
💡 프로토콜
: Protocol
클라이언트와 서버 간 통신시 지켜야할 약속
❗️인터넷으로 연결된 클라이언트와 서버는 웹프로토콜(HTTP)를 사용해 데이터를 주고 받음
*HTTP: Hyper Text Transfer Protocol
✏️ Web개발 직무 이해
: 우리가 개발하는 웹서비스는 인터넷을 제외하고 2가지로 나뉨
💡 프론트엔드
: 웹사이트에서 클라이언트 측면에서의 그래픽 사용자 인터페이스로, 사용자와의 커뮤니케이션을 담당
ex) 글자입력, 버튼클릭, 팝업생성, 등
💡 백엔드
: 웹사이트에서 서버 측면에서 프론트엔드에서 전달받은 데이터와 요청을 내부 데이터와 연산을 통해 처리하고 프론트엔드에 다시 결과를 전달
ex) 프론트엔드에서 api요청하면 데이터를 다시 클라이언트측에 보내줌
✏️ HTML, CSS, Javascript
💡 HTML
: Hyper Text Markup Language / 웹페이지 요소들의 구조
- 웹페이지를 연결하는 기능을 가진 텍스트 및 구조를 나타냄
- 태그사용 <></>
- 태그는 여는 태그와 닫는 태그가 한 쌍일 수도 있고 아닐 수도 있음
💡 CSS
: 웹페이지 요소들을 꾸밈
💡 Javascript
: 웹페이지 요소들을 동적으로 만듦
✏️ IDE
: Integrated Development Environment / 통합 개발 환경
웹개발을 할 수 있는 툴을 말함
ex) VScode, eclipse, interi
🍎🍏 HTML 실습
-
a태그를 만들어 웹페이지 연결
-
로그인화면 만들기
