​​ # 01 HTML파일 만들기에 대한 기본구조 이해

# 01 HTML파일 만들기에 대한 기본구조 이해

HTML이 무엇인가를 설명하는 것보다는 HTML 파일을 직접 만들어 보는 것이 개념을 이해하는데 훨씬 도움이 됩니다. 그래서 우선 HTML 파일은 무엇으로 만드는지 부터 설명하면서 홈페이지 기초 강좌를 설명하겠습니다.

 

HTML 파일은 메모장으로 간단하게 만들 수 있습니다. 메모장을 이용하여 HTML(Hypertext Markup Language) 형식에 맞도록 태그를 작성하여 *.html(혹은 *.htm)이라는 확장자로 저장하면 됩니다.

 

기본적으로 대부분의 홈페이지 HTML 소스코드는 전통적인 방법은 메모장으로 작성하는것입니다. 수많은 웹페이지 작성의 가장 기본은 메모장을 이용한 소스코드편집, 그리고 이를 통한 실제 눈에 보여지는 웹페이지의 제어 입니다.

 

이제 메모장을 열어 실습을 해보겠습니다.

메모장을 열어서 아래 그림과 같이 타이핑을 해봅시다. 이러한 구조는 앞으로 공부하게 될 모든 인터넷 문서의 기본구조 입니다. 

 

 

 

잘 보시면 대부분의 태그는 <개똥이>  </개똥이> 이런 구조입니다. /가 없는 괄호는 해당태그소스의 시작을 알리는 것이며, 괄호속에 /가 들어가 있는것은 해당태그소스가 거기서 끝난다는 의미 입니다.

 

요약하면 [ <HTML>  인터넷문서 시작  <HEAD> 머리통 시작 </HEAD> 머리통 끝남 <BODY> 몸뚱이 시작  </BODY> 몸뚱이 끝남 </HTM> 인터넷문서 끝남 ] 이런 구조이고 이것이 인터넷 문서의 기본구조입니다.

 

자이제 위에서 메모장에 다 기입하셨으면 다른이름으로 저장을 누르시고 뒤의 파일 확장자만 TXT가 아닌 HTM이라고 바꿔서 저장해봅시다. 메모장은 그대로 띄워둔 상태에서 저장된 문서를 열면(저는 크롬으로 열었는데 어떤 브라우저이던지 상관 없습니다) 다음과 같은 모습입니다. 

 

 

 

위의 브라우저창이 바로 여러분이 만드신 HTM 또는 HTML 문서 입니다.

 

눈치가 빠른 분은 아셨겠지만 <FONT>  </FONT> 이것은 글씨 폰트에서 대해서 설정하는 태그입니다. 저것은 폰트컬러를 빨간색으로 지정하는 코드 이구요.

그 다음으로 <BR/> 이라고 써진 태그가 보이는데 그것은 단일태그 하나로 작동하는 줄바꾸기 명령어 태그 입니다.

 

이제 메모장 파일의 태그들을 칼라를 GREEN으로 바꾸어 보시고 아무곳에나 <BR/>태그를 더 넣어 보십시요. 그다음 메모장에서 저장을 누그로 브라우저창에서는 새로고침 (단축키는 F5)을 해보면 바로 적용된 인터넷문서 페이지를 보실수 있습니다.

 

단축키 F5와 Crtl F5의 차이점

 

이제 여려분은 인터넷 홈페이지 작성의 전문가가 되셨습니다.

댓글

Designed by JB FACTORY