Site icon 지피디아

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

Jeepedia

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>

열림 태그와 닫힘 태그

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

<tag>콘텐츠</tag>

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

<h1>제목</h1>

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

HTML 요소와 태그

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

<h1>웹 페이지 제목</h1>
<p>이것은 첫 번째 단락입니다.</p>
<p>이것은 두 번째 단락입니다.</p>
<a href="http://www.example.com">예시 링크</a>

HTML 속성

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

<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)의 핵심 기술로 도입되었으며, 웹 페이지의 구조와 콘텐츠를 기술하기 위한 표준 마크업 언어로 발전해왔습니다.

주요 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은 다양한 언어를 알려주는 책으로 유명합니다.

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

Exit mobile version