HTML: 구조와 필수 태그에 대해 "왜?"라고 물으면 답할 수 있으신가요?

\n\n> HTML: 구조와 필수 태그에 대해 "왜?"라고 물으면 답할 수 있으신가요?\n# HTML: HyperText Markup Language

HTML 은 'HyperText Markup Language' 의 약자로 웹 페이지의 내용과 구조를 정의합니다. 예를들어 '이건 제목이야', '여기에는 이미지가 들어가' 같은 정보를 브라우저한테 알려주는거죠.

HTML: 기본 구조

HTML 은 아래와 같은 기본 구조를 따릅니다.

HTML 기본 구조

HTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>title</title>
  </head>
  <body>
    <h1>h1 tag</h1>
  </body>
</html>

HTML: 태그(tag)

HTML 기본 구조의 코드에 <html></html>, <head></head>, <body></body>, <h1></h1> 같이 꺾쇠(<>)로 감싸진 것들을 태그(tag)라고 합니다.

태그는 보통 <head></head>, <h1></h1> 처럼 여는 태그(<...>)와 닫는 태그(</...>) 한 쌍으로 쓰이고, 그 사이에 실제 내용이 들어갑니다.

여러가지 태그
- <h1>제목</h1>: 여는 태그와 닫는 태그 안의 텍스트가 제목을 나타낸다.
  - <h1>: 여는 태그
  - </h1>: 닫는 태그
- <meta charset="utf-8"/>: <tag /> 형태로 스스로 닫는 형태로 표시할 내용이 없고 설정만 전달하는 경우에 사용하고 빈태그(empty tag)라고 합니다.

HTML: 기본 구조를 구성하는 태그의 의미

<!DOCTYPE html>: html5 규격을 따르는 문서이다.
<html lang="ko">: HTML 문서 전체를 감싸는 태그, lang 은 문서의 기본 언어를 의미
- <head></head>: 화면에는 보이지 않는 웹 페이지에 대한 메타 데이터(인코딩, 제목, 외부 리소스 등 문서 정보) 태그를 안에 정의한다.
  - <meta charset="utf-8">: 해당 페이지에 대한 문자 인코딩 정보
  - <title></title>: 브라우저 탭에 표시되는 웹 페이지 제목
- <body></body>: 실제 화면에 보이는 모든 내용을 정의한다.
  - <h1></h1>: 웹 페이지에 대한 제목

HTML: 여러가지 기본 태그

HTML에는 많은 태그가 존재합니다. 가장 많이 사용되는 기본 태그들만 골라서 정리해보겠습니다.

Header:

~

제목(헤딩)을 나타내는 태그로, 숫자가 작을수록 더 중요한 큰 제목입니다.

XML

<h1>가장 중요한 제목</h1>
<h2>두 번째 수준 제목</h2>
<h3>세 번째 수준 제목</h3>

Paragraph: `<p></p>`

일반적인 본문 텍스트를 담는 문단 태그입니다.

XML

<p>이 문장은 하나의 문단을 나타냅니다.</p>

Hyper Link: `<a></a>`

다른 페이지나 주소로 이동하는 하이퍼링크를 만드는 태그입니다. href 속성은 이 링크가 어느 주소(URL)로 이동할지를 나타냅니다.

XML

<a href="https://example.com">예시 사이트로 이동</a>

Img: `<img />`

화면에 이미지를 표시하는 태그로, src에 이미지 경로, alt에 이미지 설명을 적습니다.

XML

<img src="/images/logo.png" alt="사이트 로고" />

주의할 점

1. 브라우저마다 기본 스타일이 다르다

같은 HTML이라도 Chrome, Safari, Firefox에서 다르게 보일 수 있다. CSS Reset이나 Normalize.css를 사용해서 기본 스타일을 통일해야 한다.