티스토리 뷰

Dev WEB /HTML

HTML 이란? 첫 HTML 문서 작성하기

Deok.ME 2015. 9. 14. 13:54

HTML 은 간단히 말하면 컨텐츠 제공자가 사용자에게 컨텐츠를 쉽고 편하게 보여 주기위한 일종의 문서 입니다. 


 HTML 의 약자는 Hyper Text Markup Language 의 약자로 markup tag 로 이루어진 문서 입니다. Tag ( 태그 ) 는 HTML 문서를 구성하는 작은 단위로 태그라고 부릅니다.


일단 아래의 코드로 첫번째 문서를 만들고 설명 드리겠습니다.


<!DOCTYPE html>
<html>
<head>
<title>나의 첫! HTML 문서</title>
</head>
<body>

<div class='content'>
  나의 첫 HTML 문서 입니다!
</div>

</body>
</html>


 이제 위의 코드를 아무 문서에 작성 후 파일 이름은 원하시는대로 하되 아래와 같이 확장자 명은 .html 로 해주시기 바랍니다. 문서 작성은 편하신 에디터 를 이용하시면 됩니다. 메모장으로도 가능합니다.



 이제 이 파일을 웹 브라우져 (익스플로러, Chrome, firefox, safari )에서 열어 주시면 결과를 학인하실수 있습니다. 웹 브라우져는 html 문서를 사용자가 볼수있게 표시해주는 역할을 합니다. 따라서 우리가 보는 웹페이지들은 html 문서가 사용자가 보기 좋게 해석되어 표시되고 있는 것이라고 생각하시면 됩니다.






작성된 파일을 그냥 위와 같이 드래그엔 드롭 으로 여실 수 있습니다.



 이제 여러분의 첫번째! HTML  문서가 작성 되었습니다. 이제 간단하게 위에서 사용된 태그들에 관해서 설명드리겠습니다.


<!DOCTYPE html>

 일단 DOCTYPE 과 함께 <html> </html> 태그가 쓰였는대요. 후에 설명 드리겠지만 DOCTYPE 은 현재 문서의 타입을 설명 합니다. 위에서 사용된 <!DOCTYPE html> 은 HTML 5 를 나타냅니다. 


<head></head>

 위의 head 는 현재 문서에 관한 정보를 담게 됩니다.


<title></title>

 title 은 head 태그 안에 위치하면서 문서의 타이틀을 나타내 줍니다. 주소창 위의 나의 첫! HTML 문서 가 바로 title 부분 입니다.


<body></body>

 body 는 바로 사용자에게 보여질 내용들이 작성 됩니다.


<div class='content'></div>

 div 는 body 안에 위치하면서 일종의 상자(?) 를 만들어 줍니다. 수 많은 html 태그중 하나이며 위의 예제에서는 div 태그의 class 를 content 로 정의해준 경우 입니다.


태그의 특징


 html 태그는 보통 시작 태그 ( ex. <div> ) 그리고 종료 태그 ( ex. </div> ) 로 이루어 집니다. 보시면 아시겠지만 종료 태그 안에는 / 가 들어 가며 해당 태그가 종료 되었다는 것을 표시 합니다. 후에 <input /> 과 같이 종료 태그가 없는 태그도 있긴 하지만 대부분의 태그가 종료태그가 있으니 알아두시기 바랍니다.


저작자표시 비영리 변경금지

'Dev WEB > HTML' 카테고리의 다른 글

HTML 간단한 몇 가지 태그 사용해보기  (0) 2015.10.14
웹에서 Font Awsome 을 이용하여 특수문자 사용하기  (0) 2015.06.28
웹 한글 폰트 깔끔한 '나눔폰트' 를 구글 폰트에서 찾아서 사용하자  (0) 2015.03.07
HTMl Metatag 를 이용하여 다른 페이지로 이동 (리다이렉트) 시키기  (0) 2015.03.05
HTML DIV 와 같은 박스 요소 중앙에 배치하기  (0) 2015.03.03
공유하기 링크
댓글