본문 바로가기
Web 개발/HTML,CSS,JS

[ HTML5 ] 기본 태그 구문 총 정리 !

by Queen2 2022. 12. 20.
728x90
반응형

복습/공부용으로 HTML의 기본 구문들을 정리했습니다.

 

tag 의미
<!DOCTYPE HTML> 문서형식 정의
<title> </title> 타이틀(제목) 작성
<!--주석 처리할 내용 --> 주석 처리
<h1> <h2> <h3> <h4> <h5> <h6> 제목태그 
h1은 크기 200% h6는 70%의 크기
<br> 줄바꾸기, 키보드의 엔터키 같은 기능
<pre> </pre> Preformatted text
html 소스 코드에 적힌 그대로의 공백, 탭, 줄바꿈, 띄어쓰기, 기타 문자 등을 입력한대로 출력하는 태그
<b> bold 처리
<del> 삭제된 텍스트 정의
<em> 기울임체로 강조 텍스트 정의
<i> 기울임꼴 텍스트 정의
<ins> 삽입된 텍스트 정의 (주로 줄이 문자 아래 줄이 그어져서 나타내짐)
<mark> 강조 표시된 텍스트 정의 (형광펜으로 그은 것 처럼)
<small> 글씨를 더 작게
<strong> 글씨를 굵게(더 강력하게 ) 표시
<sub> 아래첨자 텍스트 정의
<sup> 위 첨자 택스트 정의
&npsp non breaking space로 공백을 의미함 (특수문자 표기법)
&lt < (특수문자 표기법)
&gt > (특수문자 표기법)
&amp & (특수문자 표기법)
&quot " (특수문자 표기법)
&copy  © (특수문자 표기법)
<p> 텍스트가 문단 형식으로 단락별로 구분됨 (단락간 간격있음)
<span> 한줄에 inline형식으로 분리됨
<div> 블록 영역으로 공간을 분할함
<hr> horizontal Rule로 수평적인 선을 그어줌
<img src ="이미지 파일명/파일 경로" width="넓이" height="높이" alt="이미지가 없을 시 출력 메시지> 웹상에 이미지 표현 시 사용
<figure> 여러 콘텐츠를 묶어서 그룹핑 시 사용
<figcaption> <figure>을 위한 제목 표현
<ul>
 <li> </li>
</ul>
unordered list 
점 형태로 리스팅됨
<ol>
 <li> </li>
</ol>
ordered list
<ol start ="시작번호" type="1 | A| a | I | i" reversed>
설정에 기반한 순서가 있는 형태로 리스팅됨
<dl>
 <dt> </dt>
 <dd> </dd>
</dl>
dl : description list
dt : 설명하려는 대상
dd: 대상과 관련된 설명
<a href="페이지url" target="_blank | _top | _self | _parent">
텍스트 혹은 이미지 </a>
Anchor(a)는 하이퍼링크를 만들며, target은 새로운 창을 여는 방식을 지정함. </a> 앞의 이미지/텍스트는 하이퍼링크를 담고 있는 이미지/텍스트를 의미함

 

728x90
반응형

댓글