[HTML #4] 기본구조 head, body 및 폰트 깨짐방지

서근

2022. 7. 24. 08:09

QUOTE THE DAY

HTML에서 가장 기본이 되는 구조와 폰트가 웹사이트에서 깨졌을때 해결하는 방법에 대해 알아보도록 하겠습니다.

HTML 구조

HTML에는 기본적으로 가장 핵심이 되는 태그가 존재합니다.

<html>
  <head>
  
  </head>
  
  <body>
  
  </body>
  
</html>

위처럼 <html>은 최상단에서 웹사이트를 만드는 기준이 되고, <body> 태그는 본문이라고 생각하면 됩니다.

그렇다면 <head> 태그는 무엇일까요?

기본적으로 HTML에서는 몇 가지 정해놓은 약속 같은 것이 존재하는데, <body>에 만 들어가야 하는 태그들과 그 외적인 태그들을 특정 태그 안에만 넣도록 정해놓았습니다.

본문이 아닌 태그들은 <head> 태그 안에 넣어주면 되는데, 대표적으로 <meta>, <title> 태그 등이 있습니다.

<head> 태그는 <body> 태그 위에 위치시켜주면 됩니다.

<body> 태그는 위에서 언급했듯이 본문이라고 생각하면 됩니다.

위키백과에서 개발자 도구를 열어 구조를 살펴보면 다음과 같습니다.

위 구조처럼 <body> 태그 안에 본문이 들어가게 되고, 그 아래 <div> 같은 요소가 위치하게 됩니다.

만약, 특정 브라우저에서 폰트가 깨지는 현상이 일어났다면 <meta> 태그를 통해 해결할 수 있습니다.

<head> 태그 안쪽에 <meta charset="utf-8">를 추가해주기만 하면 됩니다.

여기서 <meta charset="utf-8"> 태그는 html 파일의 인코딩을 알려주는 태그라고 생각하시면 됩니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

이렇게 오늘은 HTML에서 가장 기본이 되는 구조와 폰트가 웹사이트에서 깨졌을 때 해결하는 방법에 대해 알아보았습니다.

읽어주셔서 감사합니다🤟

[HTML #6] 새로운 게시글 만들기 a, html (2)	2022.07.24
[HTML #5] DOCTYPE - !doctype html (1)	2022.07.24
[HTML #3] 태그 중첩 조합 li, ul, ol (0)	2022.07.24
[HTML #2] 속성 과 링크 a, href="" target="_blank" (1)	2022.07.24
[HTML #1] 태그 (2)	2022.07.24