안녕하세요!

 

오늘은 웹의 기본적인 개념과 웹 페이지를 만들기 위한 마크업 언어인 HTML을 공부해 보도록 하겠습니다.👻

◻️인터넷과 웹


1. 웹 (WWW - World Wide Web) delivery service

인터넷이라는 인프라 위에서 작동하는 가장 유명한 서비스 중 하나이다.
문서(웹 페이지)를 공유하고 볼 수 있도록 HTTP라는 규칙을 사용하여 정보를 주고 받는다.
고속도로(인터넷) 위를 달리는 '물류배송 서비스'에 비유할 수 있다.

 

2. 인터넷 (Internet) infrastructural highway

1969년 미국 국방성에서 시작된, 전 세계 컴퓨터들을 연결하는 거대한 네트워크(통신망) 자체를 의미
컴퓨터들이 서로를 식별할 수 있도록 각 컴퓨터에 고유 주소(IP 주소)를 부여한다.
인터넷은 '고속도로' 같은 물리적인 인프라에 해당한다.

 

3. 웹의 작동 구조 : 클라이언트와 서버

웹 클라이언트(Web Client)
웹 서버에 예로 "웹 페이지를 보여줘!" 라고 하면 요청(Request)하는 사용자 측 프로그램
대표예시 : 크롬, 사파리, 엣지 같은 웹 브라우저


웹 서버(Web Server)
클라이언트의 요청을 받아, 자신이 저장하고 있는 문서나 이미지 같은 데이터를 응답(Response)으로 보내주는 컴퓨터(소프트웨어)입니다.

4. 동적 웹 처리 : WAS

사용자가 로그인하거나, 검색하는 등 단순 페이지 조회가 아닌 연산이 필요한 요청이 들어올 때, 웹 서버만으로는 부족하여 WAS가 필요하다.

 

4-1 웹 컨테이너(Web Container)

웹 서버가 처리 못하는 동적인 요청을 넘겨받음 => 데이터 처리 및 연산을 수행하는 공간

4-2 WAS (Web Application Server)

웹 서버 + 웹 컨테이너가 합쳐진 형태

정적인 데이터(HTML, CSS, 이미지)는 웹 서버가 처리하고,
동적인 데이터(DB 조회, 연산)는 웹 컨터이너가 처리하여 효율을 높인다.
아파치 톰캣(Apache Tomcat)이 가장 대표적인 WAS이다.

5. 웹 브라우저의 역사

넷스케이프 (Netscape Navigator) : 최초로 대중적인 GUI를 제공하며 웹 시대를 열었다.
인터넷 익스플로러 (IE) : MS 윈도우에 내장되는 전략으로 넷스케이프를 누르고 1차 웹 브라우저 전쟁에서 승리
파이어폭스 (Firefox) : 넷스케이프의 정신을 이어받아 웹 표준을 강조하며 IE의 독주를 견제했습니다.
크롬 (Chrome) : 2008년 구글이 출시한 브라우저로, 빠른 속도와 강력한 개발자 도구를 앞세워 현재 압도적인 1위가 되었다.
사파리 (Safari) & 엣지 (Edge) : 각각 Apple과 MS가 자사 OS를 기반으로 만든 브라우저. 특히 엣지는 IE를 포기하고 크롬과 같은 기반(Chromium)으로 만들어졌다.

 

6. 웹의 성공

웹이 성공할 수 있었던 핵심에는 '팀 버너스리(Tim Berners-Lee)의 철학이 있다.
HTTP (HyperText Transfer Protocol) : 웹 서버와 클라이언트가 통신하는 규칙
비연결성 (Stateless) : HTTP의 가장 큰 특징 중 하나로, 클라이언트가 페이지를 모두 전송받으면 서버와의 연결이 바로 끊어집니다.

장점: 서버가 클라이언트와의 연결을 계속 유지하지 않아도 되므로 서버 부하가 적고, 덕분에 더 많은 동시 접속자를 감당할 수 있게 되었다.

◻️HTML

웹 페이지를 만들기 위한 표준 마크업 언어로, 웹 브라우저가 내용을 구조화하여 표시할 수 있도록 도와준다.

웹 페이지의 뼈대 역할을 하며, 단독으로는 디자인이나 동적인 기능을 제공하지 않지만, CSS로 스타일을 적용하고, JavaScript로 기능을 추가함으로써 풍부하고 인터랙티브한 웹 페이지를 구성할 수 있다. 웹 개발의 기본이 되는 핵심 언어이다.

 

1. HTML 기본 구조

<!DOCTYPE html> <html>
  <head>
    <meta charset="UTF-8"> <title>웹페이지 제목</title> </head>
  
  <body>
    <h1>안녕하세요!</h1>
    <p>웹페이지 방문을 환영합니다.</p>

  </body>
</html>

 

2. 텍스트 관련 태그

제목, 문단, 줄 바꿈 등 텍스트를 구성하는 기본 태그

=> 하지만 우리가 주로 보는 웹페이지 글들은 크기가 다양하다! 이유는 CSS로 주로 수정하기 때문이다.

<h1>가장 큰 제목 (h1)</h1>
<h2>중간 크기 제목 (h2)</h2>
<h3>작은 크기 제목 (h3)</h3>

<p>이것은 첫 번째 문단입니다. 텍스트를 입력할 때 가장 기본이 되는 태그입니다.</p>
<p>이것은 두 번째 문단입니다.</p>

<p>첫 번째 줄입니다.<br>강제로 줄을 바꿨습니다.</p>

 

3.  링크와 이미지

웹 페이지에 다른 페이지로 연결하는 링크를 걸거나 이미지를 삽입할 수 있다.

<a href="https://www.google.com">구글로 이동하기</a>

<a href="https://www.naver.com" target="_blank">네이버로 이동 (새 탭)</a>

<img src="my_image.jpg" alt="내 이미지 설명">

 

4. List(목록)

순서가 있거나 없는 목록을 만들 때 사용한다.

<ul>
  <li>항목 1 (li: List Item)</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

 

5. div, span ( 그룹화)

다른 태그들을 묶어서 레이아웃을 잡거나 특정 부분에만 스타일을 적용할 때 사용할 수 있다.

<div style="border: 1px solid blue;">
  <h2>이것은 div 안의 제목입니다.</h2>
  <p>이 문단도 같은 div 안에 묶여 있습니다.</p>
</div>

<p>
  이 문장에서 <span style="color: red;">이 부분만</span> 스타일을 다르게 적용하고 싶을 때
  <span> 태그를 사용합니다.
</p>

 

'개념 정리 step1 > HTML | CSS' 카테고리의 다른 글

HTML, CSS를 활용해 홈페이지 만들어보기(2)  (1) 2025.11.06
HTML, CSS를 활용해 홈페이지 만들어보기  (0) 2025.11.05

티스토리툴바