HTML 태그 기본 문법
1.
※ 태그 (Tag) : 요소 (Element)라고도 함.
2.
HTML 문서는 대부분 시작 태그 와 종료 태그 로 둘러싸인 내용 으로 구성.
내용 필요없는 일부 태그는 종료 태그 없이 단독 사용. (예:
<br> )
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">내용</종료태그>
[예제]
결과보기
[정리]
HTML5 경우, 속성/속성값 대소문자 구분 안 하나 소문자 사용 권장.
'속성=속성값'의 등호 앞뒤엔 공백 있어도 되나, 되도록 붙여 표기.
속성값은 큰따옴표로 감싸는 것이 표준이나, 속성값에 작은따옴표가사용 안 된 경우엔 작은따옴표로 묶거나 따옴표로 안 묶어도 됨. 단, 속성값 내부에 작은따옴표 사용 시 반드시 큰따옴표로 감싸야 함 . (예) name="chk['cf_desc_len']" (O) , name='chk[cf_desc_len]' (O), name=chk[cf_desc_len] (O), name=chk['cf_desc_len'] (X), name='chk["cf_desc_len"]' (X)각 속성은 한 칸 띄고 기재. (※ 여러 칸 띄워도 한 칸으로 인식)
각 태그별 고유속성은 해당 태그 강의 하단에 소개.
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;"
PS. 부위별 명칭
7-1.
스타일시트 이용해 여러 종류의 속성 나열 가능.
7-2.
콜론(:) 기호 - 속성의 속성값을 정의. 세미콜론(;) 기호 - 여러 속성 나열.
7-4.
나열된 속성의 마지막 끝엔 세미콜론(;) 써도 되고 안 써도 됨.
7-5.
세밀콜론(;) 다음의 속성은 띄어써도 되고 안 띄어써도 상관없음.
단, 띄어쓴 경우, 반드시 나열된 속성 전체를 따옴표 로 묶어야 함.
<p style=" color :red; font-size :30px;" >홈짱닷컴 (homzzang.com)</p>
8.
태그에 스타일시트 속성을 적을 땐, 따옴표 에 주의 .
스타일시트는 작은따옴표 (' ')나 큰 따옴표(" ")로 묶거나 안묶을 수 있음.
[큰따옴표 (O)]
<p style=" ; font-size:30px"
결과보기
[작은따옴표 (O)]
<p style=' ; font-size:30px'
결과보기
[따옴표 미사용 (O)] - 단, 이 경우, 세미콜론 앞뒤에 공백 있으면 안 됨.
<p style=color:red; font-size:30px>홈짱닷컴 (Homzzang.com)</p>
결과보기
9.
속성/속성값 적을 때 띄어쓰기 된 경우엔 반드시 전체를 따옴표로 묶어야 함.
또한, 속성값이 띄어쓰기 된 값인 경우 속성값도 별도로 따옴표로 묶어야 함.
세미콜론(;) 뒤에 띄어쓰기 했는데 전체를 따옴표로 안 묶은 경우, 맨 앞의 속성만 적용됨. (즉, 아래 경우, font-size 속성은 적용 안 됨.)
<p style=color:red;
10.
HTML 문서는
주석 사용하면 소스 수정 시 아주 편리.
주석은 웹페이지에서는 안 보이나, 소스보기 시 보임.
최신댓글