HTML | Notion

⭐ HTML 문법

📌 기본 형태

태그는 각자의 의미를 가지고 있으며 다음과 같은 형태를 가진다.

<TAG></TAG>
<TAG>CONTENT</TAG>

또한 태그는 열리고 닫히는 태그 구조를 가지고 있으며 이는 한 쌍이다.
이 구조는 태그의 범위를 만들어 준다.

📌 속성과 값

태그(요소)의 기능을 확장하기 위해 **‘속성’**을 사용할 수 있다.

<TAG 속성="값"></TAG>

📌 부모와 자식 요소

태그A가 태그B의 콘텐츠로 사용되면, 태그B는 태그A의 부모 요소, 태그A는 태그B의 자식 요소라고 한다.
부모와 자식 요소는 상대적인 개념

<PARENT>
  <CHILD></CHILD>
</PARENT>

📌 빈 태그

내용(content)이 없다면? ➡️ 이미지, 수평선, 줄바꿈 등
내용이 없는 요소를 빈 요소(Empty element)라 부른다.
이 경우 닫는 태그를 추가로 명시하지 않아도 된다.

<!-- `/`가 없는 빈 태그 -->
<TAG>

<!-- `/`가 있는 빈 태그 -->
<TAG/>
<TAG />

HTML5에서는 위 2가지 형태를 다 사용할 수 있는데, XHTML 버전이나 린트(Lint) 환경 혹은 프레임워크 세팅에 따라 **/**를 사용하는 것이 필수가 될 수 있다.

📌 주석

브라우저는 주석을 무시하여 사용자가 주석을 보이지 않게 한다.
주석의 목적은 코드에 메모를 추가하거나, 혹은 사용하지 않는 코드를 임시로 처리하기 위함이다.

<!-- <p>I am!</p> -->

⭐ HTML 문서의 범위

<!DOCTYPE html>
<html>
  <head>
    문서의 정보
  </head>
  <body>
    문서의 구조
  </body>
</html>

📌 HTML(전체 범위)

**<html>**는 HTML 문서의 전체 범위를 지정
웹 브라우저가 해석해야 할 HTML 문서가 어디에서 시작하며, 어디에서 끝나는지 알려주는 역할을 한다.

속성	의미	값
lang	문서의 언어	`ko`, `en`…

📌 HEAD(정보 범위)

웹 브라우저가 해석해야 할 HTML 문서의 정보 범위를 지정
웹 페이지의 제목, 웹 페이지의 문자 인코딩 방식, 연결할 외부 파일의 위치, 웹 페이지를 구조화하기 위한 기본 세팅 값
화면을 구성하기 위한 기본 설정

📌 BODY(구조 범위)

웹 브라우저가 해석해야 할 HTML 문서의 구조 범위를 지정
사용자가 화면을 통해서 볼 수 있는 내용(콘텐츠)의 형태나 레이아웃 등을 의미
ex) 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 입력창, 팝업, 광고 등
구조는 BODY 범위 안에서만 생성

📌 DOCTYPE(DTD, 버전 지정)

마크업 언어에서 문서 형식을 정의
웹 브라우저에 우리가 제공할 HTML 문서를 어떤 HTML 버전의 해석 방식으로 구조화하면 되는지를 알려준다.
HTML은 크게 1, 2, 3, 4, X-, 5 버전이 있다.
현재의 표준 모드는 HTML5

⭐ HEAD 태그

📌 TITLE(웹 페이지의 제목)

HTML 문서의 제목을 정의
웹 브라우저의 각 사이트 탭에서 이름으로 표시

📌 META(웹 페이지의 정보)

HTML 문서(웹페이지)에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공
빈(Empty) 태그

<head>
  <meta charset="UTF-8">
  <meta name="author" content="이진희">
  <meta name="description" content="우리 사이트가 최고!">
</head>

<!-- 다음과 같이 이해할 수 있다. -->
<문서의정보범위>
  <정보 문자인코딩방식="UTF-8">
  <정보 정보종류="사이트제작자" 정보값="이진희">
  <정보 정보종류="사이트설명" 정보값="우리 사이트가 최고!">
</문서의정보범위>

📌 LINK(CSS 불러오기)

외부 문서를 연결할 때 사용
특히 HTML 외부에서 작성된 CSS 문서(xxx.css 파일)를 불러와 연결할 때 사용
빈(Empty) 태그

<head>
  <link rel="stylesheet" href="./css/main.css">
  <link rel="icon" href="./favicon.png">
</head>

<!-- 다음과 같이 이해할 수 있다. -->
<문서의정보범위>
  <외부문서연결 관계="CSS" 문서경로="./css/main.css">
  <외부문서연결 관계="사이트대표아이콘" 문서경로="./favicon.png">
</문서의정보범위>

속성	의미	값
rel	(필수)현재 문서와 외부 문서와의 관계를 지정	`stylesheet`, `icon`등..
href	외부 문서의 위치를 지정	경로

📌 STYLE(CSS 작성하기)

CSS를 외부 문서에서 작성하여 연결하는 것이 아니고 HTML 문서 내부에 작성할 때 사용

<style>
  img {
    width: 100px;
    height: 200px;
  }
  p {
    font-size: 20px;
    font-weight: bold;
  }
</style>

<!-- 다음과 같이 이해할 수 있다. -->
<스타일정의>
  <!-- CSS 코드 -->
</스타일정의>

⭐ HTML 문법

⭐ HTML 문서의 범위

⭐ HEAD 태그

⭐ BODY 태그

▫️ 시맨틱 웹이란

▫️ 콘텐츠 구분

▫️ 문자 콘텐츠