WEB1-HTML 문서의 구조와 슈퍼스타들

2020. 6. 8. 21:47

HTML의 문서 구조를 이루는데 쓰이는 태그( 그래서 HTML에서 가장 많은 빈도수로 쓰이는 태그들)를

배웠다.

그것은 아래 표에 나오는 것과 같이 <head>, <body>, <html>, <title>, <meta> 이다.

가장 많이 쓰이는 태그들이라 강사님이 슈퍼스타라고 칭했다ㅎㅎ

이제부터 이것들을 각각 설명해보면 다음과 같다.

지금까지 내가 만든 웹페이지의 제목은 위에서 보는거와 같이 파일경로와 파일명으로 되어 있는데

이것을 <title> 태그로 알맞은 제목으로 변경 할수 있다.

그리고 아래에 제목을 쓰면서 HTML 문서의 구조도 완성해보려고 한다.

제목과 문서의 구조를 완성하려고 추가 시킨 태그들을 각각 설명해보면 다음과 같다.

<!doctype html>은 이 웹페이지가 html로 만들어졌다는 것을 알려주는 코드이고 일종의 개발자들이 이렇게 하고자 한 약속이다.

<body>는 본문을 표시하는 태그로 본문을 감싸주는 태그이다.

<head>는 본문을 설명하는 태그를 감싸주는 태그이다.

<html>은 <head>와<body>를 감싸주는 태그이다.

<title>은 제목을 쓸때 쓰는 태그이고 태그 안에 제목을 써주면 된다.

웹페이지를 열때도 utf-8방식으로 열어줘야 하기 때문에 이 태그를 사용해서 UTF-8 방식으로 열어라고

meta> 태그를 사용해서 지정해준것이고 meta 뒤에 charset="utf-8" 이라고 써주면 된다.

또한 영어가 아닌 한글을 쓰면 깨지게 되는데 이는 웹페이지가 저장된 문자 표현 방식과

웹브라우저가 웹페이지를 해석하는 방식이 일치하지 않을때 이상한 글자로 깨지면서 표현 되는건데

이것 또한 한글이 제대로 표시 되게끔 해결하려면 meta 태그를 사용하여 해결하면 된다.

이렇게 여기까지 알아본 태그들은 html을 만든 사람들이 이런식으로 문서를 구조화 해서 정리하라고 약속 해놓은 것들이다.

이제 코드를 실행해서 웹에 띄워보면 웹페이지 제목과 한글이 잘 표시 되어 있는것을 알수있다.

* 느낀 점

HTML로 프로그래밍을 할때도 일반적인 문서에도 표지와 제목 안의 내용 이런것들이 구조화 되어 있듯이

이런 문서 구조가 있다는게 신기했고 코드를 해석 할때도 가독성을 높여주어서 편리성이 있을거 같다는

생각이 들었다,