-
1. HyperText (하이퍼텍스트)
-
1.1 HyperText의 개념
-
1.2 HyperText의 특징
-
1.3 HyperText의 구성 요소
-
2. WWW (World Wide Web)
-
2.1 WWW의 정의
-
2.2. WWW의 구성 요소
-
2.3 WWW의 작동 원리
-
3. HTML (HyperText MarkuP Language)
-
3.1 HTML의 정의
-
3.2 HTML의 기본 구조
-
3.3 HTML의 주요 구성 요소
-
3.4 HTML의 주요 태그
-
3.5 HTML 실제 예제
-
4. URL (Uniform Resource Locator)
-
4.1 URL의 정의
-
4.2 URL의 구성 요소
-
4.3 URL의 작동 방식
1. HyperText (하이퍼텍스트)
HyperText는 텍스트 기반 정보 표현 방식 중 하나로, 연결성과 비선형성을 특징으로 한다.
문서 내 텍스트에서 다른 문서나 리소스로 이동할 수 있는 링크(연결 고리)를 제공한다.
1.1 HyperText의 개념
- 정의: 하이퍼텍스트는 특정 단어나 구문을 클릭했을 때, 관련1된 다른 텍스트나 리소스에 연결되는 방식으로 작성된 텍스트
- 비선형성: 사용자가 문서를 읽는 순서를 강제하지 않고, 자유롭게 이동할 수 있도록 설계되어 있음.
- 인터랙티브성: 사용자가 원하는 정보에 즉시 접근할 수 있는 인터페이스를 제공함.
1.2 HyperText의 특징
1. 비선형 구조
- 정보를 순차적을 읽을 필요 없이, 사용자가 원하는 정보를 자유롭게 탐색 가능
- 예: 웹 브라우징, 위키백과
2. 상호 연결성
- 문서 간 하이퍼링크를 통해 정보의 관계를 구축
- 하이퍼링크는 다른 문서뿐만 아니라 이미지, 비디오, 오디오 등 다양한 리소스를 포함할 수 있음.
3. 사용자 주도 탐색
- 사용자가 직접 링크를 선택해 정보 흐름을 제어
- 능동적인 정보 탐색 가능
4. 다양한 매체와 결합 가능
- 하이퍼텍스트는 하이퍼미디어의 기반으로, 텍스트 외에도 멀티미디어를 포함할 수 있음.
1.3 HyperText의 구성 요소
1. Anchor (링크)
- 하이퍼텍스트의 핵심 요소로, 한 문서에서 다른 문서로 연결.
- HTML에서는 <a> 태그를 사용해 구현. (<a href="https://example.com">Example</a>)
2. Node (노드)
- 하나의 정보 단위. 텍스트, 이미지, 비디오 등 모든 형태가 가능
- 예: 웹 페이지
3. Link (링크)
- 노드 간의 연결을 제공.
- 사용자가 문서를 이동하거나 다른 리소스를 불러오게 하는 역할.
2. WWW (World Wide Web)
World Wide Web (월드 와이드 웹)은 인터넷 상의 정보와 자원을 연결하고 이를 텍스트, 이미지, 비디오 등 다양한 형식으로 제공하는 정보 시스템이다.
2.1 WWW의 정의
- 월드 와이드 웹은 인터넷 상에서 하이퍼텍스트와 하이퍼미디어를 사용해 문서를 연결하고 탐색할 수 있도록 설계된 글로벌 정보 공간
- WWW는 인터넷과 동일하지 않음. 인터넷은 물리적 네트워크와 인프라를 의미하며, WWW는 그 위에서 작동하는 하나의 서비스
2.2. WWW의 구성 요소
1. HTML (HyperText Markup Language)
- 웹 페이지를 작성하기 위한 마크업 언어
- 텍스트, 이미지, 하이퍼링크 등을 구조화하여 표시
<html>
<head>
<title>예제 웹 페이지</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>이것은 예제 웹 페이지입니다.</p>
<a href="https://example.com">더 알아보기</a>
</body>
</html>
2. HTTP (HyperText Transfer Protocol)
- 웹 브라우저와 웹 서버 간에 데이터를 주고받기 위한 통신 프로토콜
- 요청(request)과 응답(response)의 형태로 작동
3. URI (Uniform Resource Indetifier)
- 웹 상의 자원을 고유하게 식별하기 위한 주소 체계
- URL은 URI의 한 형태로, 특정 웹 페이지의 위치를 나타낸다.
- 예: https://example.com
2.3 WWW의 작동 원리
1. 사용자가 웹 브라우저에서 URL 입력:
- 예: https:// example.com
2. DNS 조회:
- URL에 해당하는 도메인 이름(예: example.com)을 IP주소로 변환.
3. HTTP 요청:
- 웹 브라우저가 해당 서버로 HTTP 요청을 보냄.
4. 서버 응답:
- 요청받은 리소스(예: HTML 파일, 이미지 등)를 웹 브라우저로 전송
5. 브라우저가 렌더링:
- 전송받은 데이터를 화면에 표시
3. HTML (HyperText MarkuP Language)
HTML은 웹페이지의 구조와 내용을 정의하는 마크업 언어이다. 웹 브라우저는 HTML 문서를 해석하여 사용자가 볼 수 있는 텍스트, 이미지, 링크, 비디오 등의 콘텐츠를 화면에 표시한다.
3.1 HTML의 정의
- HTML은 웹 문서를 구성하는 뼈대 역할을 한다.
- 마크업 언어로, 태그를 사용해 콘텐츠를 구조화한다.
- 예: 제목, 단락, 표, 이미지, 링크 등으 정의
3.2 HTML의 기본 구조
HTML 문서를 항상 아래와 같은 기본 구조를 가진다.
<!DOCTYPE html> <!-- 문서 유형 선언 -->
<html> <!-- HTML 문서의 루트 -->
<head>
<title>문서 제목</title> <!-- 브라우저 탭 제목 -->
<meta charset="UTF-8"> <!-- 문자 인코딩 -->
</head>
<body>
<h1>환영합니다!</h1> <!-- 제목 -->
<p>이것은 HTML 문서의 예제입니다.</p> <!-- 단락 -->
</body>
</html>
3.3 HTML의 주요 구성 요소
1. 태그 (Tag)
- HTML 문서의 기본 단위로, 콘텐츠의 역할과 구조를 정의
- 태그는 열리는 태그와 닫히는 태그로 구성:
- 예: <p>문장</p> (<p>는 열리는 태그, </p>는 닫히는 태그)
- 빈 태그: 닫히는 태그가 없는 태그도 있음.
- 예: <img src="image.jpg" alt="이미지 설명">
2. 요소 (Element)
- 태그와 그 안의 콘텐츠로 구성된 HTML의 한 단위
- 예: <h1>HTML 소개</h1>
3. 속성 (Attribute)
- 태그에 추가적인 정보를 제공
- 항상 키=값 형식으로 작성
- 예: <a href="https://example.com" target="_blank">링크</a>
3.4 HTML의 주요 태그
1. 문서 구조 태그
- <html>: HTML 문서의 루트 요소
- <head>: 메타데이터(문서 정보) 정의
- <body>: 사용자가 보는 콘텐츠를 정의
2. 텍스트 태그
- <h1> ~ <h6>: 제목 태그 (큰 제목에서 작은 제목 순)
- <p>: 단락
- <strong>: 굵은 글씨
- <em>: 이탤릭체
3. 링크 및 이미지 태그
- <a>: 하이퍼링크
- <img>: 이미지 삽입
4. 목록 태그
- <ul>: 순서 없는 목록
- <ol>: 순서 있는 목록
- <li>: 목록 항목
5. 테이블 태그
- <table>: 테이블 정의
- <tr>: 행
- <td>: 열
- <th>: 테이블 헤더
6. 폼 태그
- <form>: 사용자 입력 폼 정의
- <input>: 다양한 입력 필드
- <textarea>: 여러 줄 입력 필드
- <button>: 버튼
3.5 HTML 실제 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 예제</title>
</head>
<body>
<header>
<h1>HTML 배우기</h1>
</header>
<nav>
<ul>
<li><a href="#section1">소개</a></li>
<li><a href="#section2">기본 태그</a></li>
<li><a href="#section3">HTML5</a></li>
</ul>
</nav>
<section id="section1">
<h2>HTML 소개</h2>
<p>HTML은 웹 페이지를 만드는 마크업 언어입니다.</p>
</section>
<section id="section2">
<h2>기본 태그</h2>
<p>여기에는 제목, 단락, 링크 등이 포함됩니다.</p>
</section>
<footer>
<p>© 2025 HTML 학습</p>
</footer>
</body>
</html>
4. URL (Uniform Resource Locator)
URL은 인터넷 상의 자원을 식별하고 위치를 지정하기 위한 표준화된 문자열이다.
사용자가 웹 브라우저 주소창에 URL을 입력하거나 링크를 클릭할 때, URL은 자원이 위치한 서버와 해당 자원을 요청하는 데 필요한 정보를 제공한다.
4.1 URL의 정의
- URL은 인터넷 상의 리소스의 위치와 해당 리소스에 접근하는 방법을 나타내는 표기법이다.
- URI(Uniform Resource Identifier)의 한 형태로, 자원의 위치를 명시하는 역할을 한다.
4.2 URL의 구성 요소
URL은 특정 리소스를 명확히 식별하기 위해 여러 부분으로 나뉜다. 아래는 일반적인 URL의 구조이다.
<스킴>://<사용자 정보>@<호스트>:<포트>/<경로>?<쿼리>#<프래그먼트>
- URL의 첫 번째 부분으로, 프로토콜을 지정한다.
- 클라이언트와 서버 간의 통신 방식을 정의
- 예: http, https, ftp, mailto, file 등
2. 사용자 정보(User Information) (선택 사항)
- 리소스 접근에 필요한 사용자 이름과 비밀번호를 포함.
- 형식: <사용자 이름>:<비밀번호>@.
- 예: ftp://user:password@ftp.example.com
3. 호스트 (Host)
- 리소스가 위치한 서버의 도메인 이름 또는 IP 주소
- 예: example.com, 192.168.1.1
4. 포트 (Port) (선택 사항)
- 서버의 특정 애플리케이션에 연결하기 위한 포트 번호
- 기본 값이 아닌 경우 명시적으로 설정. HTTP 기본 포트: 80, HTTPS 기본 포트: 443
- 예: https://example.com:8080
5. 경로 (Path)
- 서버 내에서 특정 리소스의 위치를 지정
- 디렉터리 구조와 유사
- 예: /products/item.html
6. 쿼리 (Query)
- 추가적인 요처 매개변수를 전달
- ? 뒤에 키-값(key=value) 형태로 작성하며, 여러 매개변수는 &로 구분
- 예: ?id=123&sort=asc
7. 프래그먼트(Fragment) (선택 사항)
- 문서 내 특정 부분을 참조
- # 뒤에 명시하며, 브라우저가 이를 해석하여 해당 위치로 스크롤
- 예: https://example.com/page#section2
4.3 URL의 작동 방식
1. 사용자가 웹 브라우저에서 URL 입력:
- 예: https:// example.com
2. DNS 조회:
- URL에 포함된 도메인 이름(예: example.com)을 IP주소로 변환.
3. HTTP 요청:
- 클라이언트(브라우저)가 해당 서버로 HTTP 요청을 보냄.
4. 서버 응답:
- 요청받은 리소스(예: HTML 파일, JSON 데이터)를 반환
5. 브라우저가 렌더링:
- 반환된 데이터를 화면에 표
'🚣활동 > NHN Academy' 카테고리의 다른 글
| HTTP method, HTTP status (0) | 2025.02.17 |
|---|---|
| HTTP 구조 (0) | 2025.02.17 |
| Java Socket Communication (0) | 2025.02.10 |
| UDP (User Datagram Protocol) (0) | 2025.02.10 |
| TCP (Transmission Control Protocol) (0) | 2025.02.10 |
1. HyperText (하이퍼텍스트)
HyperText는 텍스트 기반 정보 표현 방식 중 하나로, 연결성과 비선형성을 특징으로 한다.
문서 내 텍스트에서 다른 문서나 리소스로 이동할 수 있는 링크(연결 고리)를 제공한다.
1.1 HyperText의 개념
- 정의: 하이퍼텍스트는 특정 단어나 구문을 클릭했을 때, 관련1된 다른 텍스트나 리소스에 연결되는 방식으로 작성된 텍스트
- 비선형성: 사용자가 문서를 읽는 순서를 강제하지 않고, 자유롭게 이동할 수 있도록 설계되어 있음.
- 인터랙티브성: 사용자가 원하는 정보에 즉시 접근할 수 있는 인터페이스를 제공함.
1.2 HyperText의 특징
1. 비선형 구조
- 정보를 순차적을 읽을 필요 없이, 사용자가 원하는 정보를 자유롭게 탐색 가능
- 예: 웹 브라우징, 위키백과
2. 상호 연결성
- 문서 간 하이퍼링크를 통해 정보의 관계를 구축
- 하이퍼링크는 다른 문서뿐만 아니라 이미지, 비디오, 오디오 등 다양한 리소스를 포함할 수 있음.
3. 사용자 주도 탐색
- 사용자가 직접 링크를 선택해 정보 흐름을 제어
- 능동적인 정보 탐색 가능
4. 다양한 매체와 결합 가능
- 하이퍼텍스트는 하이퍼미디어의 기반으로, 텍스트 외에도 멀티미디어를 포함할 수 있음.
1.3 HyperText의 구성 요소
1. Anchor (링크)
- 하이퍼텍스트의 핵심 요소로, 한 문서에서 다른 문서로 연결.
- HTML에서는 <a> 태그를 사용해 구현. (<a href="https://example.com">Example</a>)
2. Node (노드)
- 하나의 정보 단위. 텍스트, 이미지, 비디오 등 모든 형태가 가능
- 예: 웹 페이지
3. Link (링크)
- 노드 간의 연결을 제공.
- 사용자가 문서를 이동하거나 다른 리소스를 불러오게 하는 역할.
2. WWW (World Wide Web)
World Wide Web (월드 와이드 웹)은 인터넷 상의 정보와 자원을 연결하고 이를 텍스트, 이미지, 비디오 등 다양한 형식으로 제공하는 정보 시스템이다.
2.1 WWW의 정의
- 월드 와이드 웹은 인터넷 상에서 하이퍼텍스트와 하이퍼미디어를 사용해 문서를 연결하고 탐색할 수 있도록 설계된 글로벌 정보 공간
- WWW는 인터넷과 동일하지 않음. 인터넷은 물리적 네트워크와 인프라를 의미하며, WWW는 그 위에서 작동하는 하나의 서비스
2.2. WWW의 구성 요소
1. HTML (HyperText Markup Language)
- 웹 페이지를 작성하기 위한 마크업 언어
- 텍스트, 이미지, 하이퍼링크 등을 구조화하여 표시
<html>
<head>
<title>예제 웹 페이지</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>이것은 예제 웹 페이지입니다.</p>
<a href="https://example.com">더 알아보기</a>
</body>
</html>
2. HTTP (HyperText Transfer Protocol)
- 웹 브라우저와 웹 서버 간에 데이터를 주고받기 위한 통신 프로토콜
- 요청(request)과 응답(response)의 형태로 작동
3. URI (Uniform Resource Indetifier)
- 웹 상의 자원을 고유하게 식별하기 위한 주소 체계
- URL은 URI의 한 형태로, 특정 웹 페이지의 위치를 나타낸다.
- 예: https://example.com
2.3 WWW의 작동 원리
1. 사용자가 웹 브라우저에서 URL 입력:
- 예: https:// example.com
2. DNS 조회:
- URL에 해당하는 도메인 이름(예: example.com)을 IP주소로 변환.
3. HTTP 요청:
- 웹 브라우저가 해당 서버로 HTTP 요청을 보냄.
4. 서버 응답:
- 요청받은 리소스(예: HTML 파일, 이미지 등)를 웹 브라우저로 전송
5. 브라우저가 렌더링:
- 전송받은 데이터를 화면에 표시
3. HTML (HyperText MarkuP Language)
HTML은 웹페이지의 구조와 내용을 정의하는 마크업 언어이다. 웹 브라우저는 HTML 문서를 해석하여 사용자가 볼 수 있는 텍스트, 이미지, 링크, 비디오 등의 콘텐츠를 화면에 표시한다.
3.1 HTML의 정의
- HTML은 웹 문서를 구성하는 뼈대 역할을 한다.
- 마크업 언어로, 태그를 사용해 콘텐츠를 구조화한다.
- 예: 제목, 단락, 표, 이미지, 링크 등으 정의
3.2 HTML의 기본 구조
HTML 문서를 항상 아래와 같은 기본 구조를 가진다.
<!DOCTYPE html> <!-- 문서 유형 선언 -->
<html> <!-- HTML 문서의 루트 -->
<head>
<title>문서 제목</title> <!-- 브라우저 탭 제목 -->
<meta charset="UTF-8"> <!-- 문자 인코딩 -->
</head>
<body>
<h1>환영합니다!</h1> <!-- 제목 -->
<p>이것은 HTML 문서의 예제입니다.</p> <!-- 단락 -->
</body>
</html>
3.3 HTML의 주요 구성 요소
1. 태그 (Tag)
- HTML 문서의 기본 단위로, 콘텐츠의 역할과 구조를 정의
- 태그는 열리는 태그와 닫히는 태그로 구성:
- 예: <p>문장</p> (<p>는 열리는 태그, </p>는 닫히는 태그)
- 빈 태그: 닫히는 태그가 없는 태그도 있음.
- 예: <img src="image.jpg" alt="이미지 설명">
2. 요소 (Element)
- 태그와 그 안의 콘텐츠로 구성된 HTML의 한 단위
- 예: <h1>HTML 소개</h1>
3. 속성 (Attribute)
- 태그에 추가적인 정보를 제공
- 항상 키=값 형식으로 작성
- 예: <a href="https://example.com" target="_blank">링크</a>
3.4 HTML의 주요 태그
1. 문서 구조 태그
- <html>: HTML 문서의 루트 요소
- <head>: 메타데이터(문서 정보) 정의
- <body>: 사용자가 보는 콘텐츠를 정의
2. 텍스트 태그
- <h1> ~ <h6>: 제목 태그 (큰 제목에서 작은 제목 순)
- <p>: 단락
- <strong>: 굵은 글씨
- <em>: 이탤릭체
3. 링크 및 이미지 태그
- <a>: 하이퍼링크
- <img>: 이미지 삽입
4. 목록 태그
- <ul>: 순서 없는 목록
- <ol>: 순서 있는 목록
- <li>: 목록 항목
5. 테이블 태그
- <table>: 테이블 정의
- <tr>: 행
- <td>: 열
- <th>: 테이블 헤더
6. 폼 태그
- <form>: 사용자 입력 폼 정의
- <input>: 다양한 입력 필드
- <textarea>: 여러 줄 입력 필드
- <button>: 버튼
3.5 HTML 실제 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 예제</title>
</head>
<body>
<header>
<h1>HTML 배우기</h1>
</header>
<nav>
<ul>
<li><a href="#section1">소개</a></li>
<li><a href="#section2">기본 태그</a></li>
<li><a href="#section3">HTML5</a></li>
</ul>
</nav>
<section id="section1">
<h2>HTML 소개</h2>
<p>HTML은 웹 페이지를 만드는 마크업 언어입니다.</p>
</section>
<section id="section2">
<h2>기본 태그</h2>
<p>여기에는 제목, 단락, 링크 등이 포함됩니다.</p>
</section>
<footer>
<p>© 2025 HTML 학습</p>
</footer>
</body>
</html>
4. URL (Uniform Resource Locator)
URL은 인터넷 상의 자원을 식별하고 위치를 지정하기 위한 표준화된 문자열이다.
사용자가 웹 브라우저 주소창에 URL을 입력하거나 링크를 클릭할 때, URL은 자원이 위치한 서버와 해당 자원을 요청하는 데 필요한 정보를 제공한다.
4.1 URL의 정의
- URL은 인터넷 상의 리소스의 위치와 해당 리소스에 접근하는 방법을 나타내는 표기법이다.
- URI(Uniform Resource Identifier)의 한 형태로, 자원의 위치를 명시하는 역할을 한다.
4.2 URL의 구성 요소
URL은 특정 리소스를 명확히 식별하기 위해 여러 부분으로 나뉜다. 아래는 일반적인 URL의 구조이다.
<스킴>://<사용자 정보>@<호스트>:<포트>/<경로>?<쿼리>#<프래그먼트>
- URL의 첫 번째 부분으로, 프로토콜을 지정한다.
- 클라이언트와 서버 간의 통신 방식을 정의
- 예: http, https, ftp, mailto, file 등
2. 사용자 정보(User Information) (선택 사항)
- 리소스 접근에 필요한 사용자 이름과 비밀번호를 포함.
- 형식: <사용자 이름>:<비밀번호>@.
- 예: ftp://user:password@ftp.example.com
3. 호스트 (Host)
- 리소스가 위치한 서버의 도메인 이름 또는 IP 주소
- 예: example.com, 192.168.1.1
4. 포트 (Port) (선택 사항)
- 서버의 특정 애플리케이션에 연결하기 위한 포트 번호
- 기본 값이 아닌 경우 명시적으로 설정. HTTP 기본 포트: 80, HTTPS 기본 포트: 443
- 예: https://example.com:8080
5. 경로 (Path)
- 서버 내에서 특정 리소스의 위치를 지정
- 디렉터리 구조와 유사
- 예: /products/item.html
6. 쿼리 (Query)
- 추가적인 요처 매개변수를 전달
- ? 뒤에 키-값(key=value) 형태로 작성하며, 여러 매개변수는 &로 구분
- 예: ?id=123&sort=asc
7. 프래그먼트(Fragment) (선택 사항)
- 문서 내 특정 부분을 참조
- # 뒤에 명시하며, 브라우저가 이를 해석하여 해당 위치로 스크롤
- 예: https://example.com/page#section2
4.3 URL의 작동 방식
1. 사용자가 웹 브라우저에서 URL 입력:
- 예: https:// example.com
2. DNS 조회:
- URL에 포함된 도메인 이름(예: example.com)을 IP주소로 변환.
3. HTTP 요청:
- 클라이언트(브라우저)가 해당 서버로 HTTP 요청을 보냄.
4. 서버 응답:
- 요청받은 리소스(예: HTML 파일, JSON 데이터)를 반환
5. 브라우저가 렌더링:
- 반환된 데이터를 화면에 표
'🚣활동 > NHN Academy' 카테고리의 다른 글
| HTTP method, HTTP status (0) | 2025.02.17 |
|---|---|
| HTTP 구조 (0) | 2025.02.17 |
| Java Socket Communication (0) | 2025.02.10 |
| UDP (User Datagram Protocol) (0) | 2025.02.10 |
| TCP (Transmission Control Protocol) (0) | 2025.02.10 |
