HTML 기본

peter.p·2022년 1월 24일

html

HTML

목록 보기

6/8

HTML

HTML이란?

HTML은 프로그래밍 언어로 웹 페이지를 만들 때 사용됩니다.

웹 사이트들이 모두 HTML을 사용하여 만들어집니다.

HTML의 의미와 특징

HTML은 Hyper Text Markup Language의 줄임말로 컨텐츠의 구조를 정의하는 마크업 언어입니다.

Hyper Text는 단순한 텍스트를 넘어서 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트 즉, 링크를 의미합니다.

Markup Language는 프로그래밍 언어의 한 종류로 정보를 구조적, 계층적으로 표현 가능하다는 특징이 있습니다.

HTML은 파일 확장자로 .html을 쓰며, 그 파일 안에 html 코드를 작성하게 됩니다.

HTML의 역사

HTML은 1990년대 영국의 물리학자 팀 버너스리가 제안하여 개발되었습니다.

초기 개발 목적은 연구소의 연구원들이 신속하게 정보와 문서를 공유하기 위해서였습니다.

현재의 웹은 문서의 형태는 아니지만, 정보를 공유한다는 목적은 여전히 같습니다.

태그란?

HTML은 태그들의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙입니다.

태그는 '무언가를 표시하기 위한 꼬리표, 이름표'라는 의미가 있으며, HTML에서도 이와 비슷한 의미로 해석됩니다.

우리가 다양한 태그들을 이용해 코드를 작성하면, 브라우저가 이를 인식해 내용을 표현하게 됩니다.

태그를 사용하는 방법

태그는 <, > 기호로 표현하며 <, > 기호 사이에 태그 이름이 들어갑니다.

대부분 태그는 시작 태그와 종료 태그로 이루어지며 종료 태그는 태그 이름 앞에 '/' 기호가 붙습니다.

시작 태그(Start tag)와 종료 태그(End tag) 사이에 실제 화면에 나타나는 내용(Contents)이 위치하게 됩니다.

글로벌 속성은 모든 태그에 사용 될 수 있다

요소란?

내용을 포함한 태그 전체를 요소(Element)라고 합니다.

태그와 요소는 의미가 다르지만 많은 사람이 태그와 요소를 같은 의미로 사용하니 혼동하지 않도록 주의해야 합니다.

정리

HTML에는 많은 종류의 태그들이 있습니다.

태그는 각각의 의미가 있으며 이 의미에 맞게 태그를 사용해야 합니다.

또한, 태그는 HTML뿐만 아니라 XML, SGML, XHTML 등 다양한 마크업 언어에서 모두 사용됩니다.

속성이란?

속성은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미합니다.

속성을 사용하는 방법

속성은 이름과 값으로 이루어져 있습니다.

시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현합니다.

속성값은 홑따옴표(')와 쌍따옴표(")로 감싸 표현합니다.

여러 속성을 사용하는 방법

의미와 용도에 따라 여러 속성이 존재하며 하나의 태그에 여러 속성을 선언할 수 있습니다.

여러 속성을 선언할 때는 공백으로 구분해서 사용합니다.
속성의 선언 순서는 태그에 영향을 미치지 않으며 class를 id보다 먼저 선언해도 결과는 같습니다.

속성의 종류

속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성으로 구분됩니다.

또한, 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분됩니다.

위의 예시에서 쓰인 id와 class 속성은 글로벌 속성입니다.

빈 태그란?

태그는 기본적으로 시작 태그와 종료 태그 2개가 1쌍으로 이루어져 있으며,그 사이에

내용이 들어가게 됩니다.

하지만 태그 중에는 그렇지 않은 태그가 존재하기도 합니다.

이러한 태그를 내용이 없는 빈 태그라고 합니다.

<br>
<img src="">
<input type="">

위는 빈 태그의 예시입니다.

빈 태그는 내용이 없어서 종료 태그가 필요하지 않습니다.

빈 태그의 특징

빈 태그는 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지

않더라도 다른 용도로 사용되는 태그입니다.

빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우입니다.

이런 태그는 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되는 태그라고 합니다.

빈 태그에 대체되는 태그만 있는 것은 아니며 실제로 화면에 출력될 내용이 없어 다른

용도로 쓰이는 태그도 존재합니다.

HTML에서의 공백

기본적으로 HTML은 두 칸 이상의 공백을 모두 무시합니다.

<h1>Hello, HTML</h1>
<h1>Hello,     HTML</h1>
<h1>
    Hello,
    HTML
</h1>

HTML은 두 칸 이상의 공백과 개행을 모두 무시하기 때문에 위 세가지 모두 같은 텍스트가 화면에 나타나게 됩니다.

HTML에서의 주석

주석은 화면에 노출되지 않고 메모의 목적으로만 사용하는 것을 의미합니다.
HTML 파일 내에 주석으로 표시를 해주면 브라우저는 해당 부분을 인식하여 해석하지 않습니다.
주석의 시작은 표시로 종료합니다.

HTML의 기본 구조

HTML의 기본 구조는 웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용으로 크게는 문서 타입 정의와 <html>요소로 구분합니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>Hello, HTML</h1>
    </body>
</html>

문서 타입 정의(문서 형식 정의)

<!DOCTYPE html>
문서 타입 정의(문서 형식 정의)는 보통 DTD(doctype)라고 부릅니다.

이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문이며 반드시 문서 내 최상단에 선언되어야 합니다.

`<html>`요소

문서 타입 선언 후에는 <html>태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그가 있습니다.

<html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미합니다.

<head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않습니다.

대신 문서의 기본 정보 설정이나 보관, 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 합니다.

<meta> 태그는 문서와 관련된 정보를 담습니다.

charset 속성은 문자의 인코딩 방식을 지정하고 meta charset="utf-8" 같은 경우에는 해당 HTML문서에서 한글을 사용할 수 있음을 브라우저에 전달할 수 있습니다.

<title> 태그는 브라우저에서 탭의 제목이나 즐겨찾기를 했을 때 이름으로 볼 수 있다.

<body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, 앞으로 우리가 다루는 태그들 대부분이 모두 여기에 해당이 됩니다.

위 코드는 가장 기본적인 문서 구조로, 보통은 이보다 더 많은 태그가 들어가게 됩니다.

기본적인 레이아웃

레이아웃(layout): 웹사이트의 가장 기본이 되는 것.
많은 개발자들이 웹 사이트를 개발할 때 특정 레이아웃을 선호하게 되면서 HTML5에서 레이아웃을 아예 태그로 만들어 각 요소의 쓰임을 명확하게 구분하였는데 이러한 태그를 아울러 시멘틱 태그(Sementic tag)라고 한다.

<body>
  <header> <!--웹페이지 or sectoin의 소개나 제목-->
    <p>peterpppp</p>
  </header>
  <nav> <!--페이지 이동을 위한 메뉴-->
    <p>menu</p>
  </nav>
  <section> <!--기준에 따라 구획을 구분-->
    <p>article</p>
    <article> <!--주 내용을 담기위해 사용하는 요소-->
      <p>first article</p>
    </article>
    <article>
      <p>second article</p>
    </article>
  </section>
  <aside> <!--광고 또는 사이트의 주변 부분 담는 요소-->
    <p>advertisement</p>
  </aside>
  <aside>
    <p>advertisement</p>
  </aside>
  <aside>
    <p>advertisement</p>
  </aside>
  <footer> <!--웹사이트 가장 하단, 회사나 사이트 정보 담는 요소-->
    <p>company info</p>
  </footer>
</body>

<hearder>요소는 웹페이지 혹은 <section>의 소개나 제목을 담기위해 사용됩니다.
<nav>요소는 내비게이션 역할을 수행하고 페이지 이동을 위한 메뉴를 주로 담습니다.
<section>요소는 기준에 따라 구획을 구분하기 위해 사용합니다. 기준에 맞는 <article>을 담습니다.
<article>은 주 내용을 담기위해 사용하는 요소입니다.
<aside>는 광고 또는 사이트의 주변 부분에 해당하는 내용을 담습니다.
<footer>는 웹사이트의 가장 하단에 들어가는 요소로 회사 정보나 사이트 정보등의 추가 정보를 담습니다.