🤷‍♀️ 01. HTML이란?

HTML이란 뭘까?

HTML로 무엇을 할 수 있을까?

HTML ( Hypertext Markup Language )

여기서 질문. 그럼 Hypertext는 뭘 의미할까?

Hypertext

Text 란 무엇일까?
명사 : 본문 / 글, 문서
동사 : 문자를 보내다

Hyper 란?
접두사 : 어떤 범위를 훨씬 벗어난, 어떤 범위를 뛰어넘는

사전적 의미만 두고 봤을 때
Text 는 정보 그 자체를 의미하고
Hyper는 어떤 상태를 뛰어넘는다는 의미를 갖고 있다.

🌳 그렇다면 Hypertext란 무엇일까?

정보에 대한 순차적 접근을 뛰어넘는다는 의미로
일반 텍스트와 달리 문장이나 단어 등이 링크를 통해 서로 연결된 네트워크처럼 구성된 문서를 말한다.

아래 링크를 눌러보자.

HTML 공식 설명 페이지

공식 설명 페이지로 바로 연결되어 쉽게 다른 페이지로 갈 수 있다.

이처럼 Hypertext란

한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트,
다른 문서와 쉽게 연결이 되도록 한 링크의 모음으로 구성된 문서이다.

여기까지 하이퍼텍스트에 대해 알아보았다.

🌳 Markup Language는 어떤 역할을 할까?

문서의 구조를 표현
웹 브라우저에게 명령
정보를 수집하는 검색 엔진에게 자료를 제공

그럼 다시 돌아와서,

01-1. HTML이란?

HT(Hypertext) : 문서와 문서가 링크로 연결되어 있다
M(Markup) : 태그로 이루어져있다
L(Language) : 언어

🌼웹 페이지를 만들기 위한 언어

01-2. HTML의 기능

• 웹페이지의 구조를 잡을 수 있다
• HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있다
• 브라우저가 HTML파일을 갖고 무엇을 어떻게 그리면 될지 파악한 후에 웹 페이지를 생성한다

01-3. HTML 파일

HTML은 .html 확장자가 붙은 텍스트 파일
파일 이름은 원하는대로 정할 수 있다.

• index.html
• 1.html
• main.html

01-4. HTML tag

<p>위코드 첫시작</p>

<태그이름>내용</태그이름>

시작태그와 종료태그가 필요한 태그

<p></p>
<h1></h1>
<h2></h2>
<a></a>

시작과 동시에 종료되는 태그

<img>
<br>

01-4-1. attribute(속성)

속성은 시작 태그에 위치하며 한 태그에 여러 속성을 지정할 수 있다.

아래에서 div, a, img는 태그 / class, href, src, alt는 속성

<div class="title">타이틀</div>
<a href="https://naver.com">네이버로 이동</a>
<img src="./me.png" alt="강아지사진">