TIL 019 시멘틱 마크업

코딩 테스트를 보다가 시멘틱 마크업으로 HTML을 바꾸라는 데... 뭔지 몰라서 찾아보았다....

https://developer.mozilla.org/ko/docs/Web/HTML/Element
정말정말정말 많다. 각각 사용할 수 있는 타입도 많으니 찾아보면서 구현하자.

https://youtu.be/OoA70D2TE0A
강의 보고 정리해 둔다....

📕 시멘틱 마크업 왜 와이?

1. 컨텐트에 어떤 의미를 부여하기 위헤 사용된다.
2. 검색엔진의 성능 향상
3. 가독성 향상

📕 마크업 정리

📘 box vs item

box => 사용자한테 보여지지는 않음
item => 사용자한테 보여짐

box

<header>
<footer>
<nav>
<aside>
<main>
<section>
<article>
<div>
<span>
<form>

item

<a>  // href, target 
<button>
<input>
<label>
<img>
<video>
<audio>
<map>
<canvas>
<table>

📘 Block vs Inline

Block => 무조건 줄 바꿈
Inline => 공간이 있으면 같은 라인

block

<span> // classname 적고 css 따로 적용
<b>  // bold

block

<p>
<div>

📘 ol vs ul with li

ol => order list item
ul => unorder list item

ol

ol>li*3 // 꿀팁! // type도 다양
1.
2.
3.

ul

<ul>
<li></li>
<li></li>
<li></li>
</ul>
.
.
.

📘 input label

input => input을 받을 수 있다.
type도 매우 다양.
id 지정해줘야한다.

label => input과 같이 쓰임.
iniline으로 input 설명