HTML 태그 기본 문법
1.
※ 태그(Tag) : 요소(Element)라고도 함.
2.
HTML 문서는 대부분 시작 태그와 종료 태그로 둘러싸인 내용으로 구성.
내용 필요없는 일부 태그는 종료 태그 없이 단독 사용. (예:
<br>)
cf. DTD를 XHTML 사용 시, 종료태그 없는 태그도 /로 닫아줘야 함.
(예1) <BR> 경우, <br />
(예2) <img> 경우, <img src="주소" />
3.
태그 각 부위별 명칭 (P 태그 경우)
<p id="hz" class="hz">홈짱닷컴 (Homzzang.com)</p>
[명칭]
- <p> : 시작태그 (Start Tag) = 여는태그 (Opening Tag)
- </p> : 종료태그 (End Tag) = 닫는태그 (Closing Tag)
- id, class : 속성 (Attribute) ※ 여러 개 사용 가능
- hz : 속성값 (Value)
- 홈짱닷컴 (homzzang.com) : 내용 (Content)
4.
태그에 각 태그의 고유 속성을 등호 붙여 첨가 가능.
<시작태그 속성1="속성값1" 속성2="속성값2">내용</종료태그>
[예제]
<p bgcolor="yellow" align="center">홈짱닷컴 (homzzang.com)</p>
결과보기
[정리]
- HTML5 경우, 속성/속성값 대소문자 구분 안 하나 소문자 사용 권장.
- '속성=속성값'의 등호 앞뒤엔 공백 있어도 되나, 되도록 붙여 표기.
- 각 속성은 한 칸 띄고 기재. (※ 여러 칸 띄워도 한 칸으로 인식)
- 각 태그별 고유속성은 해당 태그 강의 하단에 소개.
- HTML5 시대가 되면서 많은 부분이 CSS로 대체됨.
- 태그 중첩 가능. (예) <p><strong>홈짱닷컴</strong></p>
- 들여쓰기 경우, CSS text-indent 속성 이용.
- 줄바꿈은 <br> 태그 이용. (또는, 블럭요소 태그 이용.)
- Enter키로 줄바꿈 시 인식 X. (단, PHP nl2br() 함수 이용 시 가능.)
- 태그 안 내용의 글자 사이 공백은 많아도 1개로 인식.
- 공백을 여러 개 적용하려면   이용.
5.
속성값은 큰따옴표(")/작은따옴표(')로 묶거나, 따옴표 없이 사용 가능.
또한, 여러 속성 사용하려면, 한 칸 띄운 후 나열. (주로, 큰따옴표 사용)
[큰따옴표 (O)]
<body
bgcolor="yellow" alink="red">
홈짱닷컴 (<a href=https://homzzang.com>Homzzang.com</a>)
</body>
[작은따옴표 (O)]
<body
bgcolor='yellow' alink='red'>
홈짱닷컴 (<a href=https://homzzang.com>Homzzang.com</a>)
</body>
[따옴표 미사용 (O)]
<body
bgcolor=yellow alink=red>
홈짱닷컴 (<a href=http://www.homzzang.com>homzzang.com</a>)
</body>
PS. 속성값에 공백 포함된 경우 에러 날 수 있으니, 되도록 따옴표 사용.
6.
태그명령어에는 CSS 이용해 속성(Attribute)과 속성값(Value) 부여 가능.
<p style="color:red;">홈짱닷컴 (homzzang.com)</p>
PS. 부위별 명칭
7-1.
스타일시트 이용해 여러 종류의 속성 나열 가능.
7-2.
- 콜론(:) 기호 - 속성의 속성값을 정의.
- 세미콜론(;) 기호 - 여러 속성 나열.
7-4.
나열된 속성의 마지막 끝엔 세미콜론(;) 써도 되고 안 써도 됨.
7-5.
세밀콜론(;) 다음의 속성은 띄어써도 되고 안 띄어써도 상관없음.
단, 띄어쓴 경우, 반드시 나열된 속성 전체를 따옴표로 묶어야 함.
<p style="color:red; font-size:30px;">홈짱닷컴 (homzzang.com)</p>
8.
태그에 스타일시트 속성을 적을 땐, 따옴표에 주의.
스타일시트는 작은따옴표 (' ')나 큰 따옴표(" ")로 묶거나 안묶을 수 있음.
[큰따옴표 (O)]
<p style="color:red; font-size:30px">홈짱닷컴 (homzzang.com)</p>
결과보기
[작은따옴표 (O)]
<p style='color:red; font-size:30px'>홈짱닷컴 (homzzang.com)</p>
결과보기
[따옴표 미사용 (O)] - 단, 이 경우, 세미콜론 앞뒤에 공백 있으면 안 됨.
<p style=color:red;font-size:30px>홈짱닷컴 (Homzzang.com)</p>
결과보기
9.
속성/속성값 적을 때 띄어쓰기 된 경우엔 반드시 전체를 따옴표로 묶어야 함.
또한, 속성값이 띄어쓰기 된 값인 경우 속성값도 별도로 따옴표로 묶어야 함.
세미콜론(;) 뒤에 띄어쓰기 했는데 전체를 따옴표로 안 묶은 경우, 맨 앞의 속성만 적용됨. (즉, 아래 경우, font-size 속성은 적용 안 됨.)
<p style=color:red; font-size:30px>홈짱닷컴 (homzzang.com)</p>
10.
HTML 문서는
주석 사용하면 소스 수정 시 아주 편리.
주석은 웹페이지에서는 안 보이나, 소스보기 시 보임.
(보통, 에디터에서 녹색으로 표시됨.)
