HTML은 하나의 문서(포스팅)를 처음부터 끝까지 표현하는 언어입니다.
한국어와 영어에도 문법이 있듯이, HTML언어에도 문법이 존재합니다.
오늘은 HTML의 기본 문법에 대해 알아보려고 합니다.
이 기본 문법만 알고 있다면, 우리는 HTML의 기본 뼈대를 추출해 낼 수 있습니다.
◆ 태그에 관하여
HTML을 알기 전에 간단하게 태그의 특징에 대해 정리하겠습니다.
'태그' 란 웹 상에서 약속된 표기법을 말합니다.
여기서 여기까지는 이미지이고, 여기서 여기까지는 텍스트라고 컴퓨터에게 알려주는 역할을 합니다.
한글로 치면 '단어'와 비슷하다고 볼 수 있습니다.
이건 사자고, 이건 호랑이다.라고 알려준다고 보시면 됩니다.
1. 태그는 < > 를 이용해 구분한다. (필수)
HTML코드를 보면 <h1> 같이 < >로 이루어진 문자들이 있습니다.
이것이 바로 HTML태그이며, 태그를 입력하기 위해서는 "<"과 ">"를 꼭 써주어야 합니다.
2. 포함 관계를 명확히 한다. (필수)
HTML태그는 단순히 하나의 태그만 사용하지 않을 때도 있습니다.
태그 안에 속성값을 넣거나, 여러 태그를 동시에 사용할 때도 많지요.
그럴 때는 태그 간의 포함 관계를 명확히 하여야 합니다.
기본적으로는 <h1><b> ~~~ </b></h1>와 같이 큰 태그 안에 작은 태그를 넣는 방식입니다.
3개의 태그를 동시에 붙여주려면 <h1><p><i> ~~~ </i></p></h>와 같이 하시면 됩니다.
3. 여는 태그와 닫는 태그가 따로 존재한다. (일부 필수)
앞서 태그는 < > 사이에 넣는다고 하였습니다.
이때 명령을 시작하는 태그와 명령을 종료하는 태그가 한 쌍을 이루고 있습니다.
시작할 때는 <h1>을 앞에 사용해주고 끝낼 때는 </h1>처럼 '/'를 꼭 써주어야 합니다.
| 맞음 | 틀림 |
| <h1> 사랑한다 </h1> | <h1> 사랑한다 <h1> <h1> 사랑한다 사랑한다 </h1> |
하지만, 일부 필수인 데는 이유가 있습니다.
여러 태그 중에 예외인 태그가 존재하기 때문입니다.
대표적으로는 <br> 태그가 있습니다. 바로 뒤 포스팅에서 배울 태그인데, 이 태그는 줄을 바꿔주는 태그입니다.
이 태그는 예외적으로 명령을 종료하는 태그가 존재하지 않습니다. (예외!!)
| 맞음 |
| <p> 오늘도 즐거운 하루였다. <br> 그는 웃었다. </p> |
4. 태그는 소문자로 사용하는 게 좋다. (권장)
HTML 태그가 대소문자를 구별하지는 않습니다.
하지만, HTML5 공식문서에 의하면 소문자를 사용하는 것을 권장한다고 합니다.
| 권장 | 권장하지 않음 |
| <p> , <h2> | <P> , <H2> |
5. 적당히 들여 쓴다. (권장)
기본적으로 HTML 태그는 여러 번 띄어쓰기를 하더라도 한 칸의 공백으로 인식합니다.
그렇기 때문에, 들여 쓰지 않아도 문법적으로는 아주 큰 오류가 없습니다.
하나, HTML 소스를 작성하는 것은 컴퓨터가 아닌 사람입니다.
HTML를 들여 쓰지 않을 경우 전체 구조가 잘 보이지 않습니다. HTML 소스를 단계별로 들여 써서 태그 간의 포함관계를 눈으로 쉽게 확인하세요.
| 권장 | 권장하지 않음 |
| <h1>안녕?<h1> <p>내 이름은<br> <p>전문가야</p> |
<h1>안녕?<h1> <p>내 이름은<br> <p>전문가야</p> |
◆ HTML 문서 기본 구조
웹 문서는 아무리 길이가 길어도 반드시 <!doctype>, <html>, <head>, <body>의 네 가지 태그를 이용해 문서의 시작과 끝이 정해집니다.
궁금하시다면, 아무 사이트에 들어가서 [Ctrl+U] (소스코드 보기)를 눌러보시기 바랍니다.
1. <!doctype> - 문서 유형을 지정하는 선언문
<!doctype>은 웹 브라우저에게 처리해야 할 문서의 유형을 알려주는 선언문입니다.
HTML4에서는 여러 문제가 있었지만, HTML5부터는 단 한 줄로 문서 유형을 선언합니다.
<!docytpe html> 이라고만 쓰면 컴퓨터는 "이 문서는 HTML5에 맞추어 해석하면 되는구나!"라고 이해합니다.
2. <html> - 웹 문서 시작을 알리는 태그
<!doctype>로 문서 유형을 선언한 후, 실제 문서에 관한 정보와 내용은 <html> 태그를 통해 표시합니다.
<html> 태그는 웹 문서가 시작된다는 뜻이고
</html> 태그는 웹 문서가 끝났다는 뜻입니다. 따라서 </html> 뒤에는 아무 내용도 존재하지 않습니다.
또한, <html>에는 lnag이라는 속성을 사용할 수 있습니다.
lang은 문서에서 사용할 언어를 지정하는 속성입니다.
한국어의 경우 lang="ko"라고 속성을 지정하시면 됩니다. (영어의 경우 lang="en", 일본어는 lang="ja")
검색 사이트에서 검색 대상에서 제외하거나 포함시키기 위해 사용합니다.
lang="ja"라고 HTML을 작성하면, 한국어로 검색 제한을 둘 경우 검색되지 않습니다.
즉, <html lang="ko">를 컴퓨터는 "한국어가 사용된 웹 문서 시작합니다!"라고 이해합니다.
3. <head>- 브라우저에게 정보를 주는 태그
웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아야 할 정보들은 모두 <head> 태그 사이에 입력합니다.
예시를 하나 들자면, <head> 사이에 <title>이라는 태그를 넣을 수 있습니다.
4. <body> - 실제 브라우저에 표시될 내용
뒤에서 충분히 배우겠지만 <h1>, <p>, <br>, <b> 태그들을 이용하여 우리가 실제로 보는 부분을 표시합니다.
이 글도, 사진도, 표도 다 <body> ~~ </body> 사이에 수많은 태그들이 사용된 것입니다.
5. <meta> - 문자 세트를 비롯한 문서 정보를 주는 태그
메타 데이터는 '데이터에 대한 데이터'를 말합니다.
메타 태그도 메타 데이터와 비슷합니다.
<head> 태그와 비슷하게 <meta> 태그는 웹 브라우저 화면에는 보이지 않지만 웹 문서와 관련된 정보를 지정합니다.
특이점이 있다면 <head> ~~ </head> 사이에 들어가는 태그입니다.
위에서 제가 임의로 작성한 코드들을 보시면, <meta>로 작성된 코드들이 있습니다.
하나씩 살펴보도록 하겠습니다.
■ <meta charset = "utf-8">
웹 서버는 영어를 기본으로 하기 때문에 다른 문자를 화면에 표시하기 위해서는 문자 세트를 지정해야 합니다.
이때 위 코드는 utf-8이라는 문자 세트를 사용한다고 웹 브라우저에게 알려줍니다.
■ <meta name="viewport" content="width=device-width, initial-scale=1.0">
모바일 기기의 수요가 증가하기 때문에, 모바일 기기에서도 웹 문서를 제대로 표시할 수 있어야 합니다.
위 코드는 그런 모바일 기기를 고려하기 위해 사용하는 코드입니다.
■ <meta http-equiv="X-UA-Compatible" content="ie=edge">
웹 브라우저의 종류 중에서 '인터넷 익스플로러'가 있었습니다.
'인터넷 익스플로러'는 최신 웹 기술이 사용된 웹문서를 제대로 해석하지 못합니다.
그런 '인터넷 익 수프 포러'를 고려하기 위해 쓰는 코드입니다.
그 외에도 한 가지 코드를 더 소개해 드리자면,
■ <meta name="keywords" content="html5, ">
<meta name="author" content="Me">
<meta> 태그를 사용하여 웹 사이트의 키워드나 글쓴이 등의 정보를 지정할 수 있습니다.
위 코드의 경우 "keywords"를 사용하여 해당 문서의 키워드가 무엇인지 검색 사이트에 제공하고
"author"를 사용하여 문서의 글쓴이(제작자)가 누구인지 검색 사이트에 제공합니다.
물론, 검색 엔진에 따라 참고하는 정보는 달라질 수 있습니다.
코드가 있습니다.
이 정도만 아셔도 모든 HTML 소스의 큰 뼈대를 해석하실 수 있을 겁니다.
다음에는 <body> ~~ </body>에 사용하는 텍스트와 관련된 태그에 대해 설명해 드리겠습니다.
'코딩' 카테고리의 다른 글
| [컴퓨터언어] 텍스트의 일부를 처리하는 태그 16가지 배우기 (HTML공부하기!) - 5 (0) | 2021.06.17 |
|---|---|
| [컴퓨터언어] 텍스트를 하나로 묶어서 처리하는 태그 (HTML공부하기!) - 4 (0) | 2021.06.16 |
| [컴퓨터언어] 웹 브라우저와 웹 편집기 (HTML공부하기!) - 2 (0) | 2021.06.14 |
| [컴퓨터언어] HTML이란? (HTML공부하기!) - 1 (0) | 2021.06.13 |
댓글