[HTTP] 00. HTML의 기본 구조와 문법

블랑·2023년 3월 8일

html

[FE] - HTML/CSS/JavaScript

목록 보기

2/14

HTML이란?

HTML : HyperText Markup Language의 약자. 마크업 언어로 문서를 태그를 사용하여 표현하며, 1990년도 이후 웹에서 사용하는 문서 양식이다.

HTML5의 특징 :

현재도 개발 중이며, 다양한 기능이 추가되고 있다.
멀티미디어 요소 재생
서버와의 통신 : 서버 - 클라이언트간 소켓 통신 지원
Semantic Tag : 특정 태그에 의미 부여 -> ex) <header>, 검색 엔진에서 해당 내용을 위주로 검색

작동 원리

URL(DNS 서버) 접속을 통한 HTTP 접속
클라이언트의 웹 브라우저가 서버에서 전송한 HTML을 해석하여 웹에 표시

태그와 속성

HTML 문서는 마크업으로, TAG를 사용하여 만들어진다.
태그는 시작과 종료의 쌍으로 이루어지며, 각각의 태그는 속성과 속성의 값이 존재한다.

이러한 태그에는 어느 tag에나 넣어서 사용할 수 있는 글로벌 속성이 존재한다.

주석

HTML에서의 주석은 다음과 같다.

<!--
	내용
-->

/*
	JS의 경우 자바와 동일한 주석 사용 가능
*/

HTML 문서의 구성 요소

HTML 문서는 크게 <head>(기능)과 <body>(내용)으로 이루어진다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>제목이 들어갑니다.</title>
  </head>

  <body>
    내용이 들어갑니다.
  </body>
</html>

Head 요소

문서 머리글(head), 제목(title)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>브라우저 제목 표시줄에 나타남.</title>
    <meta name="author" content="troment" />
    <meta name="description" content="간단한 설명." />
    <meta name="keyword" content="html5, web" />
    <script type="text/javascript"></script>
    <style type="text/css"></style>
    <link rel="stylesheet" href="test.css" />
  </head>
  <body></body>
</html>

Head 요소 - 메타 데이터(meta)

문서 작성자, 날짜, 키워드 등 브라우저의 본문에 나타나지 않는 일반 정보를 나타낸다.
name과 contents 속성을 사용하여 다양한 정보를 나타낸다.
http-equiv 속성을 이용하여 문서 이동 및 새로 고침이 가능하다.
charset 속성을 이용하여 문서의 인코딩 정보를 설정한다.

- 이름 설정 예시.
<meta name = "name" content = "value"

Body 요소

Web Browser에 보여질 문서의 내용을 작성.

[Body]
1. head 태그 다음에 위치하고, head 내부에 위치하는 tag와 <html>을 제외한 모든 태그를 의미한다.

id 속성을 사용하여 문서 내에서 태그를 유일하게 식별할 수 있다. 당연한 이야기지만 id 속성은 유일성을 가지기에 중복될 수 없다.
class 속성을 이용하여 여러 tag에 공통적인 CSS 속성을 부여할 수 있다. 클래스 속성은 중복이 가능하기 때문이다.

[heading]
1. 문장 제목 지정. h1 ~ h6까지 구분하며, 숫자가 커질수록 글자가 작아진다.
2. 문서 구조를 <section> tag를 이용하여 구분하면 각 문단의 제목을 하나의 tag로 작성 가능

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>head tag</title>
  </head>
  <body>
    <h1>문단 제목 h1</h1>
    <h2>문단 제목 h2</h2>
    <h3>문단 제목 h3</h3>
    <h4>문단 제목 h4</h4>
    <h5>문단 제목 h5</h5>
    <h6>문단 제목 h6</h6>

    <section>
      <h1>섹션 문단 제목 1번째</h1>
      <section>
        <h1>섹션 문단 제목 1-1번째</h1>
        <section>
          <h1>섹션 문단 제목 1-2번째</h1>
        </section>
      </section>
      <h1>섹션 문단 제목 2번째</h1>
    </section>
  </body>
</html>