[ HTML ] 구성과 구조

March 24, 2022

안녕하세요. Kim.YJ 입니다.

이번 포스팅은 HTML 의 기본에 대해 먼저 알아보는 시간을 가져보겠습니다.

기초적인 순서부터 자세히 설명 드릴테니,
천천히 이해하며 진행해 주시면 감사하겠습니다.

[ HTML 이란? ]

HTML [ 출처 : 위키백과 ] (HyperText Markup Language)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
즉, 쉽게말해 웹페이지를 구성하는 부분의 뼈대 역할을 하는 마크업 언어 라고 생각하시면 됩니다.

여러가지 특징을 가지고 있지만, 가장 핵심적인 특징만 짚어보고 가겠습니다.

HTML은 Elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다.

Tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다.

HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트와 본문과 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있습니다.

1. Markup Language(마크업 언어) 란?

Markup Language(마크업언어)는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어중 하나입니다.

태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라 합니다.

2. Elements(요소) 란?

Elements는 HTML에서 시작태그와 종료태그로 이루어진 모든 명령어들을 의미 합니다.

- 빈 요소(Empty elements)

모든 요소가 위에 이미지에 언급된 여는 태그, 내용, 닫는 태그 패턴을 따르는 것은 아닙니다.

주로 문서에 무언가를 첨부하기 위해 단일 태그(Single tag)를 사용하는 요소도 있습니다.

예를 들어 img 요소는 해당 위치에 이미지를 삽입하기 위한 요소입니다.

<img
  src="https://images.velog.io/images/kyj0206/post/af69bf6a-ec42-4054-84b7-b98e61217420/instagram-g00c1c1c22_640.png"
/>

별도의 닫는 태그 없이 사용해도 아래 이미지와 같이 적용되는 것을 확인할 수 있습니다.

3. Attributes(속성) 이란?

Attributes는 속성이란 뜻을 가지고 있습니다.
Html문서에서 Elements에 추가적인 정보를 넣을 때 사용되는 요소입니다.

<div class="name">Kim.YJ</div>

위의 div태그의 “name”라는 클래스 속성을 볼 수 있는데,

div태그는 element(요소)이고,
class는 attrubute(속성)가 되며,
name은 value(값)가 됩니다.

4. Tag(태그) 란?

Tag는 간단히 말해 어떠한 항목을 보충설명 해주는 키워드라고 볼 수 있습니다.

쉽게말해 태그는 데이터의 연관된 정보를 담고 있는 메타데이터의 한 종류 입니다.

- 태그의 종류

태그는 여러가지로 종류를 나눌어줄 수 있지만 크게 3가지로 분류됩니다.

기능에 따른 분류

기능적 분류 태그는 아래와 같은 특징을 가지고 있습니다.
1. 제목, 단락, 목차 태그 등으로 문서 전체를 디자인 합니다.
2. 줄바꿈, 글자 서식 태그 등으로 문서를 디자인 합니다.
3. 링크 태그로 외부 사이트를 연결합니다.
4. 이미지와 표 태그로 시각적 효과를 더합니다.
브라우저에서 구현되는 범위로 분류

[Block]

block 속성은 무조건 한줄을 점유하고 있고,
다음 태그는 무조건 줄바꿈이 적용됩니다.

< h1 > ~ < h6 >, < p> , < li >, < ul >, < ol >, < table >, < pre > 등이 있으며
대표적인 태그로는 < div >가 있습니다.

[Inline]

text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않습니다.

< a >, < em >, < strong >, < b >, < span >, < u >, < img > 등이 있으며
대표적인 태그로는 < span >가 있습니다.
열고 닫는 태그 vs 빈 태그

HTML 태그를 < p > 여는태그와 < /p > 닫는태그를 같이 한 쌍으로 쓰이는지
아니면 < br > 태그와 같이 단독으로 쓰이는가에 따라 분류할 수도 있습니다.

대부분 태그는 여는 태그와 닫는 태그로 구성되지만,
< img >, < br > 등의 빈 태그는 단독으로 사용될 수 있습니다.

Metadata(메타데이터) 란?

Metadata는 데이터에 대한 데이터입니다.

쉽게 말해 가령 도서관에서 사용하는 서지기술용으로 만든 것이 그 대표적인 예입니다.

[ HTML 의 구조 ]

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>HTML 문서 제목</title>
  </head>
  <body>
    <h1>제목입니다.</h1>
    <p>단락 입니다.</p>
  </body>
</html>

이제 어떻게 개별 요소를 결합해 전체 HTML 페이지를 구성하는지에 대해 알아보겠습니다.
바로 위 코드를 보면서 하나씩 구성을 알아보겠습니다.

1. < !DOCTYPE html >

<!DOCTYPE html> 은 유효한 문서 형식을 나타내는 짧은 문장입니다.

2. < html >< /html >

이 요소는 전체 페이지의 콘텐츠를 포함하며, 기본 요소로도 알려져 있습니다.

3. < head >< /head >

이 요소는 홈페이지 이용자에게는 보이지 않지만

검색 결과에 노출 될 키워드
홈페이지 설명
CSS 스타일

위 정보들 외 여러가지 HTML 페이지의 모든 내용을 담고 있습니다.
즉, 웹 페이지의 정보 및 문서에서 사용할 외부 파일들을 링크할 때 사용되는 공간입니다.

4. < meta charset=”utf-8” >

이 요소는 HTML 문서의 문자 인코딩 설정을 UTF-8로 지정하는 것이며 예시에서 지정한 UTF-8에는 전세계에서 사용되는 언어에 대한 대부분의 문자가 포함됩니다.

쉽게 말해 브라우저에게 text를 어떻게 그려달라는지 말해주는 것입니다.
위 태그가 없으면 한글, 특수문자 들이 깨져서 나올 수 있습니다.
반드시 사용해 주어야 할 요소중 하나 입니다.

또한, 이것을 설정하면 나중에 문자 인코딩과 관련된 일부 문제를 피하는 데 도움이 될 수 있습니다.

5. < title >< /title >

이 요소를 사용하면 페이지 제목이 설정됩니다.

페이지가 로드되는 브라우저 탭에 표시되는 제목으로 사용됩니다.
페이지 제목은 페이지가 책갈피 될 때 페이지를 설명하는 데에도 사용됩니다.

6. < body >< /body >

이 요소에는 텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등을 비롯하여 페이지에 표시되는 모든 콘텐츠가 포함됩니다.

지금까지 HTML의 구성과 구조를 포스팅 하였습니다.

도움이 되는 포스팅이었길 바랍니다.

다음 포스팅은 더 유익한 정보로 찾아뵙겠습니다.
감사합니다!

Kim Youngjae