[TIL] HTML 기초 정리 📙

dosilv·2021년 3월 5일

🎲 목표: 기본적인 html 태그들을 정리해 보자!

🔎 용어

tag(태그): "<"와 ">"로 묶인 명령어
시작태그: <p>
종료태그: </p>
빈 태그: <br />, <hr />, <img />
element(요소): 시작태그부터 종료태그까지의 묶음
<p>이것은 문단~~</p>
attribute(속성): 요소의 시작태그 안에 사용되는 것으로서 더 구체화된 명령어 체계

argument(변수): 속성과 관련된 값
<p align="center">중앙에 정렬된 문단!</p>

* align은 attribute, center는 argument

🔎 tags

📎 기본 구조

<html> : 문서의 범위를 결정

<head> : 문서의 정보를 설정

<body> : 문서의 구조를 설정
<html>
  <head>
  </head>
  <body>
  </body>
</html>

📎 Metadata

－ 스타일, 동작을 설정하거나 다른 문서와의 관계 등 페이지에 대한 정보를 포함하는 요소들
－ 대부분 head 요소 내에 위치하며 화면에 표시되지는 않음

<title> : 페이지 탭에 보여지는 문서의 제목을 설정

<base> : HTML 문서에 포함된 모든 상대 URL들의 기준 URL를 설정

<link> : 외부 리소스의 연결 및 현재 문서와의 관계를 명시
<link href="example.css" rel="stylesheet">
<style> : html 내에서 스타일정보(css)를 설정

<meta> : 다른 메타데이터 요소로 나타낼 수 없는 메타데이터를 나타내기 위해 설정(검색엔진이나 브라우저에 정보 제공)

📎 Embedded

－ 오디오, 비디오, 이미지 등 외부 콘텐츠를 표현하는 요소들

<img /> : 이미지를 삽입

<img srcset="./small.jpg 320w,
             ./medium.jpg 640w,
             ./large.jpg 1024w"
     sizes="(max-width: 480px) 300px,
            (max-width: 800px) 600px,
            900px"
     src="./small.jpg"
     alt="The image" />

* attributes *
   src(필수) - 이미지 url
   alt(필수) - 대체 텍스트
   width - 가로 넓이
   height - 세로 넓이
   srcset - 브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의
   sizes - 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의

<audio /> : 소리 콘텐츠를 삽입

<audio controls src="/media/music.mp3">

* attributes *
   src - 콘텐츠 url
   autoplay - 준비되면 바로 재생
   controls - 제어 메뉴를 표시
   loop - 재생이 끝나면 다시 처음부터 재생
   muted - 음소거 여부

<figure> : 이미지나 삽화, 도표 등의 영역을 설정

<figcaption> : <figure>에 포함되어 이미지나 삽화 등의 설명을 표시
<figure>
  <img src="milk.jpg" alt="A milk">
  <figcaption>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</figcaption>
</figure>

📎 Interactive

－ 사용자와 상호작용하는 요소들

<iframe> : 다른 HTML 페이지를 현재 페이지에 삽입 (중첩된 브라우저 컨텍스트(프레임) 표시)

<canvas> : Canvas API이나 WebGL API를 사용하여 그래픽이나 애니메이션을 랜더링

<dialog> : 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트

<details> : 열림 상태일 때만 내부정보를 보여주는 정보 공개 위젯 생성

<summary> : details 요소와 함께 사용되는 정보 요약 요소
<details>
  <summary>클릭하면</summary>
  <p>보이는 내용~~!</p>
</details>

📎 Heading

－ 각 section의 header를 정의하는 요소들

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

📎 Phrasing

－ 문서의 텍스트를 꾸며주는 인라인 요소들

<a> : 다른 URL로 연결할 수 있는 하이퍼링크를 설정

<mark> : 텍스트를 하이라이팅

<em> : 의미 강조, 이탤릭체로 표시

<strong> : 높은 중요도, 볼드체로 표시

<dfn> : 용어 정의 (title 속성을 사용하여 정의를 나타냄)
<p>오늘 <dfn title="개발자들을 위한 블로그 서비스">벨로그</dfn>를 만들었다!</p>
<ab> : 약어 지정 (title 속성을 사용하여 전체 글자나 설명을 제공)
Using <abbr title="HyperText Markup Language">HTML</abbr> is fun and easy!

📎 Sectioning

－ 문서의 구조와 관련된 요소들
－ 문서의 구조, 아웃라인에 영향을 줌

<header> : 문서의 헤더를 설정 (보통 로고, 제목, 검색 등 포함)

<footer> : 문서의 푸터를 설정 (보통 작성자, 저작권, 관련문서 등 포함)

<main> : body의 주요 콘텐츠를 설정, 한 문서에 하나의 main만 포함 가능

<article> : 독립적으로 구성된 글을 표시

<section> : 같은 성격의 내용을 section으로 묶어 표시
(보통 section 요소가 article 요소를 포함)

<aside> : 문서의 주요 내용과 간접적으로만 연관된 부분 (보통 사이드바로 표시)

<nav> : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획 (메뉴, 목차, 색인 등)

📎 Flow

－ 문서의 자연스러운 흐름에 의해 배치되는 요소들
－ 대부분의 태그가 여기에 (중첩되어)포함

<ol>, <ul>, <li> : 정렬된 목록(ol)이나 정렬되지 않은 목록(ul)의 리스트(li)를 설정
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
* ol요소의 type/start attribute로 정렬 타입/시작점 지정 가능

<dl>, <dt>, <dd> : 용어(dt, definition term)와 정의(dd, definition details) 쌍들의 목록(dl, description list)을 설정
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>