1. HTML(Hypertext Markup Language)의 정의와 기능

1. HTML(Hypertext Markup Language)의 정의와 기능

안녕하세요!!

 

오늘은 HTML의 정의와 기능에 대해서 알아보려고 합니다.

 

한번 확인해봅시다!

 

• HTML은 웹 페이지를 만들기 위한 Markup 언어이다.
• HTML은 구조가 단순하고 다른 프로그래밍 언어에 비해 단순한 구조를 가지고 있어 문법이 쉽다.
• HTML로 웹페이지의 구조를 잡을 수 있습니다.
• HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있습니다.

HTML은 위 특징 말고도 다른 많은 특징들이 있습니다.

 

2. HTML 파일

HTML파일은 끝에 .html 확장자가 붙은 테스트 파일입니다. 

 

파일 이름은 다음과 같이 정할 수 있습니다.

 

• index.html
• main-page.html
• loginPage.html
• 1.html

브라우저만 있으면 HTML로 작성한 파일을 바로 확인이 가능합니다.

1. 텍스트 편집기(메모장, vim 등등 여러가지 에디터)같은 앱을 열고
2. 아무 글을 적은다음 .html파일로 저장
3. 해당 파일을 브라우저로 open

저는 우분투를 사용하여 vim을 사용해서 test.html파일을 생성 후 안에 '아무거나 적어주세요 ~'를 입력 후 저장

 

그리고 만들어진 파일을 더블 클릭하여 열어보았더니 새로운 웹페이지가 켜지면서 제가 적은 

 

'아무거나 적어주세요 ~'가 나왔습니다.

 

위와 같은 방법으로 생성해 주시면 됩니다.

 

3. HTML tag

HTML은 위에서 마크업 언어라고 설명드렸죠?

 

어디가 제목이고, 어디가 이미지인지 그리고 어디가 텍스트인지 표시하는 것을 마크업이라고 하는데

 

마크업할 때 사용하는 약속된 표기법을 '태그(tag)'라고 합니다.

 

여기서 HTML의 기초 용어(tag, content, attribute, element)를 알아보도록 하겠습니다.

3 - 1. tag(태그), contant(내용)

제가 위에서 HTML 설명해 드렸듯 마크업 언어는 어디서 부터 어디까지가 제목인지 또는 이미지인지 또는 텍스트인지

 

표시한다고 했는데 이것을 tag로 구분을 합니다.

 

<opening tag> 와 <closing tag>로 감싸 제목인지, 내용인지 구분을 합니다. 

 

예를 들어

<h1></h1>
<h2></h2>
<p></p>

위와 같이 <h1> 태그를 사용하여 태그의 시작을 알리고 closing tag에 똑같은 <h1>에 / 를 불여 끝내줍니다. </h1>

 

위와 같이 모든 태그들이 다 </>태그로 끝나는 것은 아닙니다. 예외로 

<img>
<br>

위와 같은 태그들은 끝내는 태그가 없습니다.

 

자세한 부분은 뒤에서 같이 확인해보도록 합시다!

 

3 - 2. attribute(속성)

속성은 시작 태그에 위치하며 한 태그에 여러 속성을 지정할 수 있습니다.

 

아래에서 확인해 보도록 합시다.

<div class="title">시작!</div>
<a href="https://naver.com">네이버로 이동</a>
<img src="./me.png" alt="내사진">

 

 

위와 같이 태그 안에 속성을 넣어서 작성하는 태그들도 있습니다. 

 

자세한건 뒤에서 확인해보록 하겠습니다.

 

3 - 3.element(요소)

<tag>로 시작하여 </tag>로 끝나는데 그 사이에 있는 내용을 element(요소)라고 합니다.

<h1>빈코더</h1>
<h2>안녕하세요</h2>

위와 같이 '빈코더, 안녕하세요'가 요소에 속합니다. 

 

1장은 여기서 마치도록 하겠습니다.

 

감사합니다 !