1-1. HTML이란, HTML상식, 기본 문법과 주요 태그, 특수기호 표기

1-1. HTML 상식

HTML은 HyperText Markup Language, 하이퍼 텍스트 마크업 언어 라고 합니다.

웹페이지 = 웹문서 = HTML문서 = 여러 태그(<태그이름>)으로 구성되며,

 

기본적으로,

- 태그는 소문자이고,

- 기본태그형식 : <태그이름 속성="속성값"...> 입니다. (속성은 없을 수도 있고 여러개일 수도 있음)

- 여는태그(<태그이름>), 닫는 태그(</태그이름>)를 같이 쓰는 경우도 있으며, 닫는 태그 없이 쓰는 경우도 있습니다. 

- <태그명>, </태그명> 같은 것을 태그라고 하며, <태그명>내용</태그명> 같은 한 뭉텅이를 요소라고 합니다.

자주쓰는 상식 태그

• <hn></hn> (<h1>~<h6>) : 제목 텍스트
• <p></p> : 텍스트 단락
• <br> : 줄바꿈(개행)
• <b></b> : 진한 텍스트
• <i></i> : 이탤릭체(기울임) 텍스트
• <img> : 이미지
• <a></a> : 링크

상식 문법

• <!-- 와 --> 사이에 주석내용을 적어서 주석을 달 수 있습니다.
• <id> vs <class> : 둘다 태그안의 속성으로, 태그에 이름을 지정해주는데, 
  • id는 한태그만 사용가능(중복x) => 레이아웃, 세부스타일 정의때
  • class는 여러태그에도 사용가능(중복o) => 반복되는 스타일 정의때
• <div> vs <span> : 둘다 영역을 묶어주는 역할으로,
  • div는 블록태그(하나의 영역확보, 같은 줄을 모두 차지함)
  • span는 인라인태그(같은 줄에 여러번 배치될 수 있음)
• 글로벌속성 : 어느태그든지 사용가능,
  • ex) id, class, lang, title, accesskey, dir, style 등등

HTML의 특수기호 (스압)

표현문자	특수기호(숫자)	특수기호(문자)	설명
			-	수평탭
space	
	-	줄 삽입
space	 	-	여백
!	!	-	느낌표
"	"	"	따옴표
#	#	-	숫자기호
$	$	-	달러
%	%	-	백분율 기호
&	&	&	엠퍼센트 기호
'	'	-	작은 따옴표
(	(	-	왼쪽 괄호
)	)	-	오른쪽 괄호
*	*	-	아스트릭
+	+	-	더하기 기호
,	,	-	쉼표
-	-	-	하이폰
.	.	-	마침표
/	/	-	슬레시
0 - 9	0-9	-	0부터 9
:	:	-	콜론
;	&#59;	-	세미콜론
<	&#60;	&lt;	보다 작은
=	&#61;	-	등호
>	&#62;	&gt;	보다 큰
?	&#63;	-	물음표
@	&#64;	-	골뱅이
A - Z	&#65;-&#90;	-	A부터 Z까지
[	&#91;	-	왼쪽 대괄호
\	&#92;	-	역슬래쉬
]	&#93;	-	오른쪽 대괄호
^	&#94;	-	^^
_	&#95;	-	수평선
a - z	&#97;-&#122;	-	a부터 z까지
{	&#123;	-	왼쪽 중괄호
|	&#124;	-	수직선
}	&#125;	-	오른쪽 중괄호
~	&#126;	-	꼬리표
¡	&#161;	&iexcl;	거꾸로된 느낌표
|	&#166;	&brvbar;	끊어진 수직선
ⓒ	&#169;	&copy;	저작권
±	&#177;	&plusmn;	플마
²	&#178;	&sup2;	제곱
³	&#179;	&sup3;	세제곱
¶	&#182;	&para;	문단기호
¼	&#188;	&frac14;	4분의 1
½	&#189;	&frac12;	2분의 1
¾	&#190;	&frac34;	4분의 3
¿	&#191;	&iquest;	거꾸로된 물음표

특수기호 표 참고 : http://kor.pe.kr/util/4/charmap2.htm