WEB & HTML 정의와 역사 / HTML 태그 (2023.04.21)

Notice

Recent Posts

Recent Comments

Link

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

JiYoung Dev 🖥

WEB & HTML 정의와 역사 / HTML 태그 (2023.04.21) 본문

full stack/HTML, CSS

WEB & HTML 정의와 역사 / HTML 태그 (2023.04.21)

Shinjio 2023. 4. 23. 11:25

🎈인터넷(Internet)

여러 통신망을 하나로 연결한다는 의미인 '인터 네트워크(inter-network)'의 말에서 시작

전 세계 컴퓨터를 하나로 연결하는 거대한 컴퓨터 통신망

https://www.huffingtonpost.kr/news/articleView.html?idxno=29681

해저케이블과 인터넷

스마트폰 세상에서 모든 정보가 무선으로 오가는 걸로 보이지만, 실제론 광케이블이 담당한다. 국내에서 인터넷은 연구망인 하나망이 위성통신으로 하와이대학에 연결된 게 시작이지만, 1991년

www.huffingtonpost.kr

인터넷은 클라이언트와 서버로 구성되며, TCP/IP라는 기본 프로토콜을 통해 제공됨

🎈웹(WEB)

월드 와이드 웹(World Wide Web) = WWW = W3 = 웹(Web)

인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간

→ 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결하여 제공

인터넷과 같은 의미로 사용되고 있지만, 정확히 말해 웹은 인터넷상의 인기있는 하나의 서비스 (인터넷이 웹을 포함하고 있는 관계)

또한, 이렇게 작성된 웹상의 문서는 HTTP라는 프로토콜을 사용하면 누구나 검색하고 접근할 수 있음

웹에서는 HTML이라는 언어를 사용하여 누구나 자신만의 문서를 작성할 수 있음

- HTML 언어를 사용하여 작성된 하이퍼텍스트 문서를 웹 페이지(web page)라고 함

- 이러한 웹 페이지들 중에서 서로 관련된 내용으로 작성된 웹 페이지들의 집합을 웹 사이트(web site)라고 함

- 수많은 웹 페이지들은 하이퍼링크(hyperlink)를 통해 서로 연결되어 구성

- 사용자가 웹 페이지에 포함된 하이퍼링크를 따라 다른 웹 페이지들로 계속하여 이동하는 것 → 웹 서핑(web surfing)

- 사용자가 웹 페이지를 검색하기 위해 사용하는 프로그램을 웹 브라우저(web browser)라고 함

📖 하이퍼텍스트(Hypertext)

문서 내부에 또 다른 문서로 연결되는 참조를 집어 넣음으로써 웹 상에 존재하는 여러 문서끼리 서로 참조할 수 있는 기술

현재 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트

→ 아래 네이버 사이트에서 기사 제목을 클릭하면 기사 내용 페이지로 이동

문서 내부에서 또 다른 문서로 연결되는 참조를 하이퍼링크(hyperlink)라고 함

📖 인터넷 시스템

⚙️ 웹 클라이언트(web client)

요청(request)

클릭한 페이지를 요청하는 PC

네트워크로 연결된 서버로부터 정보를 제공받는 컴퓨터

⚙️웹 서버(web server)

응답(response)

클릭된 페이지를 제공하는 PC

클라이언트에게 네트워크를 통해 서비스를 제공하는 컴퓨터

사용자가 요청하면 언제나 웹 서비스를 제공해줘야 하므로, 웹 서버는 항상 실행되어 있어야

⚙️ 웹 브라우저(web browser)

웹 브라우저란 웹 서버에서 웹 페이지를 가져오거나 웹 서버로 정보를 보낼 때 사용하는 프로그램

HTML 문서와 그림, 멀티미디어 파일 등 웹을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용 프로그램의 총칭

웹 브라우저는 사용자가 웹 페이지를 요청하면 웹 서버에 저장되어 있는 웹 페이지 정보를 불러와서 사용자의 화면에 출력

📖 인터넷 주소 체계

⚙️ 프로토콜(protocol)

컴퓨터끼리 정보를 주고받기 위한 일종의 규칙이나 약속

컴퓨터 사이의 통신에서 정보를 교환하기 위해 미리 만들어 둔 네트워크 통신규약

ex. TCP(Transmission Control Protocol), IP(Internet Protocol), HTTP(HyperText Transfer Protocol), FTP(File Transfer Protocol) 등이 있음

HTTP (Hyper Text Transfer Protocol)
하이퍼텍스를 기반으로 웹 브라우저와 웹 서버 간에 데이터를 주고받기 위해 사용하는 인터넷 프로토콜
요청(request)와 응답(reponse) 방식으로 동작

⚙️ 인터넷 주소

인터넷주소는IP 주소를 의미하며, 도메인 네임은 DNS 서버에서 IP주소로 자동 변환

1. IP 주소 (Internet Protocol address) - 인터넷 상에서 서로를 인식하기 위해 지정받은 식별용 번호

ex. 102.242.31.5

2. 도메인 네임 (Domain Name) - 외우기 어려운 IP 주소를 사람이 기억하기 쉬운 문자 형태로 표현한 주소

ex. naver.com

웹의 동작 방식에 대한 참고 사이트
https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/How_the_Web_works
http://www.tcpschool.com/webbasic/works
https://velog.io/@ylyl/TIL-web-operations

웹 페이지는 무엇으로 만들어졌을까?

HTML 뼈대
CSS 디자인
JS 기능

🎈 HTML(Hyper Text Markup Language)

웹 페이지에 정보를 담아 표시하기 위한 마크업 언어

HyperText

현재 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트

+ Markup Language

표시하는 언어

"★★★★★태그★★★★★"라는 개념으로 표시를 해주는 것

링크로 연결된 문서를 만들 때 사용하는, 내용뿐만 아니라 문서의 구조와 의미(h1, p, button 등)와 같은 추가적인 정보까지 표시하는 프로그래밍 언어

📖 HTML 태그(tag)

HTML 태그는 보통 시작 태그(start tag, opening tag)와 종료 태그(end tag, closing tag)의 한 쌍으로 구성

태그 안에 있는 내용만 영향을 받음

종료 태그는 시작 태그와 똑같지만, 태그 이름 앞에 슬래시 작성

태그에 따라 시작 태그만 있고 종료 태그가 없는 태그도 있음!

ex. <img>, <br>, <hr>

이러한 태그는 빈 태그(empty tag)라고 함

📖 HTML 구성요소

출처 : http://www.tcpschool.com/html/html_intro_elementStructure

- 속성명은 소문자로 작성

- 속성값은 따옴표로 감싸기

- 여러개의 속성 사용시 띄어쓰기

⚙️ HTML 기본구조

<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시

<html> : HTML 문서의 루트(root) 요소를 정의

<head> : HTML 문서의 메타데이터(metadata)를 정의
- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미
- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현

<title> : HTML 문서의 제목(title)을 정의
- 웹 브라우저의 툴바(toolbar)에 표시
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목
- 검색 엔진의 결과 페이지에 제목으로 표시

<body> : 웹 브라우저를 통해 보이는 내용(content) 부분

<h1> ~ <h6> : 제목(heading)

<p> : 단락(paragraph)

참고.

HTML 문서 작성을 위해 Visual Studio Code 에디터 사용

위의 에디터 사용시 필수 다운로드 → live server

선택 다운로드 → material theme, material icon

📖 여러가지 HTML 태그

⚙️ <body> </body>

다중속성 사용시에는 띄어쓰기!

<!-- 다중속성 사용 -->
<hr width="150px" size="140" color="red">
<hr width="150px" size="120" color="orange">
<hr width="150px" size="100" color="yellow">
<hr width="150px" size="80" color="green">
<hr width="150px" size="60" color="blue">
<hr width="150px" size="40" color="navy">
<hr width="150px" size="20" color="purple">

⚙️ <h> </h> : 제목태그

html 본문내 제목을 표현하는 태그 (h1 ~ h6)

h2, h3태그를 많이 사용

<!-- 제목 태그 h : header -->
<h1>h1태그</h1>
<h2>h2태그</h2>
<h3>h3태그</h3>
<h4>h4태그</h4>
<h5>h5태그</h5>
<h6>h6태그</h6>

⚙️ 본문태그

1. <p> </p>

본문의 내용을 단락으로 표현할 때 사용하는 태그

한 줄 전체 공간 차지

2. <span> </span>

본문의 내용을 문장으로 표현할 때 사용하는 태그

해당 문장만 공간 차지

<!-- 본문 태그 
 1. p : paragraph
 2. span -->

<p>p태그1</p>
<p>p태그2</p>
<span>스팬태그1</span>
<span>스팬태그2</span>

태그를 사용해야 하는 이유 : 태그가 없으면 해당 영역에만 스타일을 지정하는 등의 행위를 할 수 없음

⚙️ 문단태그

1. <br/>

줄바꿈(개행) 태그

2. <hr/>

단락 간의 구분을 위해 사용하는 태그

<!-- 문단 태그
1. br : break 개행 태그
2. hr : 구분선 -->

<p>p태그1</p>
<p>p태그2</p>
<hr>
<span>스팬태그1<br/></span>
<span>스팬태그2</span>

⚙️ 글자태그

1. <b> </b>

다른 텍스트와 구별할 때 사용하는 태그

시작적인 강조 → 결국 디자인 → 최근에는 많이 쓰지 않음!(CSS)로 대체

2. <strong> </strong>

중요한 문구를 강조하는 태그

시각적인 강조 + 청각적인 강조 (기능)

<!-- 글자태그
1. <b> : bold
2. <strong> -->
<p><b>b태그</b>강조</p>
<p><strong>strong태그</strong>강조</p>

정리(summary)

- web상에서 길동이 구글 메인 홈페이지 띄어달라고 요청
길동 : 웹 클라이언트 (요청 request)
구글 : 웹 서버 (응답 response)

- HTML
HT : 하이퍼 텍스트 현재 문서에서 내가 원하는 문서로 즉시 이동이 가능
ML : 마크업 언어 마크업? 표시 "태그"

<p> 배고파요 </p>
시작태그 컨텐츠(내용) 끝태그
└------- 요소 (Element) --------┘

- 추가 내용은 속성으로 작성 (다중속성은 띄어쓰기!)

- HTML 태그
1) 제목태그 : <h1~h6>
2) 내용태그 2개 : <p>, <span>
3) 줄바꿈태그 : <br> (break)
4) 강조태그 2개 : <b>(bold) - 굵게 디자인만 하는 역할
<strong> - 기능적 강조

'full stack > HTML, CSS' 카테고리의 다른 글

CSS, HTML 공간분할태그 (2023.04.26) (0)	2023.04.26
HTML 태그 : 리스트, 이미지, 앵커, 테이블, 인풋 (2023.04.25) (0)	2023.04.25
CSS 레이아웃 : Position, Flex (0)	2023.03.08
HTML 핵심 개념 (0)	2023.03.06
CSS 핵심 개념 (1)	2023.03.03

'full stack/HTML, CSS' Related Articles

JiYoung Dev 🖥

WEB & HTML 정의와 역사 / HTML 태그 (2023.04.21) 본문

WEB & HTML 정의와 역사 / HTML 태그 (2023.04.21)

🎈인터넷(Internet)

🎈웹(WEB)

📖 하이퍼텍스트(Hypertext)

📖 인터넷 시스템

⚙️ 웹 클라이언트(web client)

⚙️웹 서버(web server)

⚙️ 웹 브라우저(web browser)

📖 인터넷 주소 체계

⚙️ 프로토콜(protocol)

⚙️ 인터넷 주소

🎈 HTML(Hyper Text Markup Language)

📖 HTML 태그(tag)

📖 HTML 구성요소

⚙️ HTML 기본구조

📖 여러가지 HTML 태그

⚙️ <body> </body>

⚙️ <h> </h> : 제목태그

⚙️ 본문태그

⚙️ 문단태그

⚙️ 글자태그

'full stack > HTML, CSS' 카테고리의 다른 글

티스토리툴바