카테고리 없음

[html] 태그정리

키보드발 2022. 11. 20. 21:33

<h1>–<h6>: 구획 제목을 나타냅니다

HTML <h1>–<h6> 요소는 6단계의 구획 제목을 나타냅니다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮습니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements

List : 목록

<ul>

unordered list : 순서가 없는 리스트

https://developer.mozilla.org/ko/docs/Web/HTML/Element/ul

<li>

브라우저는 영리하지 않기 때문에 해당 텍스트가 목록의 항목이라는 것을 알려주기위해 <li>를 붙여줘야한다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/li

<ol>

ordered list : 순서가 있는 리스트

https://developer.mozilla.org/ko/docs/Web/HTML/Element/ol

<a>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/a

_blank
_self

blank는 새 창 띄우기 self는 현재 페이지에서 띄우기

<img>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/img

이미지는 이미지에서 이미지까지가 아니라 “이미지” 이기 때문에 <img ~ />로 끝난다.

<img></img>로 끝나지 않는다. 이런 태그를 self-closing 태그라고 한다.

<head>

<head> 요소는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/head

<title>

HTML <title> 요소는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다. 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시합니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/title

<meta>

HTML <meta> 요소는 <base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.

meta 태그들도 self-closing 태그이다.

참고) 구글은 검색에 meta name =”description”을 사용한다.

<meta name="description" content="4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등">

http://www.tcpschool.com/html-tag-attrs/meta-charset

https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta

카카오톡에 링크를 공유할때 나오는 썸네일이 있다.

해당 썸네일을 지정해주는 meta 코드이다.

<link>

외부리소스를 연결하는 태그이다.

보통 아래의 예와 같이 HTML에 css를 연결할때 사용하지만 해당용도가 끝이 아니다.

아래의 코드는 웹페이지의 아이콘을 나타내는 코드이다. 이와 같이 attribute에 따라 다양한 결과를 낳을 수 있다.

<head>
  <link rel="shortcut icon" sizes="16x16 32x32 64x64" href="https://nomadecoders.co/m.png"/>
  .
  .
</head>

아이폰에서 북마크를 하고 홈화면에 추가하면 해당웹페이지의 이미지로 아이콘이 생성되는 것을 볼 수 있다.

해당 아이콘이 어디서 왔는 지 궁금할 수 있다. 해당 아이콘을 지정하는 코드가 바로 “apple-touch-icon”이다.

<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>

즉 link를 단순히 css의 연결 수단으로 생각하면 안된다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/link

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=bhher&logNo=220788983128

<p>

하나의 문단을 나타낸다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/p

<pre>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/pre

<pre>와 <p>의 차이를 해당 결과로 알 수 있다.

pre는 정말 입력한 그대로 출력을 한다. 하지만 p는 중복된 공백과 개행을 허락하지않는다. 말그대로 문단으로 출력한다.

똑같은 문자를 입력했음에도 p와pre의 결과는 다르게 나왔다.

<span>

구문 컨텐트를 위한 인라인 컨테이너이다.

<form>

참고) <input>태그는 self-closing 태그이다. <input></input>와 같은 형태로 사용하면 안된다.

아래의 링크에서 다양한 input을 확인할 수 있다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input

input이 강력한 이유는 해당 input에 또 속성을 줄 수 있다.

file을 예로들면 어떤 종류의 파일을 허용할지도 정할 수 있다.

참고)하지만 프론트엔드에서만 속성을 줘서 제한하는 것이 아니라 백엔드에서도 막아야한다. 왜냐하면 웹브라우저에서 해당 속성을 지워버리고 전송을 해버려도 서버로는 값이 전송되기 때문이다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input

<label>

label의 속성 for가 가리키는 Id를 가진 input을 동작시킨다.

참고) Id는 유니크한 값이기 때문에 for을 통해 input을 동작시킬 수 있던 것이다.

Do you like cheese?를 누르니 체크박스가 동작하였다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/label

<div>

division이라는 단어에서 파생

division : 분할, 구분, 경계선

div는 기능은 있지만 그 자체로서 의미를 짐작할 수 없다.

문서를 보기만해도 그 의미를 짐작할 수 있는걸 semantic이라고 한다.

Sematics에 대한 예와 설명 : https://developer.mozilla.org/en-US/docs/Glossary/Semantics

Semantics - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

In programming, Semantics refers to the meaning of a piece of code — for example "what effect does running that line of JavaScript have?", or "what purpose or role does that HTML element have" (rather than "what does it look like?".)

developer.mozilla.org

A와 B의 브라우저에서 나오는 결과는 차이가 없다. 하지만 B와 같이 작성을 지향해야하는 이유는

코드의 가독성때문이다. A와 같이 작성하면 코드를 파악하기 쉽지가 않다.