1. HyperText
- 문서 안에 다른 문서나 자원으로 연결된 링크(참조) 가 포함된 텍스트 입니다.
- 특징
| 항목 | 설명 |
|---|---|
| 🔗 링크 가능 | 다른 문서나 콘텐츠로 이동할 수 있음 |
| 🌐 비선형 구조 | 순서대로 읽지 않아도 됨 (자유로운 탐색 가능) |
| 📚 정보 연결 | 여러 페이지나 주제를 서로 연결해 큰 정보망을 만듦 |
- HyperMedia:텍스트 + 이미지 + 비디오 등 멀티미디어 요소까지 연결
- 예 위키백과 글(하이퍼텍스트), 유튜브 동영상 내 링크(하이퍼미디어)
2. HTML(HyperText Markup Language)
- 웹 페이지를 만들기 위한 표준 마크업 언어로, 하이퍼텍스트 문서를 작성하고 구조화하기 위한 언어입니다.
- 구성
| 요소 | 설명 |
|---|---|
텍스트 | 사용자에게 보여질 내용 |
태그(tag) | 문서의 구조를 정의 (ex: 제목, 문단, 링크 등) |
속성(attribute) | 태그에 추가 정보를 부여 (ex: href, src, alt) |
- 예시
<!DOCTYPE html>
<html>
<head>
<title>내 첫 웹페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이 페이지는 <a href="about.html">회사 소개</a>로 연결됩니다.</p>
</body>
</html>
<!DOCTYPE html>: HTML5 문서임을 명시
<html>: 전체 HTML 문서의 루트
<head>: 제목, 메타 정보 등 포함
<body>: 화면에 보이는 실제 콘텐츠
<a href="...">: 다른 문서로 이동하는 하이퍼텍스트 링크3. HTTP(HyperText Transfer Protocol)
- 하이퍼텍스트 문서를 웹에서 주고받는 통신 프로토콜
- 웹에서 클라이언트(예: 브라우저)와 서버가 데이터를 주고받는 통신 규약(Protocol)입니다.
- 당신이 웹 브라우저에 주소를 입력하면,
브라우저는 그 주소에 대해 HTTP 요청(request)을 서버에 보냅니다.
서버는 HTTP 응답(response)을 브라우저에 돌려줍니다.
그 응답 안에는 HTML, 이미지, JSON 데이터 등이 들어 있습니다.
-
기본 구조
- HTTP 요청 (Request)GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Chrome/123.0-
HTTP 응답 (Response)
HTTP/1.1 200 OK Content-Type: text/html <html> ... </html>
-
-
특징
| 항목 | 설명 |
|---|---|
| 📡 프로토콜 | 통신 방식의 약속 (규칙)입니다 |
| 🔁 클라이언트-서버 구조 | 클라이언트가 요청하고 서버가 응답합니다 |
| ❌ 상태 비저장(Stateless) | 서버는 이전 요청의 상태를 기억하지 않습니다 |
| 📬 요청 방식 (메서드) | GET, POST, PUT, DELETE 등 |
| 📄 데이터 형식 | HTML, JSON, XML, 이미지 등 전송 가능 |
- 메서드 종류
| 메서드 | 설명 | 예시 |
|---|---|---|
GET | 리소스 조회 | /users/1 |
POST | 새 리소스 생성 | /users |
PUT | 리소스 전체 수정 | /users/1 |
PATCH | 리소스 일부 수정 | /users/1 |
DELETE | 리소스 삭제 | /users/1 |
- 웹 개발
[사용자 브라우저]
↓ HTTP 요청
[웹 서버 - 예: Spring]
↓
[데이터 처리 후]
↑ HTTP 응답 (HTML, JSON 등)
[브라우저 화면에 표시]4. WEB
- 거미줄처럼 연결된 하이퍼텍스트 문서들
안녕하세요.