HTML 태그 -2

ol태그 VS ul태그 VS dl태그

ul태그(unorder list)

순서가 없는 목록을 나타낼때, 단순히 목록으로만 나타낼때 사용합니다.

<ul>
  <li>축구</li>
  <li>농구</li>
  <li>야구</li>
</ul>

• 축구
• 농구
• 야구

ul태그와 li태그가 중첩된 버전
<ul>
  <li>축구
  	<ul>
  		<li>아침</li>
  		<li>점심</li>
  		<li>저녁</li>
	</ul>
  </li>
  <li>농구</li>
  <li>야구</li>
</ul>

• 축구
  • 아침
  • 점심
  • 저녁
• 농구
• 야구

ol태그(order list)

순서가 중요한 목록에 사용할 수 있습니다.

ol태그와 li태그가 중첩된 버전
<ol>
  <li>축구
  	<ol>
  		<li>아침</li>
  		<li>점심</li>
  		<li>저녁</li>
	</ol>
  </li>
  <li>농구</li>
  <li>야구</li>
</ol>

1. 축구
   1. 아침
   2. 점심
   3. 저녁
2. 농구
3. 야구

dl태그(description list)

어떤 한 단어에 대해서 설명이 묶여있을 때 그 목록을 나타낼 때 사용합니다.
dt태그(description term)은 내가 원하는 단어를 작성하고
dd태그(description detail)은 그에 해당하는 설명을 적으면 됩니다.

<dl>
	<dt>축구</dt>
	<dd>영어로 soccer</dd>
    
   	<dt>농구</dt>
	<dd>영어로 basketball</dd>
    
    <dt>야구</dt>
	<dd>영어로 baseball</dd>
</dl>

축구 영어로 soccer 농구 영어로 basketball 야구 영어로 baseball

img태그 VS background-image태그

img태그

이미지가 웹페이지 안에서 하나의 중요한 요소로 자리를 잡고 있을 때는 img태그를 이용해서 HTML문서안에서 자체적으로 포함이 되도록 만드는 것이 좋습니다.

background-image태그

이미지가 문서의 내용과는 별개로 스타일링 목적을 위해서 배경 이미지로 사용되는 경우 문서의 일부분이 아닌 경우 background-image태그를 사용하는 것이 좋습니다.
이미지가 없어도 문서를 읽고 이해하는 데 전혀 지장이 없는경우 background-image태그를 사용하는 것이 좋습니다.

button태그 VS a태그

button태그

리뷰, 추천, 로그인, 가입, 퀴즈풀기 등 사용자의 특정한 액션을 위해서 이 버튼을 클릭했을 때 특정한 행동이 발생하는 경우 button태그를 사용하는 것이 좋습니다.

a태그

사용자가 클릭을 했을때 다른 페이지로 또는 페이지에서 어딘가로 이동하는 경우, 링크가 걸려져 있는 경우 a태그를 사용하는 것이 좋습니다.

table 태그 VS CSS

table 태그

정말 많은 데이터의 양을 행과 열을 이용해서 테이블을 필요로하는 데이터를 나타내는 경우 table 태그를 이용하는 것이 좋습니다.

하지만 단순히 아이템을 테이블 형식으로 그리드 형식으로 표현하기 위해서 테이블 태그를 사용하는 것은 좋지않습니다.

CSS

단순히 아이템을 테이블 형식으로 그리드 형식으로 표현하는 것이 필요한 경우 CSS Flex, Grid를 이용해서 조금 더 유연하게 스타일링하는 것이 좋습니다.

문서안에서 자체적으로 의미있는 태그가 필요한건지 아니면 CSS로 스타일링을 위해서 태그를 사용하는지 확인하는 것이 좋습니다.