div 태그는 영역을 나누고 싶을 때 사용하는 태그 입니다. 일반적으로 가장 많이 사용하는 태그로 공간(영역)을 나누기 위해 사용할뿐 별다른 의미는 없습니다.
<div>
안녕하세요!!!
</div>
p 태그는 문단을 나눌 때 사용하는 태그입니다. 이 태그는 문단의 시작을 알리는 태그로 주제가 변하는 section이나 article 태그와는 조금 다른 역할을 가지고 있습니다.
p 태그를 사용함에 있어서 div 태그와 공간을 나눈다는 역할을 동일하지만 공간을 나누는 것과 문단을 나누는 것은 의미적으로 서로 다르기 때문에 사용할 때 주의해서 사용해야 합니다.
<p>
안녕하세요!!!
</p>
ul 태그는 순서가 별로 중요하지 않은 목록을 작성할 때 사용합니다. 가장 흔하게 작성하는 요소로는 메뉴나 네비게이션을 만들때 사용합니다.
ul태그는 li(List item) 태그를 자식 태그로 사용하며 li 태그에 내용을 입력하게 됩니다.
<ul>
<li> 짜장면 </li>
<li> 짬뽕 </li>
<li> 볶음밥 </li>
<li> 탕수육 </li>
</ul>
ol 태그는 순서가 중요한 목록을 작성할 때 사용합니다. 가장 흔하게 작성하는 요소로는 약관, 법률, 목차 등을 표현할 때 사용합니다.
ol태그는 li(List item) 태그를 자식 태그로 사용하며 li 태그에 내용을 입력하게 됩니다.
<ol>
<li> 서론 </li>
<li> 본론 </li>
<li> 결론 </li>
<li> 별첨 </li>
</ol>
dl 태그는 어떤 단어나 행동, 요소등을 정의(설명)할 때 사용하는 태그입니다. 일상생활에서 가장 흔하게 볼 수 있는 정의 목록은 "단어 사전"이 됩니다.
dl태그는 자식 태그로 dt(Definition Title), dd(Definition Description) 태그를 사용하며 dt 태그에 정의를 내리려는 단어, 행동 등을 입력하고 dd에는 dt에 작성된 단어의 설명을 입력합니다.
<dl>
<dt> 애플 </dt>
<dd>
한 입 베어물어 먹은 과일이 로고인
켈리포니아에 있는 전화기 만드는 회사
</dd>
</dl>
테이블은 목록을 표시할 때 사용합니다.
| No | 구분 | 설명 | 단가 | 수량 | 합계 | 비고 |
|---|---|---|---|---|---|---|
| 1 | 식품 | 쌀 5kg | 30,000 | 1 | 30,000 | |
| 2 | 햇반 * 24 | 24,000 | 1 | 24,000 | ||
| 3 | 신라면 1BOX | 20,000 | 1 | 20,000 | ||
| 4 | 계란 1판(30개) | 28,000 | 1 | 28,000 | ||
| 5 | 커클랜드 생수 6개 | 2,400 | 1 | 2,400 | ||
| 6 | 오락 | 닌텐도 스위치 | 300,000 | 1 | 300,000 | |
| 7 | 젤다:야생의 숨결 | 64,000 | 1 | 64,000 | ||
| 8 | 디트로이트 비컴 휴먼 | 63,000 | 1 | 63,000 | ||
| 9 | 프로스트 펑크 DLC:마지막 가을 | 30,000 | 1 | 30,000 | ||
| 10 | 도서 | 마이크로 소프트 Azure:Docker 배포하기 | 34,000 | 1 | 34,000 | |
| 11 | 쿠버네티스를 활용한 Docker관리 및 배포전략 | 28,000 | 1 | 28,000 | ||
| 합계 | 623,400 | 623,400 | ||||
form 태그는 사용자 입력을 받고 서버로 데이터를 전송하기 위해서 사용하는 태그입니다. 이 안에는 fieldset 태그가 최소한 1개 이상 존재해야하는데 fieldset태그의 역할은 form 안에서 영역을 나누는 역할을 수행합니다.
<form>
<fieldset>
<legend> 필수입력항목 </legend>
</fieldset>
</form>
인용구를 표현할 때 사용하는 태그입니다.
<blockquote>
너에게 묻는다 <br />
연탄재 함부로 발로 차지 마라 <br />
너는 누구에게 한번이라도 뜨거운 사람이었느냐 <br />
</blockquote>
제목이 들어가는 영역을 표시할 때 사용하는 블록 태그입니다.
<header>
<h1>제목을 입력해 봅시다</h1>
</header>
article은 사전적으로 신문에 있는 "기사"를 의미하며 페이지 내에 주요한 내용을 담기 위한 영역으로 사용된다.
<article>
<p>중요한 내용입니다.</p>
</article>
HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 section은 제목을 포함하지만, 항상 그런 것은 아닙니다.
<section>
<p>중요한 내용입니다.</p>
</section>
nav 요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.
<nav>
<a href="http://www.naver.com" target="_blank">네이버로 이동</a>
</nav>
footer 요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.
<footer>
<p>copyright by jongho all reserved.</p>
</footer>
HTML aside 요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.
<aside>
<p>오늘의 날씨는 맑음</p>
</aside>
음원 소스를 HTML에서 재생할 수 있도록 만들어주는 태그입니다. 모든 브라우저에서 재생할 수 있는 표준 포멧은 mp3입니다. 그 외의 포멧은 각 브라우저마다 서로 달라서 mp3 포멧의 음원을 사용하는 걸 추천합니다.
video 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. 오디오 콘텐츠에도 사용할 수 있으나, audio 요소가 사용자 경험에 좀 더 적합합니다.
span 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.
적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. span은 div와 매우 유사하지만, div는 블록 레벨 요소인 반면 span은 인라인 요소입니다.
<span>
Span태그를 사용해 보았습니다.
</span>
strong 요소는 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.
<span>
<strong>
코로나 바이러스
</strong>를 대하는 우리의 태도
</span>
em 요소는 텍스트의 강세를 나타냅니다.
em 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.
<span>
<em>
<em>
코로나 바이러스
</em>
</em>를 대하는 우리의 태도
</span>