공부일기/부스트코스

HTML - 1. HTML 이해하기

Youngbin Kim 2020. 9. 12. 20:36

 

1. HTML이란?

 

HTML은 웹 페이지를 만들 때 사용하는 프로그래밍 언어이며, 웹 사이트들은 모두 HTML을 사용하여 만들어진다.

HTML은 Hyper Text Markup Language의 줄임말이며, Hyper Text는 링크를 의미한다. 정보를 구조적이고 계층적으로 표현 가능하다.

 

2. HTML 문법

 

  • 태그

HTML내에서 가장 중요하고 기본이 되는 규칙. 무언가를 표시하기 위한 꼬리표, 이름표 코드로 작성시 브라우저가 인식을 하고 내용을 표현하게 된다. <,> 기호를 사용해 표현하며, 각 <,> 사이에 태그 이름이 들어간다. 시작 태그와 종료 태그로 이뤄져 있으며 종료 태그는 태그 이름 앞에 / 기호가 붙는다. 내용을 포함한 태그 전체는 요소라고한다.

<h1> Hello, HTML </h1>

 

  • 속성

태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값. 이름과 값으로 이뤄져 있으며 시작 태그 안에 선언할 수 있다. 하나의 태그에 여러개의 속성을 사용할 수 있고 공백으로 구분한다.

<h1 id='title' class='test'> Hello, HTML </h1>

 

  • 태그 중첩

태그 안에 다른 태그를 선언할 수 있나 중첩해서 사용할 경우 중첩되는 태그는 부모 태그를 벗어나서는 안 된다. 

<h1> Hello, <i>HTML</i></h1>

 

  • 빈 태그

빈 태그들은 입력하는 내용만 비어있을 뿐 ,속성을 통해 화면을 나타내거나 화면에 표시되지 않더라도 다른 용도로 사용할 수 있다. 

<br>
<img src=''>

 

  • 공백

기본적으로 HTML은 두 칸 이상의 공백을 모두 무시한다. 아래의 3가지 태그는 모두 같은 Hello, HTML을 출력한다

<h1>Hello, HTML</h1>
<h1>Hello,     HTML</h1>
<h1>
Hello, 
HTML
</h1>

 

  • 주석

주석은 화면에 노출되지 않고 목적으로만 사용하는 것. <!--로 표시하고, -->로 종료한다.

<!-- 여기에 작성되는 내용들은 모두 주석 처리가 됩니다. -->
<!-- 주석은 여러 줄로 작성할 수도 있습니다.
	<h1>Hello, HTML</h1>
    위 <h1>태그는 브라우저가 해석하지 않습니다.
-->

 

3. 문서의 기본 구조

<!DOCTYPE html>
<html lang='ko'>
 <head>
  <meta charset='UTF-8'>
  <title>HTML</title>
 </head>
 <body>
  <h1>Hello, HTML</h1>
 </body>
</html>

<!DOCTYPE html>: 해당 문서가 어떤 버전으로 작성되었는지 알려주는 선언문. 현재는 html5 버전의 타입을 사용한다. 대소문자 상관없음

<html>: 해당 문서가 어느 언어로 작성되었는지 나타내주는 속성으로 lang이 들어가있다.

<head>: 브라우저 화면에 표시되지 않고 문서의 기본정보, 설정이나 외부 자바스크립트파일 등을 연결하는 역할을 한다. 

charset : 인코딩 형식

<title>: 브라우저 탭바에서 찾아볼 수 있는 제목

<body>: 실제 브라우저 화면에 나타나는 내용들이 나타나는 태그