웹이란?
월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공유 시스템을 말한다. 간단히 웹(the Web)이라 부르는 경우가 많다. 이 용어는 인터넷과 동의어로 쓰이는 경우가 많으나 엄격히 말해 서로 다른 개념이다.
출처 - wikipedia
즉, 우리가 흔히 말하는 웹이란 월드 와이드 웹을 의미하고,
웹은 인터넷을 통해 사람들이 정보를 공유할 수 있도록 하는 일종의 도구같은 역할이다.
"인터넷"과 "웹"은 엄연히 다른 개념인 것을 알 수 있다.
웹의 특징으로는 정보를 하이퍼텍스트(=링크)로 표현할 수 있다는 것이다.
사용자들은 하이퍼텍스트를 따라 이동하며 편리하게 정보 및 문서에 접근할 수 있다.
웹의 서비스들을 의미하는 여러 단어들이 있는데, 간단하게 기억하고 있으면 좋을 것 같다.
- 웹페이지 : 하나의 페이지
- 웹사이트 : 웹페이지를 모아놓은 것
- 웹 브라우저 : 웹 서버와 통신하며 사용자에게 GUI를 출력해주는 응용프로그램
(ex. 익스플로러, 크롬, 사파리 등)
웹의 구조
웹의 구조는 대부분 클라이언트-서버 구조를 가지고 있다.
여기서 클라이언트란, 서비스를 요청하는 컴퓨터를 의미하고,
서버는 서비스를 제공하는 컴퓨터라고 생각하면 되겠다.
또한, 클라이언트와 서버가 소통을 할 때에는 특별한 규칙이 있다.
프로토콜이다.
클라이언트와 서버는 이 규칙에 맞추어 메시지(정보)를 주고 받아야 한다.
OSI7계층에 따라, 기능에 따라 엄청나게 다양한 프로토콜이 존재한다.
웹의 대표적인 프로토콜은 HTTP(HyperText Transfer Protocol)이다.
웹 개발 직무
웹 개발에 관심이 있는 사람이라면, 웹 개발 직무에 대해서 들어보았을 것이다.
웹 개발 직무는 대표적으로 2가지이다.
프론트엔드: 프론트엔드는 주로클라이언트측을 중심으로 개발한다. 웹서비스에서 사용자가 이용할 GUI를 구성하고, 어떠한 방식으로 상호작용(ex. 글자입력, 버튼클릭, 화면출력 ) 할 지 담당한다.백엔드: 백엔드는 주로서버측을 중심으로 개발한다. 프론트엔드에서 전달받은 데이터와 요청을 연산을 통하여 처리하고 다시 프론트엔드에 전달한다.
추가적으로 프론트엔드와 백엔드를 모두 다루는 직무는 풀스택 개발자라고 부른다.
우리는 먼저 프론트엔드에 대해서 알아본다.
프론트엔드
프론트엔드에 있어서 필수적인 언어들이 몇가지 있다.
HTML, CSS, Javascript 이다.
- HTML (HyperText Markup Language) : 웹 페이지 구성 요소들의 구조를 담당한다.
ex) 웹페이지의 속성 설정, 아이디칸, 비밀번호칸, 버튼 생성 등 ... - CSS (Cascading Style Sheets) : 웹 페이지 구성 요소들을 보기 쉽게 디자인한다.
ex) 생성한 칸들의 배치, 색상 입히기, 디자인 - Javascript : 웹 페이지 구성 요소들의 동작을 지정한다.
ex) 사용자가 입력한 내용에 반응, 입력받은 데이터를 서버에 전달
시계에 빗대어 보자면,
HTML와 CSS 는 초침, 분침, 시침, 시계의 외관과 같은 역할을 하고
Javascript는 시계 내부 기어와 같은 역할을 한다고 생각하면 될 것 같다.
====================================================
HTML 파일 만들어보기
HTML은 태그 <>라는 기호를 사용한다.
태그의 사용법은 다음과 같다.
1. <태그명>내용</태그명>
2. <태그명>닫는 태그(</태그명>)가 필요한 태그도 존재하고,
닫는 태그가 필요없는 태그도 존재하므로 잘 구분해서 사용한다.
다음은 HTML을 만들어본 예시이다.
<!DOCTYPE html> : 이 문서가 HTML 이라고 알려주는 태그이다. 이 태그가 없으면 HTML이 깨져 보일 수도 있다.
<html></html> : HTML을 작성하기 위해 기본적으로 쓰는 태그이다.
<head></head> : HTML 파일에 대한 속성을 지정한다.
ex) head 부분의 속성
<meta charset="UTF-8"> : 유니코드의 인코딩 방식 지정
<title> 제목 </title> : 웹브라우저의 탭에 보여질 제목 지정
<body></body> : 화면에 보여질 내용
결과는 다음과 같다.
태그의 종류
태그의 종류는 매우 매우 많다.
vscode에 html 파일을 생성하고 태그의 목록만 봐도 엄청나다..
모든 태그를 기억할 필요는 없고, 어떠한 기능을 하는 태그가 있었다라는 눈도장만 찍어놓은 뒤에, 필요할 때 검색해서 사용하면 되겠다.
대표적인 태그를 몇가지 살펴본다.
<title>내용</title> : 위에서 보았던 태그이다. 브라우저 탭의 제목을 결정한다.
<a href=''>이름</a> : 하이퍼링크를 작성하는 태그이다. href에는 링크의 주소가 들어가고, 어떤 이름으로 표시할지 지정한다.
<br/> : 줄바꿈을 하는 태그이다. <br>로도 사용이 가능하다.
<h1>제목</h1> : body 에 보여질 제목을 작성한다. h1~h6까지 크기별로 지정 가능하다.
form : 폼을 생성한다. input과 묶어서 사용하는 경우가 많다.
input : 칸, 란을 생성한다. 속성(input type)을 지정해서 용도에 맞는 input 칸을 만들 수 있다.
이 태그들을 조합하여 로그인을 하는 html의 구조를 만들어본다.
<결과>
현재 form의 세부적인 스타일을 지정하지 않아서 form이 무엇인지 외관상으로는 나타나지 않지만 하나의 폼에 3개의 input(ID, PW, Login)이 묶여있다.
이렇게 HTML로 웹페이지의 대략적인 구조에 대해서 공부해보았다.
앞으로 이 웹페이지를 어떻게 꾸미고, 어떻게 동작시킬지에 대해 공부하는 것에 대해 기대가 된다.
