HTML 태그

tech

Siyoon Jeon 2021. 8. 11. 01:20

의미의, 의미가 있는 태그

<header> 브랜드 로고, 메뉴 아이템

헤더 안에 여러가지의 메뉴들이 모여있다면 <nav>

마지막 부가적인 정보 링크 <Footer>

중요한 컨텐츠는 <main>

메인 안에서도 페이지 컨텐츠와 상관없는 부가적인 광고나 링크는 <aside>

메인 안에서 <article>, <section> 을 사용해 구조적으로 사용할 수 있다.

<article> vs <section>

<article> : 블로그에서 포스트 하나, 신문 기사에서 기사 하나와 같이 묶어 줄 때 사용한다. 이 자체만으로 독립적으로 다른 페이지에 보여주어도 문제가 없을 때 사용할 수 있다. 메인 내용과 상관없이 독립적으로 고유한 정보를 표현할 수 있다.

<section> : article 안에 서로 연관있는 내용을 묶어주고 싶다면 사용 가능하다. 물론, article 밖에서도 사용 가능하다.

<i> vs <em>

<i>는 시각적으로 이탤릭체로 보여준다. 하지만, <em> 강조하는 이탤릭체이다.

<b> vs <strong>

<b>는 시작적으로 볼드체를 보여준다. 하지만, <strong>은 정말 중요한 볼드체이다.

<ol> 순서 중요 ! vs <ul> 순서 없음 vs <dl> 정의, 설명 목록

<ul> : unorder list

순서가 없는 목록을 나타낼 수 있다.

<ul>
	<li>딸기</li>
   	<li>새복</li>
   	<li>덩치</li>
</ul>

<ol> : order list

순서가 중요한 목록을 나타낼 수 있다.

<ol>
	<li>1.딸기</li>
   	<li>2.새복</li>
   	<li>3.덩치</li>
</ol>

<dl> : description list

어떤 단어에 대한 설명이 묶여있을 때, 그 목록을 묶을 때 사용할 수 있다.

<dl>
	<dt>HTML</dt>
   	<dd>웹페이지의 골격, 문서를 만들 때 사용한다.</dd>
</dl>

<img> vs css background-image

<img> : 이미지가 웹 페이지 안에서 하나의 중요한 요소로 자리잡혀 있을 때 사용한다. HTML 문서 안에서 포함하도록 한다.

하지만, 문서와는 별개로 배경으로 사용할 때는 css background-image를 사용한다. 문서를 읽을 때, 있어도 없어도 상관 없을 때 사용한다.

<button> vs <a>

<button> : 로그인, 로그아웃, 리뷰, 추천 등 특정한 액션을 위해서 만든다면 버튼을 사용한다.

<a> : 어디론가 이동할 때는 링크를 사용한다.

<table> vs css

많은 데이터의 양을 행과 열이 필요하다면 <table>을 사용하면 되지만,

스타일린을 위해 단순히 그리드를 표현하고 싶다면, css Flex, Grid를 사용한다.

ref. 드림 코딩