본문 바로가기
프론트엔드/HTML

[HTML] 개념 정리

by LaDiuM 2024. 11. 12.
목차

    [HTML] 개념 정리

    HTML(HyperText Markup Language)은 웹 페이지를 구성하는 기본 언어로, 웹 콘텐츠의 구조와 의미를 정의하는 마크업 언어다. HTML은 텍스트, 이미지, 링크 등 웹 페이지의 콘텐츠를 정의하고 구조화하며, 브라우저가 이를 해석하여 웹 페이지를 렌더링하게 한다. HTML은 웹 기술의 근본적인 요소로, 웹 페이지가 시각적으로 어떻게 나타나야 하는지 기본적인 가이드라인을 제공하지만, 직접적인 스타일링은 포함하지 않는다.

    1. HTML의 탄생 배경

    HTML은 1991년 팀 버너스 리(Tim Berners-Lee)에 의해 처음 개발되었으며, 초기에는 과학자들 사이에서 문서를 공유하기 위해 문서 간의 참조를 통한 이동을 지원하는 하이퍼링크 개념을 도입, 이를 텍스트로 즉시 이동 할 수 있게 정의한 개념이 하이퍼텍스트이다. 이를 기반으로 마크업 언어를 통해 HTML 기본적인 구조를 지원하였고, 시간이 흐르면서 다양한 요소들이 추가되며, 여러 표준화 단계를 거쳐 현재의 HTML5에 이르게 되었다.

    2. HTML의 기본 구조

    HTML 문서는 항상 고유한 기본 구조를 갖추고 있다. 기본적인 HTML 문서는 <!DOCTYPE html> 선언으로 시작하여, 그 뒤로 <html>, <head>, <body> 등의 태그가 포함된다. 이러한 구조는 웹 브라우저가 문서를 올바르게 해석하고, 표시하는 데 중요한 역할을 한다.

    • DOCTYPE 선언: <!DOCTYPE html> 선언은 HTML5 문서를 나타내며, 브라우저가 HTML5의 최신 표준을 따르도록 한다.
    • html 태그: <html> 태그는 문서 전체를 감싸며, 그 안에 <head>와 <body> 영역이 포함된다.
    • head 태그: <head> 태그에는 문서의 메타데이터, 스타일, 스크립트, 그리고 페이지 제목 등이 포함된다.
    • body 태그: <body> 태그는 실제 웹 페이지에 나타나는 콘텐츠(텍스트, 이미지, 링크 등)를 담는다.
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample HTML Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a sample HTML document.</p>
</body>
</html>

    3. HTML 요소와 태그

    HTML은 여러 요소(element)로 구성되며, 각 요소는 열고 닫는 태그(tag)로 감싸여 있다.(마크업 언어) 태그는 <> 기호로 둘러싸여 있으며, 태그 이름에 따라 각기 다른 의미와 기능을 갖는다.

    • 기본 태그: h1~h6 (제목), p (문단), a (링크), img (이미지) 등
    • 빈 태그: 일부 태그는 닫는 태그 없이 단일 태그만으로 사용된다. 예: <img src="image.jpg" alt="Sample Image">

    3.1 태그 사용 예제

    <!-- 제목 태그 (Heading), h1 ~ h6까지로 크기를 조절, 낮은 레벨일수록 강조된다. -->
<h1>첫 번째 제목 강조</h1>
<h4>네 번째 제목 강조</h4>

    첫 번째 제목 강조

    네 번째 제목 강조

    <!-- 단락 (Paragraph) -->
<p>단락 작성</p>

    단락 작성

    <!-- 굵게 및 이탤릭(기울어진) 강조 (Bold & Italic) -->
<p><strong>굵은 텍스트</strong>와 <em>이탤릭 텍스트</em></p>

    굵은 텍스트와 이탤릭 텍스트

    <!-- 이미지 삽입 (Image), 속성은 하단에서 설명, 현재 예시에서는 이미지를 찾지 못해 엑박으로 표시 -->
<img src="sample-image.jpg" alt="예시 이미지" width="300" height="200">
    예시 이미지
    <!-- 링크 삽입 (Link), 하이퍼링크 방식으로 이동-->
<a href="https://www.example.com" target="_blank">예시) 웹사이트 방문</a>

    <!-- 리스트(list) -- >
<!-- HTML의 리스트는 순서가 있는 리스트(ol), 순서 없는 리스트(ul)로 구분된다. -->

<!-- 순서 없는 리스트 (Unordered List) -->
<ul>
    <li>순서가 없는 리스트 아이템 1</li>
    <li>순서가 없는 리스트 아이템 2</li>
    <li>순서가 없는 리스트 아이템 3</li>
</ul>
    • 순서가 없는 리스트 아이템 1
    • 순서가 없는 리스트 아이템 2
    • 순서가 없는 리스트 아이템 3
    <!-- 순서가 있는 리스트 (Ordered List) -->
<ol>
    <li>순서가 있는 리스트 아이템 1</li>
    <li>순서가 있는 리스트 아이템 2</li>
    <li>순서가 있는 리스트 아이템 3</li>
</ol>
    1. 순서가 있는 리스트 아이템 1
    2. 순서가 있는 리스트 아이템 2
    3. 순서가 있는 리스트 아이템 3
    <!-- 테이블 (Table) HTML 테이블은 행을 tr, 테이블 제목은 th -->
<!-- 테이블 데이터는 td태그를 사용하여 표현한다. -->
    <table border="1">
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>직업</th>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>30</td>
            <td>개발자</td>
        </tr>
    </table>

    -- 테이블 (Table) --

    이름 나이 직업
    홍길동 30 개발자

    4. HTML 속성

    HTML 속성은 태그에 추가 정보를 제공하며, 속성은 항상 여는 태그에 위치한다. 일반적인 속성으로는 id, class, style, src, href 등이 있으며 특정 기능을 위한 태그 전용 속성과 공통 속성이 있다.

      • 공통 속성: id, class, style 등으로 현재 태그를 선택하는 역할을 하거나 스타일을 꾸미는 등 공통적으로 사용하는 속성.
      • 태그 전용 속성: src, href 등으로 이미지 태그라면 소스의 위치를 지정, 링크라면 주소를 적는 등의 역할을 함.

    5. HTML의 최신 표준 - HTML5

    HTML5는 HTML의 최신 버전으로, 여러 새로운 요소와 기능을 도입하여 웹 페이지의 구조를 더욱 의미 있게 만들고 다양한 멀티미디어 콘텐츠를 쉽게 구현할 수 있도록 했다.

        • 새로운 시맨틱 태그: <header>, <footer>, <article>, <section>, <nav> 등은 콘텐츠의 의미를 더 명확히 표현하는 데 도움을 준다.
        • 비디오와 오디오 지원: HTML5에서는 <video> 및 <audio> 태그를 통해 플러그인 없이 멀티미디어 콘텐츠를 직접 포함할 수 있다.
        • 폼 요소 확장: date, email, number와 같은 다양한 입력 타입이 추가되어 폼을 더욱 쉽게 구성할 수 있다.

    6. 결론

    웹페이지는 HTML을 토대로 JavaScript와 CSS로 동적 기능과 스타일링을 구현하며 이외의 다양한 기술을 통해 현대의 웹의 모든 것을 구성하고 있으며 HTML은 그 구조를 지지하는 웹에서의 핵심적인 언어라고 할 수 있다.

    티스토리툴바