오경석의 개발노트

HTML 정의와 기본구조 본문

프로그래밍 언어/HTML

HTML 정의와 기본구조

OHSAYU 2023. 10. 11. 13:27

    HTML(Hyper Text Markup Language)는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다.

또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하여 대화형 양식을 생성하는 데 사용될 수 있다.

 

    HTML은 웹 페이지 콘텐츠안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트, 본문과 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다. HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여 CSS의 사용을 권장한다.

 

    HTML 마크업은 HTML 요소(엘리먼트, Elements)와 그들의 속성(Attributes)과 문자 기반 데이터 형태와 문자 참조와 엔티티 참조를 포함하는 몇 가지 핵심 구성 요소로 이루어져 있다.

    HTML 문서는 완전한 HTML Elements(요소)로 구성되어 있고, HTML 요소의 가장 보편적인 형태는 세 가지 구성 요소를 가진다: "시작 태그"(Start Tag)와 "종료 태그"(End Tag)와 같은 태그 한 쌍; 몇 가지 요소 속성은 그 태그들 내에서 특성을 부여한다. 마지막으로 문자와 그래픽 정보 콘텐츠를 화면에 표현한다.

    대부분의 HTML Elements Attributes(요소 속성)들은 이름-값 형태이고, "="로 구분하고, 요소의 시작 태그 안에서 요소의 이름 다음에 쓰인다. 값은 외따옴표 또는 쌍따옴표로 둘러쌀 수 있다. 비록 어떤 문자로 구성된 값들이 HTML에서 인용부호 없이 사용될 수도 있지만, 그 값은 따옴표나 쌍따옴표 또는 쌍 인용부호로 둘러쌀 수 있다. 인용부호를 사용하지 않고, 속성값을 사용하는 것은 안전하지 않다.

 

    HTML에는 두가지 종류의 요소가 있다. 블록 레벨 요소(Block level element)와 인라인 요소(Inline element).

  • 블록 레벨 요소(Block level element) : 웹페이지 상에 블록(Block)을 만드는 요소다. 블록 레벨 요소는 앞뒤 요소 사이에 새로운 줄(Line)을 만들고 나타난다. 즉 블록 레벨 요소 이전과 이후 요소사이의 줄을 바꾼다. 블록 레벨 요소는 일반적으로 페이지의 구조적 요소를 나타낼 때 사용된다. 예를 들어 개발자는 블록 레벨 요소를 사용하여 단락(Paragraphs), 목록(lists), 네비게이션 메뉴(Navigation Menus), 꼬리말(Footers) 등을 표현할 수 있다. 블록 레벨 요소는 인라인 요소(Inline element)에 중첩될(Nested inside)수 없다. 그러나 블록 레벨 요소는 다른 블록 레벨 요소에 중첩될 수 있다.
  • 인라인 요소(Inline element) : 항상 블록 레벨 요소내에 포함되어 있다. 인라인 요소는 문서의 한 단락같은 큰 범위에는 적용될 수 없고 문장, 단어 같은 작은 부분에 대해서만 적용될 수 있다. 인라인 요소는 새로운 줄(Line)을 만들지 않는다. 즉 인라인 요소를 작성하면 그것을 작성한 단락내에 나타나게 된다. 예를 들어, 인라인 요소에는 하이퍼링크를 정의하는 요소인 <a>, 텍스트(Text)를 강조하는 요소인 <em>, <strong> 등이 있다. <em>은 인라인 요소(Inline element)이므로 밑에서 볼 수 있듯이 처음 세개의 요소는 서로 같은 줄에, 사이에 공백이 없이 위치한다. 한편 <p>는 블록 레벨 요소이므로 각 요소들은 새로운 줄에 나타나며 위와 아래에 여백이 있다.(여백은 브라우저가 문단에 적용하는 기본 CSS styling 때문에 적용된다)
<em>first</em>
<em>second</em>
<em>third</em>

<p>fourth</p>
<p>fifth</p>
<p>sixth</p>
>>>
first second third
fourth
fifth
sixth

 

HTML 요소(Element)의 구조(출처 : mdn web docs)

 

    HTML 문서는 문서 형식 선언(비공식적으로, "doctype")으로 시작해야 한다. 브라우저에서 doctype의 기능은 렌더링 모드를 지시하는 것이며, 부분적으로는 쿼크 모드를 피하기 위한 목적도 있다. 

   

    대부분의 웹사이트는 HTML 문서를 기반으로 디자인과 가독성을 높이기 위한 CSS 그리고 웹 사이트와 사용자 간의 다양한 상호작요을 구성할 수 있는 자바스크립트(JavaScript)가 덧붙여진 형태이다. 따라서 웹사이트의 보이는 영역을 다루는 프론트엔드 개발을 시작하고 싶다면 HTML, CSS, JavaScript 3가지 언어의 작동 원리 및 문법을 필수적으로 학습해야 한다.

    HTML은 트리구조로 이루어져 있으며 이는 나무의 뿌리가 기둥에서부터 여러 갈래로 갈라지는것처럼 부모 요소 안에서 여러 가지 자식 태그들이 갈라져 나온 형태이다. HTML 문서를 트리구조로 도식화 한다면 아래와 같은 이미지가 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <h1>제목</h1>
    <p>문단</p>
</body>
</html>

HTML 트리구조(출처 : CODE STATES)

 

    HTML 문서를 작성할 땐 <!DOCTYPE html>태그를 시작으로 브라우저에 해당 문서가 HTML임을 명시하고 <html>태그로 전체 틀을 구성한다. 그리고 해당 태그 안에서 크게 <head>와 <body>로 영역을 나눈다. 바디 태그 사이에는 사용자 눈에 보이는, 즉 브라우저를 통해 표시될 내용을 담고 헤드 태그 사이에는 사용자 눈에는 보이지 않지만, 브라우저가 해당 문서를 해석하는데 필요한 여러 정보(metadata)를 표기한다.

HTML 문석 작성 방법(출처 : CODE STATES)

  

 

* HTML 요소는 대소문자를 구분하지 않는다. 그 말은 <title> 요소는 <title>, <TITLE>, <Title>, <TiTlE>들과 같이 사용할 수 있다. 히자만 대게는 가독성과 기타 이유 때문에 소문자로 작성한다.

 

 

출처 : https://ko.wikipedia.org/wiki/HTML

 

HTML - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 하이퍼 텍스트 마크업 언어(영어: Hyper Text Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지 표시를 위해 개발된 지배적인

ko.wikipedia.org

출처 : https://www.codestates.com/blog/content/html-css-%EA%B8%B0%EC%B4%88

 

HTML 및 CSS 기초 입문과 HTML CSS 적용 방법 - 코드스테이츠 블로그

프론트엔드 개발을 시작하고 싶다면 HTML, CSS, JavaScript 3가지 언어의 작동 원리 및 문법을 필수 학습해야 합니다. 웹페이지 뼈대를 이루는 HTML과 HTML 요소의 서식을 지정할 수 있는 CSS, HTML에 CSS를

www.codestates.com

Comments