HTML 소개, 기본 문법 그리고 용어정리

What is HTML?

HTML은 프로그래밍 언어가 아닙니다. 일반적인 프로그래밍 언어는 논리(logic)에 의해 동작하게 만들 수 있어야하죠. 하지만 HTML은 그러한 목적과 용도로 사용되는 언어가 아닙니다. HTML은 HyperText Markup Language의 약자로, 웹 브라우져의 웹페이지 표현 방식을 위한 언어를 말합니다. 영어로 구성되어 있는 HTML을 한 단어씩 분해해서 해석하면 보다 정확한 의미를 파악할 수 있습니다.

 

- Hypertext : 일반 문자(text)를 초월한 그 이상의 텍스트. 즉, 링크기술을 의미합니다.

- Markup Language : 문서의 활자를 지정 표시하는 언어. 활자를 표현하는 방법을 위한 언어입니다.

 

다시 말해, HTML은 일반 텍스트를 초월하고 정해진 법칙에 따라 내용을 표현해주는 문서의 포맷입니다. 웹 페이지를 만드는 언어이며 웹을 구성하는 가장 기초 구성요소라고 할 수 있습니다.

 

HTML 문법

태그 Tag

태그는 HTML에서 가장 중요하고 기본이 되는 규칙으로, 무언가를 표시하기 위한 꼬리표 역할을 합니다. '<', '>' 기호로 표현되며 종료 태그는 그 이름 앞에 '/' 기호가 붙습니다.

<tag> content </tag>

태그는 HTML 뿐 만 아니라 XML, SGML, XHTML 등 다양한 마크업 언어에서 사용될 수 있습니다.

 

요소 Element

요소element는 시작태그와 종료태그, 그리고 한 쌍의 태그 사이에 위치한 내용을 의미합니다. 시작태그와 종료태그 사이의 내용을 컨텐츠contents라고 합니다. 아래의 예에서 시작태그<h1>, 종료태그</h1>, 그리고 내용 'My First Heading'이 한 요소입니다.

<tagname> Contents goes here ... </tagname>
<h1>My First Heading</h1>

 

 

속성 Attribute

속성attribute은 태그에 추가로 정보를 제공하거나 태그의 동작, 표현을 제어할 수 있는 설정 값을 의미합니다. 속성은 시작태그 내부에 위치하며, 이름과 값이 한 쌍으로 표현됩니다. (속성이름="값")

의미와 용도에 따라 여러 속성이 존재할 수 있으며 하나의 태그에 여러 속성을 공백을 이용해 선언할 수 있습니다. 하지만, 속성의 선언 순서는 태그에 영향을 미치지 않으며 결과는 동일합니다. 속성은 모든 태그에서 사용할 수 있는 전역속성(global attribute)와 특정 태그에서만 사용할 수 있는 속성으로 구분됩니다.

<img src="img_sample.jpg" width="500" height="600">

위의 예시처럼 <img>태그의 속성은 이미지 파일 이름, 크기에 대한 정보를 제공합니다.

 

중첩 태그 nested tag 

태그 안에 또 다른 태그를 사용해 중첩 태그nested tag를 사용할 수 있습니다. 단, 반드시 부모 태그 내에서 자식태그가 시작되고 끝나야만 합니다.

<h1>Hello <i>World</i></h1>

 

빈 태그 Empty Tag

시작 태그만 존재하고 종료 태그는 존재하지 않는 태그를 빈 태그Empty Tag라고 합니다. 내용이 들어갈 부분이 없기 때문에 비어있다고 표현합니다. 속성을 통해 화면에 표시되거나 다른 용도로 사용 되는 태그입니다. ex) <br>

기존의 태그는 사용자가 제공한 내용을 화면에 표시했습니다. 하지만, Empty Tag는 브라우저가 직접 화면에 내용을 그려줘야 합니다. 이런 특성을 지닌 태그를 대체 태그Replacement Tag라고 합니다. ex) <img> <input>

<br>
<img src="">
<input type="">

 

공백

HTML에서 한 칸 이상의 공백과 개행은 모두 무시됩니다. 브라우저 상에서 공백 또는 개행을 위해서는 <br>태그를 이용해야 합니다.

<p>
위 아래의 글 
모두 같은 것으로 
출력 
됩니다.
</p>
<p>위 아래의 글 모두 같은 것으로 출력 됩니다.</p>

<p>띄워쓰기를 위해서는 <br>태그를 이용해야 합니다</p>

위 코드의 출력 예시.

주석 comment

주석 comment는 화면에 노출되지 않고 메모의 목적으로만 사용하는 것을 의미합니다. HTML 파일 내에 주석으로 표시하면 브라우저는 해당 부분을 인식하여 출력하지 않습니다.

<!-- 여기에 작성되는 내용들은 모두 주석 처리 된다. -->

반갑습니다. 이 글은 보입니다.

<!-- 주석은 여러줄로 나누어 작성할 수도 있다.
	<h1> Hello, World </h1>
	위의 h1태그는 브라우저가 해석하지 않는다.
-->