HTML 문법, 속성, 주석 의 기본적인 사용 방법 정리

HTML 을 사용 하기 위한 가장 기본적인 문법, 속성 그리고 주석 의 기본적인 사용 방법에 대해서 정리 합니다.

설명 배경 : 추후 사이트 운영에 필요한 내용을 위해 기본 정보를 다루는 것 입니다.

HTML 기본 문법

HTML 은 아래와 같은 요소로 이루어지게 됩니다.

<tagname>Contents</tagname>

태그는 각자의 의미를 가지고 있으며 다음과 같은 형태를 가짐.
태그는 열리고 open 닫히는 close 태그 구조를 가지고 있는 한 쌍 입니다. ( 시작 start 와 종료 end 구조 라고 도 합니다. )
위 <tagname>, Contents, </tagname> 이 모두 요소 (element) 라고 합니다.
- <tagname> : 시작 태그
- </tagname> : 종료 태그
- Contents : 내용
일반 적으로 사용하는 Lorem ipsum 를 예로 설명 하면,
- 요소 : P 요소
- 시작 태그 : 
- 종료 태그 : 
- 내용 : Lorem ipsum

참고: p 태그는 paragraph 의 머릿글자 p 를 본떠서 만든 태그 입니다. Paragraph 란 '절' , '단락 (段落)' 이라는 뜻이며 따라서 p 태그는 HTML 문서 내 문장의 단락을 표시하는데 사용 됩니다. 주요 특징은  태그 다음은 다음의 단락과 구분하기 위해 한 줄을 강제로 비운 다는 것 입니다.

HTML 속성

태그는 태그(요소) 의 기능을 확장하기 위해 '속성'을 사용 할 수 있으며 속성은 아래와 같이 구성 됩니다.

기본 구조

<tagname 속성="값">Contents</tagname>

일반적으로 사용하는 텍스트 색상 속성을 red 로 변경 할 때 아래와 같이 사용 합니다.
- 속성값 (value) 은 큰 따옴표로 감싸도 되고, 작은 따옴표로 감싸도 됩니다.
- 따옴표를 사용하지 않아도 무관 합니다. 다만, 속성값에 공백이 있다면 따옴표로 감싸 주어야 정상적으로 적용이 됩니다.

<p style="color:red;">Lorem ipsum</p> 
<p style="color: red;">Lorem ipsum</p> 
<p style='color:red;'>Lorem ipsum</p> 
<p style='color: red;'>Lorem ipsum</p> 
<p style=color:red;>Lorem ipsum</p>

문법 특성

아래와 같이 따옴표 없이 공백이 포함 된 경우 잘못 된 문법 이지만 Contents 까지 영향을 미치지는 않습니다.
- Lorem ipsum 의 글자가 붉은 색으로 표기 되지는 않지만 Lorem ipsum 이라는 내용은 정상적으로 출력 됩니다.
- HTML은 문법이 틀려도 나타낼 수 있는 만큼 나타내는 게으른 언어 라고 보면 됩니다.

<p style=color: red;>Lorem ipsum</p>

HTML 주석

주석은 Comment 라고 하며, 웹 브라우저가 인식 하지 못하는 코드 입니다. 기본 구성은 아래와 같습니다.

<!-- Comment -->

 사이에 표기 하고자 하는 내용을 추가 하면 됩니다.
주석은 줄 바꿈이 있어도 동일하게 모두 적용 됩니다.

<!--
Comment 1
Comment 2
-->

주석 내부에 주석을 다시 포함 하게 되면 정상적으로 작동 하지 않을 수 있습니다.
- 아래의 경우 Comment 2 는 주석 처리 되지 않고 브라우저에 출력 되어집니다.

<!-- 
<!-- 
Comment 1 
--> 
Comment 2 
-->

주의: 주석은 웹 브라우저에서 출력이 되지는 않지만 개발자 도구를 통해 페이지 소스를 확인 하면 모두 확인 할 수 있습니다.

마무리

이렇게 HTML 의 기본적인 문법 에 대해 알아 보았습니다. HTML 은 웹을 구성 하는 뼈대가 되는 부분이니 이해 하고 진행 하길 바랍니다.