오늘은 웹이란 무엇이고, 웹 개발의 직무의 간단한 소개와
기초적인 HTML 구조에 대해서 작성해보려고 한다.
웹(Web)의 이해
인터넷(Internet)이란?
인터넷은 전 세계의 모든 컴퓨터를 하나의 통신망으로 연결하는 개념으로,
International Network의 약자이다.
즉, 우리는 인터넷을 통해 모든 사람과 연결될 수 있다.
웹(Web)이란?
월드 와이드 웹(World Wide Web, WWW)은 인터넷에 연결된 컴퓨터를 통해
사람들이 정보를 공유할 수 있는 공간이다.
줄여서 웹(Web)이라고 부르며, 우리가 흔히 사용하는 웹사이트들이 이에 해당한다.
웹의 특징으로는 바로 정보를 하이퍼텍스트(Hypertext) 형식으로 표한한다.
즉, 하이퍼텍스트(링크)를 따라 다양한 정보를 이동하며 문서를 연결하고 제공한다.
하이퍼텍스트란?
: '단순한 텍스트가 아닌, 링크를 통해 다른 문서나 데이터를
참조 할 수 있는 기술' 을 의미한다.
웹 페이지? 웹 사이트?
우리가 흔하게 접하고 말하는 웹 페이지와 웹 사이트라는 단어가 있다.
평소에 말할 때는 어색하지 않게 들리지만 확실한 차이는 있다.
- 웹 페이지: 하나의 독립적인 페이지
- 웹 사이트: 여러 개의 웹 페이지가 모여 하나의 사이트를 구성
웹의 구조
우리가 음식점에 갈때 서빙을 해주는 사람이 있고 주문을 하는 손님이 따로 있듯이 웹도 똑같다.
클라이언트와 서버
- 클라이언트 (Client): 서비스를 이용하는 컴퓨터 (요청을 보내는 쪽, 손님)
- 서버 (Server): 서비스를 제공하는 컴퓨터 (요청을 처리하고 응답을 주는 쪽, 서빙)
클라이언트와 서버 간의 약속 - 프로토콜 (Protocol)
서로 정보를 주고받을 때 반드시 지켜야 하는 규칙이 있으며,
이를 프로토콜(protocol)이라고 부른다.
이는 나중에 더 공부하려고 한다.
우리는 어떻게 웹을 사용할까?
클라이언트와 서버는 웹 프로토콜(HTTP, HyperText Transfer Protocol)을 사용하여 데이터를 주고받으며,
사용자는 웹 브라우저를 통해 이를 확인한다.
웹 개발 직무 이해
웹 개발에 관한 직무라고 하면 크게 프론트엔드와 백엔드로 구분할 수 있다.
프론트엔드 (Frontend)
사용자가 보는 화면을 구성하는 역할로,
HTML, CSS, JavaScript를 사용해 웹 페이지를 만든다.
사용자의 입력을 받고, 시각적인 요소를 조정하며,
인터랙션(버튼 클릭, 데이터 입력 등)을 담당한다.
백엔드 (Backend)
사용자가 보이지 않는 서버 측(Server-side) 개발을 담당한다.
데이터베이스 관리, API 개발, 사용자 인증 등을 수행하며,
프론트엔드와 협력하여 완성된 웹 서비스를 제공한다.
HTML?
우선 HTML이 정의부터 알아보자.
HTML이란?
: HTML(HyperText Markup Language)은
웹 페이지의 구조를 만드는 마크업 언어이다.
즉, 웹 페이지의 뼈대를 담당하며,
모든 콘텐츠(텍스트, 이미지, 링크 등)를 정의한다.
더 짧게 정리하면 웹 페이지의 뼈대이다.
또한 HTML에서 뼈대를 잡기위해선 태그(Tag)를 사용해야한다.
HTML 태그(Tag)
HTML은 <> 괄호를 사용하여 태그를 만든다.
태그는 웹 페이지의 각 요소를 정의하는 역할을 한다.
<p>이것은 단락(paragraph) 태그</p>
<a href="https://example.com">이것은 링크(anchor) 태그</a>대부분의 HTML 태그는 여는 태그와 닫는 태그가 한 쌍으로 이루어진다.
하지만 <img> 같은 일부 태그는 닫는 태그 없이 단독으로도 사용된다.
태그에 대해 소개해봤으니
자주 사용하는 태그들도 알아보자.
자주 사용하는 HTML 태그들
위 사진을 참고해보면 제일 많이 사용되는 태그는
반드시 사용해야할 <html> 태그와 <head> 태그이다.
태그들을 하나하나 설명하는 것은 너무 글이 길어지므로
예시를 통해 설명하는게 좋을 것 같다.
<!DOCTYPE html>
<html>
<head>
<title> Example </title>
<meta charset="UTF-8">
</head>
<body>
<h1>Login</h1>
<form>
ID: <input type="text">
<br>
PW: <input type="password">
<br>
<input type="button" value="login">
</form>
</body>
</html>위는 정말 간단하게 작성한 HTML의 구조이다.
우리가 화면을 통해 보는 부분은 바로 <body> 부분이다.
h 태그
<h1> 제목 </h1>
<h2> 소제목1 </h2>
<h3> 소제목2 </h3>
<h4> 소제목3 </h4>
<h5> 소제목4 </h5>
<h6> 소제목5 </h6><h> 태그는 웹 페이지의 제목으로
뒤 숫자를 통해 depth를 다르게 설정할 수 있다.
제일 윗 번호인 1 즉, <h1> 태그는 웹 페이지에 1개만 있어야한다.
input 태그
우리는 웹을 보기만 하지 않는다.
입력을 하기도 하고, 버튼을 클릭하기도 하는 등
여러 값을 입력하고 전송한다.
이에 필요한 태그가 바로 <input> 이다.
간단하게 <input> 은 로그인을 하기위해 아이디를 입력하는 곳 이다.
위 예시로 보아 <input> 의 타입이 많아보인다.
당장 예시에도 text, password, button가 있다.
실제로도 <input> 의 타입은 많다.
더 자세한 <input> 의 타입이 궁금하다면
아래의 링크에서 찾으면 된다.
위 예제를 작성한 실제 HTML을 실행시켜보면
어떻게 보일까?
Login이라는 제목이 보이고
ID와 PW를 입력받는 입력창이 보이며,
login으로 넘어가는 버튼이 보인다.
벌써 간단한 태그 몇 개로 로그인 화면이 만들어졌다.
하지만 아직 보기에 예쁘지 않고, login 버튼을 누른다고
기능이 있는 것도 아니다.
웹 페이지의 구조를 만들어보았다.
TIL
오늘은 웹이 무엇인지, HTML의 기본 틀과 태그 등에 대해 알아보았다.
이미 알고 있던 내용이지만 뭔가 다시 상기되었다.
