TIL 019 시멘틱 마크업
코딩 테스트를 보다가 시멘틱 마크업으로 HTML을 바꾸라는 데... 뭔지 몰라서 찾아보았다....
https://developer.mozilla.org/ko/docs/Web/HTML/Element
정말정말정말 많다. 각각 사용할 수 있는 타입도 많으니 찾아보면서 구현하자.
https://youtu.be/OoA70D2TE0A
강의 보고 정리해 둔다....
📕 시멘틱 마크업 왜 와이?
- 컨텐트에 어떤 의미를 부여하기 위헤 사용된다.
- 검색엔진의 성능 향상
- 가독성 향상
📕 마크업 정리
📘 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 설명
Author And Source
이 문제에 관하여(TIL 019 시멘틱 마크업), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chosh/TIL-019-시멘틱-마크업저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)