HTML을 작성하려면 HTML의 구조를 알아야 합니다.
HTML/XHTML의 기본적인 구조는 아래와 같습니다.

 HTML/XHTML의 구조



<html> ~ </html>
: html 요소는 이 문서가 HTML/XHTML 문서임을 나타냅니다.
: 전체 문서는 <html> ~ </html> 안에 들어가게 됩니다.

<head> ~ </head>
: 문서의 기본 정보가 들어가는 공간입니다.
: 기본적으로 head에 적힌 내용은 화면에 표시되지 않습니다.
: title 요소, meta 요소등이 포합됩니다.

<body> ~ </body>
: 브라우저로 열었을 때, 실제 화면에 표시되는 내용이 들어갑니다.
: 제목을 지정하는 h1 요소와 문단을 지정하는 p 요소 등 문서를 구성하는 다양한 요소들이 포함됩니다.


특징
<요소명> ~ </요소명> : HTML/XHTML 문서는 내용을 태그로 둘러싸서 마크업
: 내용을 태그로 둘러쌈으로써 요소의 범위가 어디까지인지 명확히 표기
: 들여쓰기시 스페이스나 tab 사용. 실제 들여쓰기를 안해도 상관이 없지만, 들여쓰기를 권장(가독성). 



 HTML/XHTML의 서식

요소명은 <> 로 둘러싼다
<html> 에서 html 을 요소명이라고 합니다.
요소명은 < 과 > 로 둘러싸고 기호를 포함한 소문자로 기술합니다.
(xhtml에서는 반드시 소문자로, html에서는 소문자이던 대문자이던 상관없습니다.)

<요소명> ~ </요소명> 형식
<요소명>은 시작태그, </요소명>은 종료태그라고 합니다.
안에 들어갈 내용은 정확하게 시작태그와 종료태그로 둘러싸여야 합니다.
종료태그에는 / 가 들어갑니다.
HTML에서는 시작태그나 종료태그가 생략 가능한 요소들이 있지만, XHTML에서는 생략할 수 없습니다.

빈요소
일부 요소는 종료태그없이 <요소명/> 형식으로 사용되기도 합니다.
이런 것들을 empty element 라고 합니다.
빈요소는 <요소명> </요소명> 과 같이 종료태그를 사용하기도 하고, <요소명 /> 으로 사용하기도 합니다.
브라우저에 따라 <요소명/> 은 정확히 표시되지 않을 수 있기 때문에 <요소명 /> 처럼 공백을 넣을것을 권장합니다.

요소에 속성을 부여 : <요소명 속성명='속성값>
요소는 특정 기능, 역할을 가진 속성(attribute)를 지정할 수 잇습니다.
<요소명 속성명='속성값> </요소명> 형식으로 사용합니다.
요소명과 속성명은 공백문자(space)로 구분합니다.
속성명과 속성값은 등호(=)로 연결하고 속성값은 " 나 ' 로 둘러쌉니다.
속성명은 반드시 소문자로 적지만, 속성값은 상황에 따라 대문자, 소문자, 우리말이 사용될 수 있습니다.
(인용부호에는 ' 를 사용해도 되지만, 관례상 " 를 사용합니다.)


하나의 요소에 복수의 속성을 부여
속성과 속성은 공백문자(space)로 구분합니다.


부모요소와 자식요소의 관계를 적절하게 지정
어떤 문장, 문단안에서 특정 텍스트에 링크를 지정할때는 아래와 같이 할수있습니다.


공백문자
XHTML에서는 스페이스와  Tab, 행 바꿈등을 동일하게 공백문자(whitespace)로 처리합니다.
유니코드에서는 스페이스(20), Tab(9) 라인 피드(A), 캐리지 리턴(carriage return)(D)을 공백문자로 처리합니다.
HTML에서는 위의 것들에  더해, 폼 피드(C), 캐리지 리턴 + 라인 피드, 제로 폭 스페이스가 공백문자로 처리됩니다.
복수의 공백문자가 연속해서 존재할 경우, 특별한 경우(pre 요소의 범위 등)를 제외하고는 하나의 공백문자로 정리됩니다.
또한, 시작태그 바로 뒤의 공백문자, 종료태그 바로뒤의 공백문자는 무시됩니다.






Posted by croute

댓글을 달아 주세요