웹 서비스 개발의 이해와 실습
Part1. 웹의 이해
chap1. 웹의 이해
chap2. 웹의 구조
chap3. 웹 개발 직무 이해
chapter1. 웹의 이해
인터넷(internet)
전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가진 international network의 약자
"우리는 모두 연결되어 있다"
(인터넷과 웹은 다른 것!)
웹(Web)이란?
월드 와이드 웹(World Wide Wed)이란, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간을 말합니다.
간단하게 WWW, W3 그리고 월드 와이드 웹을 줄여서 웹(Web)이라고도 부릅니다.
웹(Web)의 시작
1980년대 어느 날, 스위스의 한 유럽 입자 물리 연구(CERN)의 컴퓨터과학자 팀 버너스리에 의해 탄생
연구원들 간 신속한 정보교환을 위해 고안됨.
웹(Web)의 특징
정보를 하이퍼텍스트 형식으로 표현하여, 하이퍼텍스트(링크)를 따라 이동하며 다양한 정보/문서들을 연결, 제공합니다.
*하이퍼텍스트(hypertext)란, '단순히 글자가 아닌 그 이상의 기능을 가진 텍스트'로, 주로 링크, 참조의 역할을 하는 기술을 말한다.
웹 페이지 vs 웹 사이트
*웹 페이지 링크를 타고 다른 웹 페이지로 이동하는 것을 '웹 서핑을 한다.' 또는 '웹 브라우징을 한다'고 표현합니다.
웹페이지 하나하나를 엮어서 만든 것을 웹 사이트라고 부름
웹 브라우저(Web browser)란?
어떤 것(=웹 페이지 또는 웹 상의 데이터)를 찾거나 읽을 때 사용하는 것을 우리는 웹 브라우저(Web browser)라고 부릅니다.
ex) 크롬, 사파리, 인터넷 익스플로러 등
클라이언트와 서버
클라이언트(client) : 서비스를 이용하는(요청하는) 컴퓨터
서버(server) : 서비스를 제공하는 컴퓨터
클라이언트와 서버 간의 약속, 프로토콜
(서버와 클라이언트가 정보를 주고받을 때)
서로 정보를 주고 받을 때에 지켜야 하는 약속이 존재합니다. 반드시 이 약속을 지켜서 통신해야 하며, 우리는 이 약속을 프로토콜이라고 합니다.
우리는 웹을 어떻게 사용하고 있는 걸까요?
인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP(HyperText Transfer Protocol)을 사용하여 데이터를 주고 받습니다.
chapter3. 웹 개발 직무 이해
프론트엔드
: 웹 서비스(웹 사이트)에서 사용자의 측면(Client-side)의 그래픽 사용자 인터페이스로, 사용자와 상호작용(글자 입력, 버튼 클릭, 화면 출력 등)을 담당합니다.
: 웹 서비스의 앞단에 서 있다.
백엔드
: 웹 서비스(웹 사이트)에서 사용자의 눈에 보이지 않는 서버 측(Server-side)에서 프론트엔드에서 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 프론트엔드에 결과를 전달합니다.
Part2. 프론트엔드
[목차]
chap4. 프론트엔드 3대장
chap5. HTML의 이해
chap6. CSS의 이해
chap7. Javascript의 이해
웹은 무엇으로 이루어져 있을까?
HTML + CSS + javascript
- HTML : 웹 페이지 구성 요소들의 구조
- CSS : 웹 페이지 구성 요소들을 꾸밈(HTML 꾸밈)
- Javascript : 웹 페이지 구성 요소들에게 생명력을 줌(동작하도록 만듦)
chap5. Html의 이해(예제)
도자기공방에서 도자기를 만들 수 있듯 우리도 웹 개발을 할 수 있는 공간이 있다.
-> 웹 개발을 할 수 있는 유명한 툴
= IDE(integrated Development Environment, 통합 개발 환경)이라고도 불립니다.
예시 : 이클립스, 인텔리J, vscode
-> 첫 HTML 파일 만들기
HTML이란?
하이퍼텍스트, 즉, 웹페이지를 연결하는 기능을 가진 텍스트이자 웹 페이지의 구조를 명시하는 언어
HTML에서는 <>괄호를 사용합니다. 우리는 이걸 태그라고 부릅니다. 태그는 웹 페이지의 구성 요소 하나하나로 역할을 하게 됩니다.
<태그>감싸진 글자가 그 태그의 역할을 맡습니다.</태그>
자주 쓰는 HTML 태그
advanced web ranking site : 가장 많이 사용되는 태그를 볼 수 있음
-> go.html파일 만들어서 자주 쓰이는 태그 코드 입력
<h1>page</h1>
: hypertext태그라는 뜻. 일반적인 타이틀(헤더)를 말함. h2~h4..정도까지 쓸 수 있음. 숫자가 작아질수록 글자 크기가 줄어듦.
<a>page</a>
: a태그. anchor(닻)을 줄여서 말함. 닻을 내려서 다른 페이지로 넘어간다~ 라고 이해할 수 있음. 일단 page라는 단어가 생김.
<a href="">page</a>
: a태그에 속성 부여. href는 hypertext의 reference라는 뜻. 큰따옴표 속에 목적지 링크를 넣으면 page라는 링크를 눌렀을 때 목적지 링크로 이동함.
<br>
: 줄바꿈 태그. break의 줄임말.
로그인 페이지 만들기
태그 설명
1. <form></form>
: 우리가 form을 통해 설문조사를 하듯이 값을 받아주는 폼이라고 생각하기
2.<input type="text">
: form태그 안에 빈칸입력 박스를 만들어주는 태그. type을 "text"라고 설정하면 박스에 텍스트를 입력할 수 있다.
3. <input type="password">
: type을 "password"라고 설정하면 박스에 입력 시 패스워드 모양(동그라미)로 나타난다.
4. <input type="button" value="login">
: 버튼 만들고 버튼 이름을 로그인이라고 명명할 수 있다.
과제제출!!
