지피디아 » IT & Bigdata » HMTL는 무엇인가? 기초부터 확실하게!

HMTL는 무엇인가? 기초부터 확실하게!

댓글 달기 / 글쓴이 /

HTML은 우리가 보고 있는 이 WEB상의 문서를 말합니다. 이 문서를 서버가 크롬이나 엣지로 전송해주었기 때문에 현재 이글을 보고 계신 것입니다. HTML은 문서 자체가 아닌 언어를 말하지만, 지피디아.html과 같이 확장자를 가져 하나의 파일(문서)의 역할을 합니다. html의 구조를 아는 것은 웹 서비스의 기본을 아는 것입니다. 이 html을 어떻게 전송하고 어떤 기능을 넣고 어떻게 꾸밀지에 따라 서비스의 품질이 달라지며, 취약점등도 쉽게 파악할 수 있습니다.

HTML이란?

HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어입니다. HTML은 웹 개발의 기본이 되는 언어로, 프론트 엔드 개발자는 HTML을 사용하여 사용자 인터페이스를 구성하고 웹 페이지의 내용을 구조화하는 역할을 담당합니다.

HTML은 태그(Tag)라 불리는 요소(element)들을 사용하여 문서의 구조를 설계합니다. 각각의 태그는 화면에 표시되는 콘텐츠의 종류를 나타내며, 열림 태그(<tag>)와 닫힘 태그(</tag>)로 구성됩니다. 예를 들어, <h1> 태그는 제목을 나타내는 태그이며, <p> 태그는 단락을 나타내는 태그입니다.

HTML은 문서의 구조를 선언적으로 정의하며, 이는 웹 브라우저에게 어떻게 콘텐츠를 표시하고 해석해야 하는지 알려줍니다. 또한, HTML은 다른 웹 기술과 함께 사용하여 동적인 기능과 상호작용성을 추가할 수 있습니다. CSS(Cascading Style Sheets)를 사용하여 디자인과 레이아웃을 지정하고, JavaScript를 사용하여 동적인 기능을 추가할 수 있습니다.

HTML을 사용하여 웹 페이지의 구조를 설계하고, 콘텐츠를 의미 있는 블록으로 나누어 정보의 구조를 전달합니다. 또한, 웹 페이지의 시맨틱(Semantic) 구조를 고려하여 검색 엔진 최적화(SEO)를 개선하고, 웹 접근성을 향상시키는 데에도 중요한 역할을 합니다.

HTML을 잘 이해하고 활용하는 프론트 엔드 개발자는 사용자 친화적이고 효과적인 웹 인터페이스를 개발할 수 있으며, 웹 애플리케이션의 사용성과 품질을 향상시키는 데에 큰 기여를 할 수 있습니다.

HTML 구조

기본구조

HTML 문서는 일반적으로 확장자가 .html인 파일로 저장되며, 텍스트 편집기를 사용하여 작성할 수 있습니다. HTML 문서는 일반적으로 다음과 같은 구조로 이루어져 있습니다

<!DOCTYPE html>
<html>
<head>
    <title>웹 페이지 제목</title>
</head>
<body>
    <!-- 웹 페이지 콘텐츠 -->
</body>
</html>
  • <!DOCTYPE html>:이 문서가 HTML5 문서임을 선언합니다.
  • <html>의 의미 :HTML 문서의 최상위 요소를 정의합니다.
  • <head>의 의미: 웹 페이지의 메타데이터와 연결된 외부 파일을 포함하는 부분입니다.
  • <title>의 의미: 웹 페이지의 제목을 정의합니다. 브라우저 탭에 표시됩니다.
  • <body>:의 의미 웹 페이지의 실제 내용을 정의합니다.

열림 태그와 닫힘 태그

HTML 요소는 일반적으로 열림 태그(<열림태그>)와 닫힘 태그(</닫힘태그>)로 구성됩니다. 열림 태그는 요소의 시작을 나타내고, 닫힘 태그는 요소의 끝을 나타냅니다.

<tag>콘텐츠</tag>

예를 들어, <h1> 태그는 큰 제목을 나타내며, 다음과 같이 사용됩니다

<h1>제목</h1>

이렇게 작성된 태그는 “제목”이라는 텍스트를 큰 제목으로 표시합니다.

HTML 요소와 태그

HTML 요소와 태그: HTML 요소는 웹 페이지의 다양한 부분을 정의하는 데 사용됩니다. 요소는 일반적으로 태그로 표시되며, 태그의 이름은 해당 요소의 종류를 나타냅니다. 몇 가지 일반적인 HTML 요소와 사용 예제를 살펴보겠습니다.

  • <h1>, <h2>, <h3>, … <h6>: 제목 요소를 정의합니다. 숫자가 커질수록 제목의 크기가 작아집니다.
  • <p>: 단락 요소를 정의합니다. 일반적으로 텍스트 단락을 구성하는 데 사용됩니다.
  • <a>: 앵커(Anchor) 요소로, 링크를 정의합니다. href 속성을 사용하여 링크 대상을 지정할 수 있습니다.
<h1>웹 페이지 제목</h1>
<p>이것은 첫 번째 단락입니다.</p>
<p>이것은 두 번째 단락입니다.</p>
<a href="http://www.example.com">예시 링크</a>

HTML 속성

HTML 속성은 요소에 대한 추가 정보를 제공하며, 속성은 일반적으로 시작 태그에 포함됩니다. 속성은 이름과 값의 쌍으로 구성됩니다. 몇 가지 일반적인 HTML 속성과 사용 예제를 살펴보겠습니다:

  • class: 요소에 CSS 클래스를 지정합니다. 여러 요소에 동일한 클래스를 적용할 수 있습니다.
  • id: 요소의 고유한 식별자를 지정합니다. 한 페이지 내에서 고유해야 합니다.
  • src: 이미지 요소(<img>)의 이미지 파일 경로를 지정합니다.
<p class="highlighted">이 요소는 강조 표시됩니다.</p>
<div id="main-content">이 요소는 중요한 콘텐츠를 포함합니다.</div>
<img src="path/to/image.jpg" alt="이미지">

위의 예제에서는 class 속성으로 “highlighted” 클래스를 사용하여 텍스트를 강조표시하고, id 속성으로 “main-content”라는 식별자를 가진 div 요소를 정의하였습니다. 또한, src 속성으로 이미지 파일 경로를 지정하고, alt 속성으로 대체 텍스트를 제공했습니다.

HTML 역사

HTML은 팀 버너스리(Tim Berners-Lee)와 그가 속한 CERN 연구소의 연구진들에 의해 개발되었습니다. HTML은 1990년대 초반에 월드 와이드 웹(World Wide Web)의 핵심 기술로 도입되었으며, 웹 페이지의 구조와 콘텐츠를 기술하기 위한 표준 마크업 언어로 발전해왔습니다.

  • 1989년: 팀 버너스리는 웹의 기본 구성 요소로 사용할 수 있는 하이퍼텍스트 시스템을 제안했습니다. 이는 문서와 문서 간의 링크를 통해 상호 연결된 정보를 구성하는 개념입니다.
  • 1990년: 팀 버너스리는 웹 페이지를 작성하기 위한 최초의 버전인 HTML 1.0을 개발하였습니다. 이는 웹 브라우저를 통해 텍스트와 링크로 이루어진 기본적인 웹 페이지를 작성할 수 있는 기능을 제공했습니다.
  • 1995년: HTML 2.0이 발표되었으며, 이 버전에서는 이미지와 폼 요소 등의 추가적인 기능이 도입되었습니다.
  • 1997년: HTML 3.2가 출시되었으며, 이 버전에서는 표, 이미지 맵, 배경 이미지 등의 기능이 추가되었습니다.
  • 1999년: HTML 4.01이 발표되었습니다. 이 버전에서는 프레임, 스타일 시트, 스크립트 등 다양한 기능이 추가되었으며, 웹 페이지의 표현과 동작을 좀 더 정교하게 다룰 수 있게 되었습니다.
  • 2000년: XHTML(Extensible HTML) 1.0이 발표되었습니다. XHTML은 XML 기반의 HTML로, HTML과 XML의 요소를 결합한 형식입니다.
  • 2014년: HTML5가 완전한 표준으로 승격되었습니다. HTML5는 기존의 HTML 버전들보다 훨씬 강력하고 다양한 기능과 API를 제공하여 멀티미디어, 그래픽, 애니메이션, 웹 애플리케이션 등 다양한 콘텐츠를 다룰 수 있게 되었습니다

주요 HTML 기술자와 기업가

팀 버너스리(Tim Berners-Lee): 팀 버너스리는 웹의 창시자로 알려져 있습니다. 그는 월드 와이드 웹의 개발을 주도하고 HTML을 포함한 웹 기술을 발명하였습니다.

이안 히코즈(Ian Hickson): 이안 히코즈는 HTML5 표준을 주도하고 개발하는 데 큰 역할을 한 개발자입니다. 그는 WHATWG(웹 하이퍼텍스트 애플리케이션 기술 작업 그룹)의 주요 인물로서 HTML5의 발전에 기여하였습니다.

W3C(World Wide Web Consortium): W3C는 웹 표준을 개발하고 유지하기 위한 국제 컨소시엄입니다. HTML의 표준화 작업을 주관하며, 다양한 전문가와 기업이 참여하여 웹 기술의 발전을 이끌고 있습니다.

Google: Google은 웹 검색 엔진을 운영하는 동시에 다양한 웹 기술에 대한 지원과 개발을 수행하는 회사입니다. Google은 HTML5를 지원하고 웹 표준을 장려하는 데 큰 역할을 하였으며, Chrome 브라우저와 같은 웹 기술에 관련된 제품과 서비스를 개발하고 있습니다.

Mozilla: Mozilla는 오픈 소스 웹 브라우저인 Firefox를 개발하고 유지보수하는 비영리 단체입니다. Mozilla는 웹 표준을 적용하고 웹 기술의 개선에 기여하는 활동을 수행하고 있습니다.

Microsoft: Microsoft는 Internet Explorer를 비롯한 여러 웹 브라우저를 개발하고 웹 기술에 관련된 제품과 서비스를 제공하는 회사입니다. 최근에는 Microsoft Edge를 통해 웹 표준을 적용하고 웹 개발자 커뮤니티와 협력하여 웹 기술의 발전에 기여하고 있습니다.

이러한 개인과 기업들은 HTML과 웹 기술의 발전에 큰 영향을 미쳤으며, 웹의 발전과 현재의 웹 생태계를 형성하는 데 중요한 역할을 담당하고 있습니다.

HTML 관련 언어

HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어입니다. HTML 자체는 정적인 콘텐츠를 표현하는 역할을 하지만, 다른 언어와 기술과 함께 사용하여 웹 페이지에 상호작용성을 추가할 수 있습니다.

CSS (Cascading Style Sheets)

CSS는 HTML 문서의 스타일과 레이아웃을 지정하는 스타일 시트 언어입니다. CSS를 사용하여 HTML 요소의 색상, 크기, 배치 등을 제어할 수 있습니다. 이를 통해 웹 페이지의 시각적인 표현을 개선하고 사용자 경험을 향상시킬 수 있습니다.

<style>
  h1 {
    color: blue;
  }
  p {
    font-size: 16px;
  }
</style>
<h1>제목</h1>
<p>이것은 단락입니다.</p>

위의 예제에서는 CSS를 사용하여 <h1> 태그의 색상을 파란색으로 지정하고, <p> 태그의 글꼴 크기를 16px로 지정했습니다.

JavaScript

JavaScript는 HTML 문서와 상호작용하기 위한 프로그래밍 언어입니다. JavaScript를 사용하여 웹 페이지에 동적인 기능을 추가하고, 이벤트 처리, 사용자 입력 처리, 데이터 통신 등을 수행할 수 있습니다.

<script>
  function greet() {
    var name = document.getElementById("name").value;
    alert("안녕하세요, " + name + "님!");
  }
</script>
<input type="text" id="name" />
<button onclick="greet()">인사</button>

위의 예제에서는 JavaScript 함수를 사용하여 사용자로부터 입력받은 이름을 알림 창으로 출력하는 기능을 구현하였습니다. 버튼을 클릭하면 greet() 함수가 실행되고, 함수는 입력 필드의 값을 가져와서 인사 메시지를 생성합니다.

서버 측 언어 (예: JAVA, PHP, Python, Node.js):

서버 측 언어는 웹 서버에서 HTML을 동적으로 생성하고 데이터베이스와 상호작용할 수 있는 기능을 제공합니다. 서버 측 언어는 HTML을 동적으로 생성하여 사용자에게 맞춤형 콘텐츠를 제공하거나, 양식 데이터를 처리하고 저장하는 등의 작업을 수행합니다.

<?php
  $name = $_POST["name"];
  echo "안녕하세요, " . $name . "님!";
?>
<form method="post" action="">
  <input type="text" name="name" />
  <input type="submit" value="인사" />
</form>

위의 예제는 PHP를 사용하여 사용자로부터 이름을 입력받아 인사 메시지를 생성하는 기능을 구현한 것입니다. 입력된 이름은 <form> 요소의 POST 메서드를 통해 서버로 전송되고, PHP는 전송된 데이터를 처리하여 결과를 출력합니다.

HTML을 연습할 수 있는 사이트

CodePen (https://codepen.io/)


CodePen은 HTML, CSS, JavaScript를 포함한 웹 기술을 실험하고 공유할 수 있는 플랫폼입니다. 사용자들은 온라인 에디터에서 코드를 작성하고 실행한 결과를 실시간으로 확인할 수 있으며, 다른 사용자들과 코드를 공유하고 피드백을 받을 수도 있습니다.

JSFiddle (https://jsfiddle.net/)

JSFiddle은 HTML, CSS, JavaScript 코드를 작성하고 실행할 수 있는 온라인 플랫폼입니다. 코드를 작성하는 영역과 실행 결과를 확인하는 영역이 분리되어 있어 실시간으로 코드의 변화를 확인할 수 있습니다. 또한, JSFiddle은 다양한 프레임워크와 라이브러리에 대한 예제 코드도 제공하고 있습니다.

html5-editor.net(https://html5-editor.net/)

html5-editor.net은 웹 기반의 HTML 편집기로, 사용자들이 브라우저에서 직접 HTML 코드를 작성하고 편집할 수 있는 도구를 제공하는 사이트입니다. 이 사이트에서는 사용자들이 HTML, CSS 및 JavaScript와 같은 웹 언어를 사용하여 디자인과 코드를 작성하고, 결과를 실시간으로 미리 볼 수 있습니다. 이러한 기능은 웹개발자와 프론트엔드 디자이너들이 웹페이지의 레이아웃, 스타일 및 기능을 효과적으로 테스트하고 수정할 수 있게 돕습니다. 이 사이트는 웹개발을 배우거나 기존 프로젝트에 적용하려는 사람들에게 무료로 사용할 수 있는 편리한 도구를 제공합니다.

HTML 관련 서적

html을 배울 수 있는 책들은 굉장히 많습니다. DO it은 다양한 언어를 알려주는 책으로 유명합니다.

책은 개인의 성향을 많이 타며, 연습하기엔 다소 불편하여 온라인 자료들을 보는 것을 추천드립니다.

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤