> 웹 프론트엔드 > HTML 튜토리얼 > HTML이란 무엇입니까?

HTML이란 무엇입니까?

WBOY
풀어 주다: 2024-09-04 16:12:30
원래의
838명이 탐색했습니다.

하이퍼텍스트 마크업 언어(HTML)는 인터넷에 연결된 누구나 볼 수 있는 웹사이트를 만들 수 있는 언어입니다. 설문조사에 따르면 응답자의 55% 이상이 HTML을 사용한다고 답했습니다.

또한 HTML을 배우는 것은 일반적으로 웹 개발자 여정의 첫 번째 단계입니다. 평균 웹 개발자의 연간 수입은 $61,718이며, 최고 개발자의 수입은 $103,000를 넘습니다.

하이퍼텍스트는 다음 페이지로 이동하는 하이퍼링크라는 텍스트를 클릭하여 온라인에 접속하는 방법입니다.

HTML이란 무엇입니까?

주요 시사점

  • 기본 코드는 doctype 선언, HTML 태그, head 태그, title 태그, body 태그로 구성됩니다.
  • Windows, Mac, Linux 등 모든 OS와 Google Chrome, Mozilla Firefox, Safari 등 모든 브라우저에서 실행할 수 있습니다.
  • 개인 블로그, 상세 테이블, 등록 양식, 랜딩 페이지, 뉴스레터, 온라인 포트폴리오 작성 등 다양한 애플리케이션도 있습니다.
  • 장점은 개방형 표준이고, 배우기 쉽고, 뛰어난 커뮤니티 지원으로 초보자에게 친숙하고, 검색 엔진 친화적이라는 것입니다.
  • 단점으로는 취약한 보안, 디자인 유연성 부족, 다양한 브라우저에서 일관되지 않은 출력, 제한된 기능 등이 있습니다.

HTML의 하위 집합

1. XHTML(확장 가능한 하이퍼텍스트 마크업 언어)

  • XHTML은 XML 기반 마크업 언어로, 엄격한 구문과 의미 규칙을 준수합니다.
  • XHTML은 HTML 4의 후속 버전으로, 언어를 더욱 모듈화하고 확장 가능하게 만드는 것을 목표로 합니다.
  • XHTML 문서는 형식이 올바르고 유효해야 하므로 작성하기가 더 어렵고 일관성이 뛰어나며 다양한 장치에서 액세스할 수 있어야 합니다.

2. SGML(표준 일반화 마크업 언어)

  • SGML은 HTML을 비롯한 마크업 언어를 정의하는 데 사용되는 메타언어입니다.
  • SGML은 문서의 구조와 내용을 설명하는 표준 구문을 제공하므로 서로 다른 시스템 간에 정보를 교환하는 데 유용합니다.
  • SGML은 복잡하고 강력한 시스템이지만 구문과 복잡성으로 인해 HTML과 같은 단순한 마크업 언어보다 널리 사용되지 않습니다.

3. DHTML(동적 HTML)

  • DHTML은 HTML, CSS 및 JavaScript를 사용하여 동적이고 대화형 웹 페이지를 만드는 것을 의미합니다.
  • DHTML을 사용하면 페이지를 새로 고칠 필요 없이 사용자 작업에 따라 웹페이지의 콘텐츠, 레이아웃 및 동작을 조작할 수 있습니다.
  • DHTML은 드롭다운 메뉴, 도구 설명, 슬라이드 쇼와 같은 동적 효과를 만드는 데 널리 사용됩니다.
  • 간단한 애니메이션이나 게임도 만들 수 있습니다.

4. TTML2(Timed Text Markup Language 2)

  • TTML2는 캡션, 자막 등 시간이 지정된 텍스트 콘텐츠를 표준화된 방식으로 표현하는 데 사용되는 마크업 언어입니다.
  • TTML2는 다양한 언어 및 글꼴 스타일 지원을 포함하여 시간이 지정된 텍스트의 형식을 지정하고 스타일링하기 위한 포괄적인 기능 세트를 제공합니다.
  • TTML2는 청각 장애가 있는 사용자를 위한 멀티미디어 콘텐츠의 접근성을 보장하고 모든 사용자의 비디오 콘텐츠 가용성을 향상시키는 중요한 도구입니다.

HTML 템플릿

모든 HTML 페이지에는 기본 템플릿이 있습니다. 다음 섹션으로 구성됩니다:

문서 유형 선언: HTML 문서의 첫 번째 줄은 사용된 HTML 버전을 정의하는 doctype 또는 문서 유형 선언입니다.

구문:

<!DOCTYPE html>
로그인 후 복사
로그인 후 복사

요소: 요소는 다른 모든 요소를 ​​포함하는 HTML 문서의 루트 요소입니다.

구문:

<html>...</html>
로그인 후 복사

Head 요소: head 요소에는 제목, 메타데이터, 스타일시트와 같은 외부 리소스에 대한 링크 등 문서에 대한 정보가 포함됩니다.

구문:

<head>...</head>
로그인 후 복사

제목 요소: 제목 요소는 브라우저 제목 표시줄에 표시되는 문서 제목을 정의합니다.

구문:

<title>Name of Web Page</title>
로그인 후 복사

Body 요소: body 요소에는 텍스트, 이미지, 기타 미디어 등 문서의 주요 내용이 포함됩니다.

구문:

<body>...</body>
로그인 후 복사

이러한 기본 태그 외에도 콘텐츠를 추가하여 멋진 웹사이트를 만드는 데 도움이 되는 몇 가지 다른 요소가 있습니다. 이것들은-

제목: 제목(H1, H2, H3 등)은 콘텐츠를 구조화하고 정보 계층을 제공하는 데 도움이 됩니다.

구문:

<h1>Main Heading</h1>
로그인 후 복사

단락: 단락(

)은 텍스트 블록을 정의하는 데 도움이 됩니다.

구문:

<p>Hello World</p>
로그인 후 복사

링크: 링크()를 사용하면 사용자가 다른 웹페이지나 다른 리소스로 이동할 수 있습니다.

구문:

<a href="https://www.EDUCBA.com">Link to EDUCBA website</a>
로그인 후 복사

Images: Images () can provide visual content in a document.

Syntax:

<img src="image.jpg" alt="Image Description">
로그인 후 복사

Code:

<!DOCTYPE html>


EDUCBA’s Page


Hello World! This is EDUCBA’s first web page.

로그인 후 복사

Output:

HTML이란 무엇입니까?

How to Create an HTML Table?

There are specific table tags to create a table – mainly,

, , and
,
.

Pre-requisites for HTML Table

For an absolute beginner, it is essential to know what the different table tags do before writing a basic code.