본문 바로가기
HTML

[HTML] HTML 시작

by byeongoo 2019. 5. 2.

1. HTML이란?

"Hyper Text Mark-up Language" 의 약자. 웹 페이지의 모습을 기술하기 위한 규약. 프로그래밍 언어가 아니라 마크업 언어[1]입니다. 헷갈리지 않도록 합시다. 웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서입니다. 

 

HTML은 서버에서 보내오는 정보대로 페이지를 그려내는 것에는 강하지만 반대로 사용자의 입력에 민감하게 반응하여 페이지를 그리는 것에는 약한 편입니다. 또한 동적인 화면 구성이 힘들다는 약점도 있습니다. 이를 보완하기 위하여 JavaScript 등의 각종 스크립트의 도움을 받습니다.

 

2. HTML 문서 저장 방법

HTML 문서를 작성한 후 메모장에서 저장할 시, 다른 이름으로 저장을 선택한 뒤, 파일 형식을 '모든 파일 (*.*)'로 지정하고 파일명 끝에 .html이나 .htm을 추가하면 HTML 문서가 됩니다.

 

다음과 같이 Hello World를 웹에 보여주는 예제를 한번 만들어 봅시다.

 

 

Hello World를 작성 후 다른 이름으로 저장을 합시다.

 

 

파일의 이름을 작성 후 끝에 .html을 적어 줍니다. 그리고 파일 형식을 모든 파일로 바꾸고 인코딩을 UTF-8로 변경 후 저장 버튼을 눌러줍니다.

 

 

저장 한 문서를 마우스를 이용해서 웹페이지에 끌어서 html문서를 열어봅시다.

 

여기까지 하시면 이제 html에 입문 하셨습니다!!

3. 태그

HTML을 기술하기 위하여 사용하는 명령어의 집합을 태그(Tag)라고 합니다. 태그는 기본적으로 여는 태그와 닫는 태그로 구성되며, 닫는 태그 없이 단독으로 이용하는 태그도 있습니다. 태그에 주는 다양한 옵션은 모두 여는 태그에 지정하며, 닫는 태그는 태그 효과가 적용되는 범위의 끝을 나타내는 기능만 합니다.

 

간단한 예시를 살펴보겠습니다. 

Hello World <strong>Hello World</strong>

실행 결과1

처음에 작성한 Hello World는 그냥 웹페이지에 나오고, <strong> 태그사이의 문자열은 강조되어서 표시됩니다. 이렇게 태그를 이용하여 웹페이지를 구성할 수 있습니다.

 

<h1>오늘의 명언</h1> 
우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.(도널드 커누스)

실행 결과2

 

 

'HTML' 카테고리의 다른 글

[HTML] html table  (0) 2019.05.08
[HTML] html 태그(p, br, img)  (0) 2019.05.02
[HTML] html 문서의 구조  (0) 2019.05.02
[HTML] 태그의 중첩과 목록(리스트)  (0) 2019.05.02
[HTML] HTML 태그 속성  (0) 2019.05.02