>TIL: HTML 태그

태현·2021년 3월 10일

🙋🏻‍♀️ 목표: 면접을 준비하기 이전에 알았던 내용들에 대한 개념을 정리해 보고 MDN 문서에 나와있는 태그들을 한번씩 다 써보자.

1. Head 태그

🙌앞서 <head> 안에는 웹 페이지에 표시되는 <meta> 정보가 들어간다.

<!-- 1. 페이지에서 사용되는 글자의 포맷(utf-8 = 모든 언어 지원) -->
<meta charset="utf-8">

<!-- 2. Internet Explorer에게 최신 렌더링 엔진을 사용하라고 지시 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- 3. 반응형 웹 디자인 구현을 위해 Viewport를 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<!-- 4. 문서의 Title -->
<title>SEO 가이드에 따라 55개 이하의 문자로 된 제목을 작성합시다.</title>

<!-- 5. Meta 설명 -->
<meta name="description" content="페이지에 대한 설명(설명 값은 고유해야하며, 150개 이하의 문자로 작성🙌)">

<!-- 6. 오늘날에는 .ico 포맷보다 PNG 포맷의 아이콘을 더 추천(크기: 32 ✖️ 32px)
<!-- 표준 favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- 추천 favicon 포맷 -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">

<!-- 7. Apple도 신경써서 favicon 설정하기 -->
<!-- Apple 터치 아이콘 (최소한 200x200 px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

2. Body 태그

<body> 안에도 어느정도 구조를 나눠서 작성해야 한다. 하지만 모든 웹사이트가 이런 구조를 따라야 하는 것은 아니다.

header
navigation bar
main content(section > article)
footer

3. Box 태그와 Item 태그

🚀여러가지 태그는 그 형태에 따라 두 가지로 분류가 된다.

Box : 구역을 담당하는 태그를 말한다.

-header
-footer
-nav
-aside
-main
-section
-article(section안에서 재사용이 가능한 것들을 묶어 놓은 것)
-div
-span
-form

Item: 사용자에게 보여지는 태그를 말한다.

-a
-button
-input
-label
-img
-video
-audio
-map
-canvas
-table

4. Block 과 Inline

🙆🏻‍♂️사용자에게 보여지는 Item들도 두 가지로 나눠서 생각해 볼 수 있다.

Block

-div

Inline

-p (문단, 문장+문장)
-b (bold체)
-span (문장)

5. Tag & Element

<태그> 라는 것은 <>괄호를 이용해서 사용하고 </>를 이용해서 종료한다. 그리고 태그안에 있는 것은 컨텐츠라고 하며 이 하나를 우리는 Element라고 한다. Element는 노드라고도 불리는데 이후에 JS를 배울 때 DOM Tree를 이해하면서 Element가 어떻게 돔트리에 삽입이 되고 HTML에게서 제어권을 얻어가는지 알 수 있다.

6. Attributes

<태그> 안에는 Attributes라는 속성이 있다. 우리는 속성값을 임의로 지정할 수 있는 권한이 있다.

7. List (ol vs ul)

리스트 안에는 두 가지 형태가 있다.

ol: 목록 순서가 있는
ul: 목록 순서가 없는
li: 리스트 아이템

8. Input and type

<input> 태그는 웹 개발에서 흔하게 사용된다. 우리가 원하는 데이터를 사용자에게 받아오는 태그이기 때문이다. 보통 단독으로 사용되기 보다는 <label> 이 같이 사용되는데 사용자에게 어떤 정보를 받아올 지 명확하게 나타내 주기 때문이다.

또한 이 둘은 inline block이라서 한 줄에 모두 표기가 되며 <input> 은 한 페이지안에 너무나 많이 사용되기 때문에 id를 통해서 고유한 식별자를 줘야 한다.

<label for="input_name">Name is Input</label>
<input id="input_name" type="text">

태현

안녕하세요, 지식을 공유하는 공간입니다.

이전 포스트

>TIL: HTML이란?

다음 포스트