검색엔진 최적화 기반의 IT 웹사이트

HTML 배우기

HTML는 Hyper Text Markup Language 약어로 웹사이트 제작을 위한 마크업 언어입니다.

HTML는 태그 (tag)를 사용하여 제목 또는 문장 등 문서에 적절한 콘텐츠를 정의할 수 있습니다.

이 튜토리얼은 입문자부터 개발자까지 모두가 학습할 수 있는 풍부한 설명과 예제를 포함합니다.

처음 챕터부터 마지막 챕터까지 순차적으로 학습한다면 누구나 HTML 전문가가 될 수 있습니다.


HTML 태그

태그는 시작태그와 종료태그가 있으며 콘텐츠는 시작태그와 종료태그 사이에 옵니다.

태그는 다음과 같이 특수문자를 사용하여 하나의 묶음으로 구성됩니다.

<tag>콘텐츠는 여기에 옵니다</tag>

메모: 콘텐츠가 없는 일부 태그는 종료태그를 필요로 하지 않습니다


HTML 엘리먼트

엘리먼트는 HTML를 구성하는 가장 기본적인 단위입니다.

하나의 엘리먼트는 <p> 태그와 </p> 태그처럼 하나의 묶음으로 이루어집니다.

메모: 첫번째 태그가 시작태그이며 두번째 태그가 종료태그입니다.


HTML 브라우저

마이크로소프트 엣지, 구글 크롬 등 웹 브라우저의 주요 목적은 HTML 문서를 해독하여 시각적으로 표시하는 것입니다.

웹 브라우저는 HTML 태그를 직접 표시하지 않지만 콘텐츠를 렌더링 하는데 태그를 사용합니다.

메모: 모든 HTML 엘리먼트는 렌더링을 위해 일련의 박스 모델로 간주 될 수 있습니다.


HTML 구조

HTML 구조는 다음과 같이 간단하게 설명할 수 있습니다.

<html>
<head>
<title>페이지 제목</title>
</head>
<body>
콘텐츠는 여기에 옵니다...
</body>
</html>

메모: 위 HTML 구조에서 <body> 영역만 웹 브라우저에서 보여집니다.


HTML 예제

각 챕터에 작성된 예제는 학습을 진행할때 1,000개의 단어보다 더 도움이 될 수 있습니다.

아래에 연결된 코드 편집기를 사용하여 작성된 코드를 편집하고 버튼을 클릭하여 결과를 확인합니다.

예제

<!DOCTYPE html>
<html>

<head>
  <title>HTML 기본</title>
  <meta charset="utf-8">
</head>

<body>
  <h1>이것은 제목입니다</h1>
  <p>이것은 문단입니다.</p>
</body>

</html>
시도해보기 »

HTML는 콘텐츠 종류에 따라 다양한 태그로 구성됩니다.

예제 설명

  • <!DOCTYPE html> - HTML5를 선언합니다.
  • <meta> - 메타 데이터를 정의합니다.
  • <html> - HTML 문서를 정의합니다.
  • <head> - 메타 데이터를 포함합니다.
  • <title> - 메타 데이터 제목을 정의합니다.
  • <body> - 실제 콘텐츠를 포함합니다.
  • <h1> - 제목을 정의합니다.
  • <p> - 문단을 정의합니다.

메모: 방문자는 각 챕터에 작성된 코드를 복사하여 학습 또는 실무에 사용할 수 있는 권한이 제공됩니다.


HTML 편집기

HTML 문서 개발 및 태그 학습을 위해 사용자는 다양한 코드 편집기를 사용할 수 있습니다.

아래 테이블 표에 연결된 코드 편집기를 링크를 사용하여 편집기를 코드를 편리하게 작성할 수 있습니다.

편집기 설명
Brackets 어도비 시스템즈가 개발한 코드 편집기입니다.
Notepad++ 가장 대중화된 코드 편집기입니다.
Atom GitHub에서 개발한 코드 편집기입니다.
Visual Studio Code 마이크로소프트 개발한 코드 편집기입니다.
Sublime Text 크로스 플랫폼 기반의 코드 편집기입니다.

HTML 역사

HTML 역사는 1990년 이후로 시작되었습니다.

버전 역사
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

메모: 가장 최신의 HTML 버전은 HTML5입니다.

카테고리

이 사이트의 모든 콘텐츠는 이해를 돕기위해 간소화 되있으며, 관리자에 의해 상시 검토 후 수정이 진행됩니다. 이 사이트의 모든 콘텐츠는 잘못된 내용이 포함되있을 수 있으며. 우리는 그 유효성을 쉽게 검증할 수 없습니다. 이 사이트의 모든 콘텐츠는 관리자에게 모든 책임과 권한이 있습니다. 문의사항이 있다면 문의하기 페이지에서 관리자에게 메일을 보내주시기 바랍니다.


Copyright © 2020 W3 Online Library. All Rights Reserved.