곰돌이 놀이터

[HTML] HTML이란? 본문

Front-End/HTML

[HTML] HTML이란?

달나라 곰돌이 2018. 6. 25. 01:02

내가 기억하는 HTML 과의 첫 만남은 중학생 시절 나모웹에디터를 통해 처음 홈페이지를 만들면서 였다.

나뿐만 아니라 누구나 한번쯤은 홈페이지를 만들기 위해 HTML을 접해봤을것이다.

 

그렇다면 HTML이 무엇이길래 HTML 만으로도 홈페이지를 만들수 있게 해주는것인지 알아보자.

 

HTML의미 

HTML 은 Hyper Text Markup Language 의 약자로 "문서와 문서가 링크로 연결되어있는 마크업 언어" 라는 뜻이다. 

특히 HTML 은 여러 태그들로 구성되어 있는데 이러한 태그(Tag)를 이용하여 표시할 내용의 성격이나 기능을 표현하는것 것을 마크업이라고 한다. 

간단하게 HTML 이란 "태그를 이용해 웹 페이지의 구조를 설명하고 페이지를 구성, 작성하는 표준 마크업언어 이다." 라고 설명할수 있다.

 

 

기본구조 

<html>

<!-- HTML 문서 정의 -->

<head>

<!-- 문서에 대한 정보 -->

<title>

<!-- 문서의 제목 -->

</title> 

</head>

<body>

<!-- 문서의 내용 -->

</body>

</html>

기본형식 

<태그명 속성="값" 속성 ="값"> 내용 </태그명>

여기서 <태그명> 이 시작을 알리고 </태그명> 이 끝을 알리는 역활을 해주며 태그의 적용 범위가 끝났음을 알려준다. <태그명> 과</태그명> 사이에 싫제로 출력될 내용을 포함한다. HTML은 대소문자 구별이 없으며, 태그 사용시 주의 사항은 태그를 교차하여 사용할수 없다. <br/>나 <img/> 등 종료 태그를 가지고 있지 않는 태그는 뒤쪽에 '/'를 넣어 준다. 태그는 종류에 따라 별도의 속성을 가지고 있으며 태그의 속성은 시작 태그에서 지정한다. 여러개의 속성을 사용할수 있으며 속성의 구분은 공백으로 한다. 속성값을 입력할 때는 따옴표("")를 이용한다.

 

태그의 특징 

■ 태그는 대소문자를 구분하지 않는다.

→ 웹 표준에서는 소문자 사용을 권장한다.
 

■ 여는 태그와 닫는 태그로 구성되어있다.

 "<>"안에 태그를 작성하며 닫는 태그에는 "/"를 붙인다.
 

■ 중첩이 가능하다.

 요소안에 요소를 포함할 수 있다. 
 

■ 띄어쓰기는 두번 이상 중복되지않는다.

 중복하여 띄어쓰기를 하여도 한번만 적용된다.
 

■ 단일 태그가 존재한다.

 닫는 태그가 존재하지 않으며 스스로 컨텐츠를 갖는 태그를 말한다.
 
 

구성요소 

 

■ 요소(Elements) 

 

 HTML에서 시작과 종료 태그로 나타내지는 모든 명령어들을 뜻합니다.

 

 

■ 태그(Tag)

 

 시작 태그와 종료 태그 두가지 종류가 있으며 
시작 태그는 요소의 시작을 나타내고 종료 태그는 요소의 끝을 나타낸다.
 예외적으로 일부 태그중에는 종료 태그가 없는경우도 존재한다.

 

 

■ 속성(Attributes)

 

 시작 태그와 종료 태그 안에서 사용하는 것으로 구체화된 명령어를 말합니다.
ex ) <p>의 color이나 font-size이라는 속성을 사용.

 

 

■ 변수(Arguments)

 

 속성과 관련된 값입니다.
즉, text-align= "center" 이라 할 때 변수는 center 입니다.
 

끝으로 

HTML을 배운다는것은 홈페이지 만드는 법을 배우고 웹상에서 보일수 있도록 구현하는다. HTML로 작성된 웹 문서는 인터넷만 연결돼있다면 간단한 마우스 클릭만으로 쉽게 페이지를 이동하면서 원하는 정보를 얻을수 있게 한다.  이 과정에서 우리의 눈에 태그가 보이지 않는 이유는 웹 브라우저가 해당 내용을 렌더링 한 후 태그는 내용을 표현하는 방법으로만 사용하였기 때문이다.

이처럼 웹 브라우저를 통해 HTML문서를 읽어서 눈에 보이는 웹페이지를 만든다.

 

여기까지 HTML의 특징에 대해 간단히 정리해보았고,

다음엔 자주쓰이는 다양한 태그의 종류와 각 태그가 갖는 의미에 대해 알아보겠다.

'Front-End > HTML' 카테고리의 다른 글

[HTML] 웹표준이란?  (0) 2019.03.23
Comments