웹 개발이나 웹의 동작 원리를 공부하다 보면 "웹 리소스"라는 용어를 자주 접하게 됩니다. 이 개념은 웹의 구조와 작동 방식, 그리고 웹 브라우저와 서버 간의 소통을 이해하는 데 매우 중요한 키워드입니다.
오늘은 웹 리소스가 정확히 무엇인지, 어떤 종류들이 있는지, 그리고 우리가 브라우저에서 어떤 방식으로 그것들을 요청하고 사용하는지에 대해 알아보겠습니다.
🔍 웹 리소스란?
웹 리소스(Web Resource)란 말 그대로 웹에 존재하는 정보 자산을 의미합니다.
예를 들어, 웹 브라우저의 주소창에 다음과 같은 주소를 입력했다고 가정해볼게요.
https://www.naver.com/index.html이 주소는 naver.com 도메인에 위치한 /index.html이라는 웹 리소스를 요청하는 것을 의미합니다. 여기서 /index.html이 바로 웹 리소스입니다.
모든 웹 리소스는 고유한 URI(Uniform Resource Identifier)를 가지며, 이는 웹 상의 자원을 식별하기 위한 표준 방식입니다.
🧱 웹 프론트엔드를 구성하는 주요 웹 리소스
웹을 시각적으로 보여주는 프론트엔드는 다양한 리소스의 조합으로 구성됩니다. 각각의 리소스는 특정한 역할을 가지고 있고, 이들이 함께 작동함으로써 우리가 흔히 접하는 웹사이트가 완성됩니다.
1. 📝 HTML (Hyper Text Markup Language)
HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.
- 제목, 문단, 목록, 이미지 삽입 등 웹 페이지의 기본 골격을 담당합니다.
- 태그(<h1>, <p>, <div> 등)와 속성을 활용해 문서를 구조화합니다.
- 웹 문서의 "뼈대"와 같은 역할을 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 번째 웹 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이 페이지는 HTML로 작성되었습니다.</p>
<img src="hello.png" alt="인사 이미지">
</body>
</html>
2. 🎨 CSS (Cascading Style Sheets)
CSS는 웹 문서의 스타일과 디자인을 지정하는 스타일 시트 언어입니다.
- 색상, 글꼴, 간격, 테두리, 레이아웃 등을 설정합니다.
- HTML 요소에 생김새를 부여해 사용자에게 보기 좋은 화면을 제공합니다.
- "웹 페이지의 피부와 옷"이라고 할 수 있죠.
body {
background-color: #f4f4f4;
font-family: 'Noto Sans', sans-serif;
}3. ⚙️ JavaScript (JS)
JavaScript는 웹 문서에 동작과 반응을 부여하는 스크립트 언어입니다.
- 버튼 클릭 시 알림창을 띄우거나, 입력 폼을 검증하고 서버로 데이터를 전송하는 등의 동적인 기능을 수행합니다.
- 브라우저(클라이언트)에서 실행되기 때문에, Client-Side Script라고도 부릅니다.
- 웹 페이지를 "살아 움직이게" 만드는 역할입니다.
document.getElementById("btn").addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
🖼️ 그 외의 웹 리소스
웹 사이트를 구성하는 건 HTML, CSS, JS뿐만이 아닙니다. 그 외에도 다음과 같은 다양한 리소스들이 함께 사용됩니다:
- 이미지 파일 (JPEG, PNG, SVG 등)
- 영상 파일 (MP4, WebM 등)
- 문서 파일 (PDF, DOC 등)
- 웹 폰트 (woff, ttf 등)
- 오디오 파일 (mp3, wav 등)
- 아이콘, 스크립트 라이브러리, 외부 API 요청 결과 등
이러한 리소스들은 브라우저가 요청하면 서버에서 전송되고, 브라우저는 이를 렌더링(Rendering) 하여 사용자에게 보여줍니다.
웹 리소스는 웹이라는 거대한 공간을 구성하는 기초 블록이자, 사용자의 눈과 손에 닿는 모든 요소의 본질입니다.
웹 사이트에 접속할 때마다 우리는 여러 웹 리소스를 동시에 불러오고 있고, 그 덕분에 우리가 보는 웹페이지가 제대로 작동하고 있습니다. 개발자에게는 단순한 ‘파일’ 그 이상으로, 웹 리소스는 구조, 디자인, 인터랙션을 담당하는 중요한 자산입니다.
👀 네트워크에 관한 다른 내용이 궁금하다면 아래의 포스팅을 추천해요
[네트워크]웹(Web)이란? - 웹의 발전, 보안의 중요성
현대 사회에서 ‘웹’은 단순한 정보 공유 수단을 넘어 우리의 일상을 바꾸는 핵심 기술로 자리 잡았습니다. 이번 글에서는 웹의 개념, 발전 과정, 그리고 웹 보안 및 구조적 개념(프론트엔드와
dev-yeonwha.tistory.com
'네트워크' 카테고리의 다른 글
| [네트워크] 웹 브라우저란? (0) | 2025.03.27 |
|---|---|
| [네트워크] 웹 클라이언트와 서버의 통신 (1) | 2025.03.26 |
| [네트워크]웹(Web)이란? - 웹의 발전, 보안의 중요성 (0) | 2025.03.24 |
| [네트워크] REST API란 무엇인가? (0) | 2025.01.11 |
| [네트워크] HTTPS : 웹 통신 보안 프로토콜 (0) | 2025.01.04 |