웹 개발의 핵심 기초 HTML의 이해

HTML이란

HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 표준 마크업 언어입니다. HTML은 웹 브라우저에게 웹 페이지의 구조와 내용을 어떻게 표시할지 알려주는 역할을 합니다.
"HyperText"는 하이퍼링크를 통해 다른 페이지나 사이트로 즉시 이동할 수 있는 텍스트를 의미합니다. 이러한 기능은 인터넷의 기본적인 작동 방식인데, 사용자가 정보를 비선형적으로 탐색하고 상호작용하는 것을 가능하게 합니다.
"Markup Language"는 "마크업 언어"라는 뜻으로, 일반적인 텍스트와 함께 "태그"라고 불리는 특수한 문자열을 사용하여 문서의 구조를 설명합니다. 이 태그들은 웹 브라우저에게 해당 부분의 내용이 제목인지, 단락인지, 목록인지 등을 알려줍니다.
HTML 문서(즉, 웹 페이지)는 일반적으로 HTML 요소로 구성됩니다. 이 요소들은 시작 태그와 종료 태그 그리고 그 사이에 위치한 실제 컨텐츠로 이루어져 있습니다. 예를 들어 <p>태그는 단락(paragraph)을 나타내며 <h1>부터 <h6>까지의 태그는 서로 다른 수준의 제목(heading)을 나타냅니다.
HTML5라고 불리는 최신 버전의 HTML에서는 멀티미디어 요소(<audio>, <video> 등), 그래픽 요소(<canvas>, <svg> 등), 심지어 성능 개선과 보안 강화를 위한 다양한 API(Application Programming Interfaces)도 포함되었습니다.
결론적으로, HTML은 월드 와이드 웹(World Wide Web)에서 정보를 구조화하고 의미있게 전달하는 기본 도구입니다. 모든 웹 개발자들은 HTML에 대해 깊게 알아야 하며, 대부분의 프론트엔드 프레임워크나 라이브러리도 내부적으로 HTML과 밀접하게 작동합니다.

HTML의 기본 구조

HTML(HyperText Markup Language)은 웹 페이지를 구성하는 기본적인 언어입니다. HTML 문서는 여러 태그들로 이루어져 있으며, 각 태그는 특정 요소를 나타냅니다. 이제 HTML의 기본 구조와 문법에 대해 자세히 알아보겠습니다.

html

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

이 코드에서 볼 수 있듯이, 모든 HTML 문서는 <!DOCTYPE html>으로 시작합니다. 이 선언은 웹 브라우저에게 이 문서가 최신 버전의 HTML(즉, HTML5)을 사용하고 있다는 것을 알려줍니다.
<html> 태그는 전체 웹 페이지를 감싸며, 그 안에는 <head>와 <body> 두 개의 주요 섹션이 포함됩니다.
<head> 섹션에는 메타 정보(예: 문자 인코딩, CSS 스타일시트 링크 등), 웹 페이지 제목 등이 위치합니다. <title> 태그로 정의된 제목은 브라우저 탭에 표시됩니다.
<body> 섹션은 실제로 사용자가 브라우저에서 보게 될 콘텐츠를 포함합니다. 예제에서 볼 수 있는 <h1>과 <p>같은 태그들이 여기에 위치하게 됩니다.

HTML의 주요 문법

태그와 요소

HTML에서 가장 중요한 개념 중 하나가 바로 "태그"입니다. 위 예제에서 볼 수 있는 것처럼, 대부분의 HTML 요소들은 시작 태그(<tagname>)와 종료 태그(</tagname>)로 이루어져 있습니다.

예를 들어, 아래 코드 조각은 "Hello World!"라는 텍스트를 담고 있는 단락(paragraph) 요소를 나타냅니다.

html

<p>Hello World!</p>

여기서 p가 바로 "태그 이름"입니다. <p> 형태가 시작 태그이며 </p> 형태가 종료 태그입니다. 이 두 태그 사이에 위치한 "Hello World!"라는 텍스트가 바로 이 요소의 "콘텐츠"입니다.

속성

HTML 요소들은 종종 "속성"을 가집니다. 속성은 추가 정보를 제공하거나 요소의 동작 방식을 변경하는 데 사용됩니다.

예를 들어, 아래 코드 조각에서 a 태그는 href라는 속성을 가지고 있습니다.

html

<a href="https://hardcoding-record.tistory.com/">나의 탐구일지</a>

이 경우, href 속성은 링크가 클릭되었을 때 사용자를 어디로 보낼지를 정의합니다. 이 예제에서는 사용자가 링크를 클릭하면 "https://hardcoding-record.tistory.com/"으로 이동하게 됩니다.

주석

HTML에서 주석은  형태로 작성합니다. 주석 내부의 내용은 웹 브라우저에 의해 무시되므로, 코드 설명 등 개발자만 보기 위한 메모를 작성하는 데 사용할 수 있습니다.

html

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more content here later -->

이처럼 HTML은 웹 페이지 구조를 만들기 위한 간단하지만 강력한 도구입니다. 기본적인 태그와 문법만 알아도 다양한 콘텐츠와 구조를 만드는 것이 가능합니다.

HTML5의 새로운 기능과 특징

HTML5는 HTML의 최신 버전으로, 웹 개발에 있어서 많은 변화를 가져왔습니다. 이전 버전들에 비해 향상된 성능, 보다 나은 사용자 경험, 그리고 더 많은 기능을 제공함으로써 웹 페이지와 웹 애플리케이션을 더욱 강력하게 만들 수 있게 되었습니다. 다음은 HTML5의 주요 새로운 기능과 특징들입니다.
멀티미디어 지원: HTML5는 <audio>와 <video> 태그를 도입함으로써 오디오와 비디오 콘텐츠를 직접적으로 재생할 수 있게 되었습니다. 이로 인해 외부 플러그인(예: Flash)에 의존하지 않고도 멀티미디어 콘텐츠를 웹 페이지에 쉽게 포함시킬 수 있게 되었습니다.
그래픽 및 애니메이션: <canvas> 태그는 2D 그래픽을 그릴 수 있는 영역을 제공하며, SVG(Scalable Vector Graphics)와 WebGL(Web Graphics Library)는 각각 벡터 및 3D 그래픽을 지원합니다.
설문지 형태(Form)의 개선: HTML5에서는 여러 가지 새로운 입력 유형(input types)이 추가되었습니다. 예를 들어, 날짜(date), 시간(time), 검색(search), 이메일(email), 등등이 있습니다.
웹 스토리지(Web Storage): 이 기능은 클라이언트 사이드에서 데이터를 안전하게 저장할 수 있는 방법을 제공합니다. sessionStorage와 localStorage 두 가지 메인 객체가 있으며, 각각 세션 데이터 저장과 영구 데이터 저장에 사용됩니다.
Geolocation API: Geolocation API는 사용자의 현재 위치 정보를 가져오는 기능을 제공합니다(사용자의 동의가 필요).
Drag and Drop API: 드래그 앤 드롭(Drag and Drop) 인터랙션이 네이티브로 지원됩니다.
Web Worker API: 웹 워커(Web Worker)는 백그라운드 스크립트 실행을 가능하게 하여, 복잡한 연산을 메인 스레드에서 분리하여 사용자 인터페이스의 반응성을 향상시킵니다.
Semantic Elements: HTML5는 웹 페이지의 구조를 더욱 명확하게 설명할 수 있도록 새로운 의미론적 태그를 도입하였습니다. 이에는 <header>, <footer>, <article>, <section>, <nav> 등이 포함됩니다.
이와 같은 HTML5의 새로운 기능과 특징들은 웹 개발에 있어서 더 많은 가능성을 제공합니다. 이들 기능들을 활용하면 보다 강력하고 풍부한 사용자 경험을 제공하는 웹 페이지와 애플리케이션을 만들 수 있습니다.

'IT정보' 카테고리의 다른 글

컴퓨터 발전 과정 이해하기 (0)	2023.10.09
CSS 기본 개념과 구문을 알아보자 (0)	2023.10.08
PHP 깊이 있는 입문 가이드 (0)	2023.10.07
자바(Java) 완벽한 입문 가이드 (0)	2023.10.07
파이썬(Python)코딩 초보자를 위한 가이드 (0)	2023.10.04