알토르 1주차 태그

이 태그들은 모든 HTML 문서에 반드시 들어가야 하는, 문서의 기본 틀을 잡는 태그입니다.

<!DOCTYPE html>: 이 문서가 HTML5 표준을 따른다는 것을 선언합니다.
<html>: HTML 문서의 시작과 끝을 나타내는 가장 최상위 태그입니다.
<head>: 문서의 메타데이터(문서에 대한 정보)를 정의하는 태그입니다. 웹 브라우저 화면에는 직접 보이지 않습니다.
- <title>: 브라우저 탭에 표시되는 페이지 제목을 설정합니다.
- <meta>: 문서에 대한 다양한 정보를 정의합니다 (예: 문자 인코딩, 뷰포트 설정 등).
<body>: 웹 브라우저 화면에 실제로 표시될 모든 콘텐츠(텍스트, 이미지, 링크 등)가 들어가는 태그입니다.

텍스트의 의미와 모양을 정의하는 태그들입니다.

<h1>, <h2>, ..., <h6>: 제목(Heading)을 나타내는 태그입니다. 숫자가 작을수록 중요한 제목을 의미합니다. <h1>이 가장 중요하고 <h6>가 가장 덜 중요합니다.
<p>: 일반적인 문단(Paragraph)을 나타내는 태그입니다.
<span>: 특별한 의미 없이 텍스트의 일부분을 감싸서 스타일을 적용할 때 사용합니다.
<a>: 링크(Anchor)를 만드는 태그입니다. href 속성을 사용하여 연결할 주소를 지정합니다.
- 구글로 이동
<strong>: 중요한 텍스트를 나타내며, 보통 굵게 표시됩니다.
<em>: 강조하고 싶은 텍스트를 나타내며, 보통 기울임꼴로 표시됩니다.
<ul>: 순서가 없는 목록(Unordered List)을 만듭니다. 각 항목은 <li> 태그로 정의합니다.
<ol>: 순서가 있는 목록(Ordered List)을 만듭니다. 각 항목은 <li> 태그로 정의합니다.
<li>: 목록의 항목(List Item)을 나타냅니다.

웹 페이지에 이미지, 동영상, 오디오 등을 삽입할 때 사용합니다.

<img>: 이미지를 삽입하는 태그입니다. src 속성에 이미지 파일의 경로를, alt 속성에 이미지를 설명하는 텍스트를 넣습니다.
- <img src="cat.jpg" alt="귀여운 고양이 사진">
<video>: 동영상을 삽입하는 태그입니다.
<audio>: 오디오를 삽입하는 태그입니다.

HTML5에서 추가된 태그들로, 태그 자체에 의미를 부여하여 웹 문서의 구조를 더 명확하게 만듭니다. 검색 엔진 최적화(SEO)에도 도움이 됩니다.

<div>: 특별한 의미 없이 구역을 나누는 태그입니다. 스타일을 적용하거나 자바스크립트로 조작할 때 자주 사용됩니다. <span>과 비슷하지만, <div>는 블록 요소 / <span>은 인라인 요소 / 둘 다 합친 블록-인라인 요소
<table>: 표를 만드는 태그입니다. <thead>, <tbody>, <tr>, <td> 등과 함께 사용됩니다.
<form>: 사용자로부터 입력을 받는 폼(로그인, 회원가입)을 만드는 태그입니다.
- id, name, type 등의 속성을 가진 <input> 태그와 함께 사용합니다.
- <input>은 사용자가 데이터를 입력할 수 있는 필드를 만드는 데 사용되는 태그입니다.
- 단독으로 쓰이지 않고, type 속성을 통해 다양한 형태의 입력 요소를 만들 수 있습니다.
  - text: 한 줄짜리 텍스트 입력 칸을 만듭니다. (가장 일반적)
    - <input type="text">

요소 타입	기본 특징	주로 사용하는 태그
블록	항상 새로운 줄에서 시작 / width, height, 상하좌우 여백 모두 적용 가능	<div>, <p>, <h1>
인라인	한 줄에 이어서 표시 / 좌우 여백만 적용 가능 / 다른 여백 불가	<span>, <a>, <strong>
인라인-블록	한 줄에 이어서 표시 / width, height , 상하좌우 여백 모두 적용 가능	<img>, <input>, 또는 스타일을 변경한 요소

요소의 기본 display 속성 값은 고정

CSS를 이용해 display 속성 값을 변경하여 블록 요소를 인라인으로, 인라인 요소를 블록으로 바꿀 수 있습니다.

이 유연성이 CSS로 레이아웃을 자유롭게 설계할 수 있는 핵심

The Depth Of Moment