HTML 이해하기

Tino-Kim·2022년 1월 16일
0
post-thumbnail

🥴 HTML 이해하기

  • Hyper Text Markup Language (HTML)
  • 확장자는 html이다.
  • Hyper Text는 링크를 의미한다.
  • 태그와 요소는 그냥 같다고 생각하면 된다.

    정리..!
    태그, 속성, 태그의 중첩, 빈 태그, 공백, 주석 + 문서의 기본 구조

📌 태그 tag

  • 꼬리표, 이름표를 의미한다.
  • 태그에는 의미가 있고, 의미에 맞게 사용해야한다.
  • 마크업 언어는 모두 태그를 이용한다.
<h1>내용-실제로 브라우저에 나타내는 내용을 의미한다.</h1>
# <h1> 시작 태그를 의미한다
# </h1> 종료 태그를 의미한다

📌 속성 attribute

  • 이름, 값으로 이루어져 있다.
  • 이름="값" 또는 '값'
  • 하나의 태그에 여러 개의 속성이 가능하다.
  • id와 class는 대표적인 것이다.
<h1 id='title'>내용-실제로 브라우저에 나타내는 내용을 의미한다.</h1>
<h1 id='title' class='test'>내용-실제로 브라우저에 나타내는 내용을 의미한다.</h1>

📌 태그의 중첩 nesting tags

  • 안의 태그는 부모 태그를 벗어나면 안된다. 엇갈리면 안된다.
  • 예외적으로, 정해진 태그끼리만 가능한 경우가 있다.
<h1>, <i>, </i>, </h1> (o)
<h1>, <i>, </h1>, </i> (x)

📌 빈 태그 empty tag

<br>
<img src=''> # 이미지 삽입하기

📌 공백 space

  • 1칸 이상의 공백은 모두 무시한다. 동일한 결과로 나온다.
<h1>Hello, HTML</h1>
<h1>Hello,     HTML</h1>
<h1>
Hello, 
HTML
</h1>
  • 개행도 동일한 결과로 나온다. 개행을 쓰는 이유는 나중에 공부하면서 알아가기~!

📌 주석 comment tags

<!--주석을 달 내용을 적어주기-->
<!--HTML은 한 칸 이상의 공백을 무시한다-->
<!--HTML은 심지어 개행도 무시한다-->

📌 문서의 기본 구조 HTML documents

  • 문서의 기본 구조 HTML Documents
  1. doctype
  2. html - head, body
  • lang: 표시되는 언어로 들어간다. 어느 언어로 작성되었는가?
  • charset: 인코딩 적어주기.
  • title은 브라우저 탭 바에 들어간다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 문서의 기본 구조</title>
</head>
<body>
    <h1>Hello, HTML</h1>   
</body>
profile
알고리즘과 데이터 과학과 웹 개발을 공부하는 대학생

0개의 댓글