ddodoi 님의 블로그
2주차-파트02: 웹 서비스의 이해1 본문
Chapter1. 웹의 이해
인터넷(Internet): 전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가진 International Network의 약자
"우리는 모두 연결되어 있다"
웹(web)이란?
월드 와이드 웹(World Wide Web)이란 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간울 말한다. 간단하게 WWW, W3 그리고 월드 와이드 웹을 줄여서 웹(Web)이라고도 불린다.
-웹(Web)의 시작-
1980년대 어느 날, 스위스의 한 유럽 입자 물리 연구소(CERN)의 컴퓨터과학자 팀 버너스 -리에 의해 탄생하였다. 연구원들 간 신속한 정보교환을 위해 고안 되었다고 한다.
-웹(Web)의 특징-
정보를 *하이퍼텍스트 형식으로 표현하여, 하이퍼텍스트(링크)를 따라 이동하여 다양한 정보/ 문서들을 연결, 제공합니다.
*하이퍼텍스트(hypertext)란, '단순히 글자가 아닌 그 이상의 기능을 가진 텍스트로 주로 링크, 참조의 역할을 하는 기술을 말한다.
웹 페이지 vs 웹 사이트
웹 페이지: 웹 페이지 하나하나를 뜻한다.
웹 사이트: 웹 페이지 한장한장을 엮어서 만든 책 같은게 웹사이트이다.
웹 브라우저(Web browser)란?
어떤 것(=웹 페이지 또는 웹 상의 데이터)을 찾거나 읽을 때 사용하는 것을 우리는 웹 브라우저(Web browser)라 부른다.
ex) 파이어폭스, 인터넷 익스플로러, 크롬...
Chapter2. 웹의 구조
웹의 구조에는 클라이언트와 서버 2가지가 있다.
-클라이언트(Client): 서비스를 이용하는(요청하는) 컴퓨터
-서버(Server): 서비스를 제공하는 컴퓨터
이는 마치 현실 세계에서의 클라이언트(고객)과 서버(종업원)의 관계와도 같다.
-클라이언트와 서버간의 약속, 프로토콜-
프로토콜: 서로 정보를 주고 받을 때에 지켜야 하는 약속이 존재한다. 반드시 이 약속을 지켜서 통신해야 하며, 우리는 이 약속을 프로토콜이라 부른다. (마치 서로 통신할 때 주고 받는 편지가 형식이 정해져 있는 것과 같다)
-우리는 어떻게 웹을 사용하고 있는 걸까?-
인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP(HyperText Transfer Protocol)를 사용하여 데이터를 주고 받는다.
Chapter3. 웹 개발 직무 이해
웹 서비스 개발 직군은 크게 1) 프론트엔드 2) 백엔드로 나뉘어진다.
1) 프론트엔드
웹 서비스(웹 사이트)에서 사용자의 측면(Client-side)의 그래픽 사용자 인터페이스(화면)로, 사용자와 상호작용(글자 입력, 버튼 클릭, 화면 출력 등)을 담당한다.
2)백엔드
웹 서비스(웹 사이트)에서 사용자의 눈에 보이지 않는 서버 측(Server-side)에서 프론트엔드에서 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 프론트엔드에 결과를 전달한다.
프론트엔드와 백엔드의 모식도를 보자.
3) 풀스택
프론트엔드와 백엔드를 둘 다 하는 것
Chapter4. 프론트엔드- HTML, CSS, Javascript 소개
웹은 무엇으로 이루어져 있을까?
프론트엔드는 크게 1) HTML 2) CSS 3) Javascript로 이루어져 있다. 이 세가지가 합쳐져서 하나의 화면을 만들 수 있게 된다.
1) HTML(Hyper Text Markup Language)
하이퍼텍스트 즉, 웹 페이지를 연결하는 기능을 가진 텍스트이자 웹 페이지의 구조를 명시하는 언어이다(웹 페이지 구성 요소들의 구조).
HTML은 <>괄호를 사용한다. 우리는 이걸 태그라고 부른다. 태그는 웹 페이지의 구성 요소 하나하나로 역할을 하게 된다.
2) CSS
웹 페이지 구성 요소들을 꾸밈(html을 꾸며준다)
그러나 현재 이 창에서 이메일과 비밀번호를 입력하고 로그인 버튼을 클릭해도 아무 일이 일어나지 않는다. HTML과 CSS만으로는 액션을 나타낼 수 없다.
3) Javascript
웹 페이지 구성 요소들에게 생명력을 준다. 즉, 액션이 일어나게 된다. 이제 정보를 입력하고 로그인 버튼을 누르면 서버에 로그인을 요청이 일어나도록 기능할 수 있게 해준다.
Chapter5. IDE 개요
웹 개발을 할 수 있는 유명한 툴
= IDE(Integrated Development Environment, 통합 개발 환경) 이라 불린다. 처음부터 끝까지 하나의 프로세스를 관여할 수 있는 하나의 공간이다. 통합적으로 개발을 할 수 있는 환경을 갖추었다.
ex) Visual studio, eclipse, IntellJ IDEA
Chapter6. 첫 HTML파일 만들기
VS code에서 html파일을 만드는 실습을 해보자. 새로운 폴더 WebStart을 만들어 그 안에 html파일을 만들어주었다.
이제 이 파일이 html파일이란 것을 알려주자. 이제 <html>태그 안에서 구현을 하면 된다.
html태그는 크게 두가지로 나누어진다. 1) <head> 와 2) <body> 부분으로 나누어진다.
head 태그에는 html파일에 대한 정보를 적고, body태그에는 화면 부분을 나타낼 것을 적는다.
다음과 같이 head와 body에 각각 적어주었다.
<meta charset="UTF-8">
문자타입으로 UTF-8을 이용하겠다는 뜻이다. UTF-8이라는 코드형식은 한국어가 포함되어있다.
<title>첫번째 HTML</title>
페이지 제목으로 "첫번째 HTML"을 쓰겠다.
<body>Hello, html!</body>
화면에 Hello, html! 이란 글자가 나오게 하겠다.
하얀점은 저장이 되지 않았다는 뜻이다. 이제 ctrl+s로 저장해주고 결과를 보도록 하자. 파일탐색기에서 first.html파일을 찾아 눌러보자.
head에 title태그로 쓴 "첫번째 HTML"이 탭이름에 있고 body태그에 쓴 "Hello, html!"은 화면에 있다.
Chapter7. 자주 쓰는 HTML 태그
HTML 기본 틀
Advanced WEB RANKING웹사이트에서 자주 쓰이는 html태그 순위를 볼 수 있다.
이제 다시 실습으로 돌아와보자.
새로운 go.html파일을 만들고 그 안에 기본양식 틀을 복사해준 뒤 title의 이름을 "Go"로 바꾸었다.
body안에는 h태그를 이용하여 글씨 크기를 조절할 수 있다.
<h1></h1> :제목 태그. h1태그부터 h6까지 있으며 h옆 숫자가 작을수록 태그 사이에 쓴 글자 크기가 커진다.
:
:
<h6></h6>
이제 <a>태그를 추가해보자. a태그는 한 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크의 역할을 하도록 해준다.
그러나 위 코드를 실행시키면 Programmers글자를 클릭해도 하이퍼링크 역할을 하지 못한다.
a태그에는 다양한 속성값을 줄 수 있으며 해당 속성값에 따라 기능이 추가된다. 하이퍼링크의 기능을 줄려면 href속성값을 이용해야한다.
<a href="페이지 링크"></a>: 해당 페이지로 이동한다.
프로그래머스 홈페이지로 링크를 줘보자.
해당코드를 실행시키면 아까와는 다르게 Programmers글자를 누를 수 있게 되며 누르면
프로그래머스 사이트로 이동한다.
이번에는 first.html 페이지로 가도록 새로운 a태그를 만들어보자.
코드를 추가해주었다.
실행시키면 다음과 같은 화면을 볼 수 있다.
My First Page글씨를 누르면 first.html창으로 넘어간다.
그러나 저 두 글자가 붙어있어서 보기 좋지 않으니 이번에는 My First Page글자를 <br>태그를 이용하여 다음 문단으로 옮겨 보겠다.
<br>: 줄바꿈을 생성하는 태그
a태그 사이에 <br>태그를 넣어보자.
잘 넘어간 것을 볼 수 있다.
Chapter8. 로그인 페이지 만들기
이제 로그인 페이지를 만들어보자. 로그인 페이지를 만들 login.html파일을 만들고 아래와 같이 코드를 친다.
<form></form>: 양식을 나타내는 태그이며 실제로는 보이지 않는다.
<input>:입력창이 나타나게 해주는 태그. 사용자한테 입력을 받을 수 있다.
실행해보면 다음과 같은 입력칸이 생긴다.
이제 input이 무얼 입력받을지 지정해주자.
<input type="text"> :input으로 text를 입력받는다.
<input type="password"> :input으로 password를 입력받는다.
실행시키면 <input type="text">태그에는 문자가 입력되고, <input type="password">태그는 실제 비밀번호 입력을 받는 것처럼 입력한 값이 보이지 않는다.
각 입력칸 앞에 id/pw입력받는 창을 구분할 수 있도록 표시를 해주자.
잘 표시된다.
마지막으로 버튼을 만들어보자. html에서는 사용자의 버튼클릭 또한 input으로 생각하기 때문에 버튼도 input태그에 속한다.
<input type="button">: 버튼생성
하지만 위 버튼은 허전하니 버튼안에 글씨를 넣어주자
<input type="button" value="버튼 이름"> : 해당 이름을 가진 버튼을 만들어준다.
login이란 이름의 버튼이 생성되었다!
'웹풀스택 일일정리' 카테고리의 다른 글
| 2주차-파트04: 쇼핑몰 프로젝트 (0) | 2024.08.27 |
|---|---|
| 2주차-파트03: 웹 서비스의 이해2 (0) | 2024.08.25 |
| 2주차 파트-01: 협업 TOOL (0) | 2024.08.22 |
| 1주차-파트06: 브랜치 (0) | 2024.08.20 |
| 1주차-04: 포트폴리오/ 협업 환경 구성(3) (0) | 2024.08.19 |
