HTML/이론

02_HTML 태그

Chae A 2024. 9. 30. 11:44

HTML 태그를 시작하기 전에

HTML 태그는 웹 문서에 보여 줄 내용을 전달하는 언어이므로 정확하게 사용해야 합니다.

 

HTML 태그는

• 대문자로 표시해도 오류가 생기지는 않지만 HTML 최신 버전에서는 소문자로 작성할 것을 권장하고 있습니다.

• <img>나 <br>처럼 닫는 태그가 없는 것도 있지만 대부분 태그는 여는 태그와 받는 태그가 한 쌍으로 이루어져 있어, 브라우저는 여는 태그에서 닫는 태그까지를 태그의 적용범위로 인식하기에 여는 태그와 닫는 태그를 정확히 입력합니다.

• 코드에 공백이 여러 칸 있어도 한 칸으로 인식되기에 적당하게 들여쓰기를 합니다.

• 태그에 여러 기능을 추가하는 속성과 함께 사용할 수 있습니다. 즉, <태그 속성="속성값" 속성="속성값"...>형태로  일부태그는 속성과 함께 사용합니다.

웹 문서의 구조를 만드는 시맨틱 태그

HTML태그는 이름만 봐도 의미를 알 수 있어 시맨틱태그(semantic)라고 합니다.

Tip 시맨틱이란 '의미론적인', '의미가 통하는 '이라는 뜻이 있습니다.

 

시맨틱 태그의 필요성

첫째, 웹 브라우저가 HTML 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있기 때문입니다.

둘째, 문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트 기기의 가양한 화면에서 웹 문서를 표현하기 쉽기 때문입니다.

 

웹 문서의 주고를 만드는 주요 시맨틱 태그

•  헤더 영역을 나타내는 <header>태그

- <header>태그는 말 그대로 헤더 영역을 의미 합니다.

 

•  네비게이션 영역을 나타내는 <nav>태그

- <nav>태그는 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듭니다.

- 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있습니다.

Tip 웹 문서에서 <nav>태그를 여러 개 사용할 경우 각각 id 속성을 지정하면 내비게이션마다 다른 스타일을 적용할 수 있습니다.

 

•  핵심 콘텐츠를 담는 <main>태그

- <main>태그는 웹 문서에서 핵심이 되는 내용을 넣습니다.

- <main>태그는 웹 문서에서 한 번만 사용할 수 있습니다.

 

•  독립적인 콘텐츠를 담는 <article>태그

- <article>태그는 아티클(article)의 사전적 의미인 신문이나 자지의 기사처럼 웹에서 실제로 보여주고 싶은 내용을 넣습니다.

- 문서안에는 <article>태그를 여러 개 사용할 수 있고, 이 안에는 <section>태그를 넣을 수도 있습니다.

 

•  콘텐츠 영역을 나타내는 <section>태그

- <section>태그는 웹 문서에서 콘텐츠 영역을 나타냅니다.

- <section>태그는 몇 개의 콘텐츠를 묶을 때 사용하고, <article>태그는 블로그의 포스트처럼 독립된 콘텐츠로 씁니다.

Tip 단순히 스타일을 적용하려고 콘텐츠를 묶으려면 <section>대신 <div>를 사용합니다.

 

 

•  사이드 바 영역을 나타내는 <aside>태그

- <aside>태그는 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽 사이드 바를 만듭니다.

 

•  푸터 영역을 나타내는 <footer>태그

- <footer>태그는 웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만듭니다.

- 푸터 영역에는 <header>태그를 비롯하여 <section>,<article> 등 다른 시맨틱 태그를 모두 사용할 수 있습니다.

 

•  여러 코드를 묶는 <div>태그

- <div> 태그는 <div id="  ">나 <div class="  ">처럼 id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용합니다.

Tip <div>태그에서 div는 division의 줄임말입니다.

HTML에서 주석 달기

주석(commment)이란 코드에 붙이는 설명글을 말합니다.

주석은 개발자를 위한 것이므로 웹 브라우저에서는 해석하지도 않고 화면에 표시하지도 않습니다.

 

기본형

<!-- 주석내용-->

VS Code의 편집 창에서 주석을 붙이고 싶은 위치에 커서를 놓고 Ctrl + ?를 누르면 <!--   -->가 자동으로 입력 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 헤더 영역 -->
  <header>
  <!-- 로고 -->
    <img src="" alt="">
    <h1></h1>
  </header>
  <!-- 네비게이션 영역 -->
  <nav>
  </nav>
</body>
</html>