<div>
대신 쓰는 대표적인 시멘틱 태그<header>
: 웹사이트의 브랜드 로고나, 사용자들을 위한 중요한 메뉴아이템이 들어있을 때<nav>
가 더 좋음<footer>
: 웹사이트 제일 아래에 여러가지 정보나 링크시 좋음<main>
: 현재 웹사이트에서 중요한 컨텐츠를 가지고 있는 부분<aside>
: 메인 안에서도 페이지와 상관없는 부가적인 내용(광고, 링크)<article>
<section>
<article>
vs <section>
<article>
은 블로그 포스트에서 포스트 하나, 신문기사에서 기사하나 등 하나 그자체를 묶어 줄때 사용. 메인 안에있는 다른 내용들과 상관없이 고유한 정보를 나타내 줄 때 사용<section>
은 <article>
내에서든 <main>
내에서든 연관있는 내용들을 묶어줄때 사용<i>
vs <em>
<i>
는 시각적으로만 이탤릭체<em>
은 시각적으로는 이탤릭체며, 스크린리더가 읽을때 강조하며 읽음. 즉 강조하는 이탤릭체!!!<b>
vs <strong>
<b>
는 시각적으로만 볼드체<strong>
는 정말 중요한 볼드체!!!<ol>
vs <ul>
vs <dl>
<ul>
은 순서가 없는 목록을 나타낼 때. unorder list를 의미<ol>
은 순서가 있는 목록을 나타낼 때. order list를 의미<dl>
은 description list의 요소로 어떤 단어에 대한 설명을 나타낼 떄 그 목록을 나타낼 떄 사용<dt>
에는 내가 설명할 단어<dd>
그에 해당하는 설명<img>
vs <background-image>
<img>
: 이미지가 웹페이지 안에서 하나의 중요한 요소로 자리잡고 있을 때<background-image>
: 문서의 내용과는 별개로 스타일링 목적일 때<button>
vs <a>
버튼을 쓰든 에이태그를 쓰든 css로 스타일링을 하면 둘다 버튼처럼 보여서 헷갈릴 수 있음
<a>
: 어디론가 이동할 때 (링크)<button>
: review, vote, login, sign up now 등 사용자의 특정한 액션을 위해<table>
vs CSS<table>
: 정말 많은 양의 데이터를 행과 열을 이용해서, 정말 <table>
이 필요해서 그런 데이터를 나타내는 경우에 사용<table>
을 이용했지만 요새는 CSS의 Flex나 Grid 를 이용함