본문 바로가기
Web Development/HTML / CSS

[HTML] 구성요소

Celestia 2009. 6. 5. 10:37

HTML의 구성요소 태그(Tag), 요소(element), 속성(attribute), 변수(Arguments)

HTML을 공부하면서 아래와 같은 다소 생소한 용어가 몇개 등장합니다.
HTML을 정확하게 이해하기 위해서는 아주 중요한 개념이므로 이 부분은 반드시 이해해야 합니다.

요소(Elements)

HTML에서 시작 태그와 종료태그로 이루어진 모든 명령어들을 의미합니다.

태그(Tag)

요소(Elements)의 일부로 시작 태그와 종료 태그 두 종류가 있습니다.

시작 태그는 요소를 시작하며, 종료태그는 요소를 끝내는 기능을 가지고 있습니다.

일부 태그 중에는 종료 태그가 없는 것도 있습니다.

요소와 태그의 개념이 뚜렷이 구별되지 않고 혼용되는 경우가 많은데
HTML을 배우는데는 굳이 요소라는 말을 쓰지 않아도 되지만
CSS나 Javascript를 배울때는 요소라는 말이 아주 중요한 용어가 됩니다.

<p>하나의 문단내용이 여기에들어 옵니다.</p>

위의 예제에서 요소는 <p>하나의 문단내용이 여기에들어 옵니다.</p> 전체를 의미합니다.
그러나 태그는 <p>와 </p>만을 의미하죠.

속성(Attributes)

요소의 시작 태그 안에서 사용되는 것으로 좀 더 구체화된 명령어 체계를 의미합니다.

<p align="center">태그에 속성을 부여하면 태그의 성격을 좀더 구체화 시킵니다.</p>

<p>태그안에 align 이라는 속성(Attributes)을 추가적으로 사용하였습니다.

단순히 <p>는 문단을 의미하지만 <p>안에 정렬을 의미하는 align 이라는 속성을 사용하면
중앙정렬을 하는 문단을 의미합니다.

변수(Arguments)

속성과 관련된 값입니다.

위의 예제에서 align 이라는 속성에 center라는 변수를 지정했습니다.

보통은 태그, 어트리뷰트, 아규먼트 이와 같이 우리말로 굳이 바꾸어서 사용하지 않고
원어로 그대로 사용하는 경우가 많기 때문에 홈짱닷컴의 강좌에서도 가능하면 원어로 설명하겠습니다.


HTML 문서의 작성

HTML 문서의 작성은 메모장과 같은 텍스트 편집기를 이용하면 됩니다.

메모장(가능하면 에디트 플러스)을 실행하고 아래과 같이 내용을 입력한 후
파일 이름을 hello.html 또는 hello.htm으로 저장합니다.

이렇게 저장된 hello.html 파일을 Internet Explorer로 열어보면 확인할 수 있습니다.

<html>
<head>
    <title>Hello!</title>
</head>
<body> 
    Hello World!
</body>
</html>


HTML의 기본구성

<html>...</html> 태그는 HTML 문서임을 나타냅니다.

<html>
...
</html>

<head>...</head> 태그는 페이지 head element의 시작과 끝을 나타냅니다.

<html>
<head> 
    페이지 헤더의 내용
</head>
...
</html>

HTML 문서는 크게 head와 body로 나눌 수 있습니다.

head 안에는 문서의 제목을 정하는 title과 검색엔진이 필요한 정보, 스타일과 스크립트 정보 등이 위치합니다.

실제로 홈페이지 방문자들에게 보이는 정보를 다루는 것이 아니라
HTML 문서의 전체적인 특성들을 규정하는 역할을 합니다.

<title>...</title> 태그는 페이지 타이틀 시작과 끝을 지정합니다.

<html>
<head>
    <title>홈짱 닷컴 - 초보자를 위한 홈페이지 제작 가이드</title>
</head>
<body> 
    Hello World!
</body>
</html>

head안에 위치하는 대표적인 태그로 문서의 제목을 설정합니다.

문서의 제목은 검색엔진에서 아주 중요하게 취급하는 정보이므로 반드시 적어주는게 좋습니다.

문서의 제목은 아래와 같이 웹브라우저의 제목 표시줄에 출력됩니다.

<body>...</body> 태그는 페이지 본문을 나타냅니다.

<html>
<head>
    <title>홈짱 닷컴 - 초보자를 위한 홈페이지 제작 가이드</title>
</head>
<body> 
    Hello World!
</body>
</html>

사실상 화면에 출력되는 부분이 모두 <body>와 </body> 사이에 위치합니다.

Hello World!

위의 예제에서 많은 태그들이 있지만 실제로 화면에 보이는 건 <body>와 </body> 사이에 위치하고
있는 Hello World! 라는 글자뿐입니다.

HTML 문서는 계층적인 구조를 가지고 있습니다. 이를 표로 표현하면 아래와 같습니다.

html

head

 title, meta, script, style...

body

 p, table, div...

Body 태그

<body>와 </body> 태그 사이에 본문이 위치합니다.

<body> 태그의 주요 속성으로는 bgcolor, leftmargin, topmargin 이 있습니다.

bgcolor

본문의 배경색을 지정합니다.

본문의 배경색을 회색(gray)으로 지정해 보겠습니다.

<body bgcolor="gray">

leftmargin

본문의 왼쪽 여백을 지정합니다.

왼쪽 여백을 100픽셀로 지정해 보겠습니다.

<body leftmargin="100">

topmargin

본문의 상단 여백을 지정합니다.

상단 여백을 100픽셀로 지정해 보겠습니다.

<body topmargin="100">

주석(Comment)

HTML에서 주석을 사용할려면 <!-- 와 --> 사이에 내용을 넣으면 됩니다.

<!-- 여기에 주석 내용이 옵니다. -->

주석은 화면상에 표시되지 않고 소스상에서만 확인할 수 있습니다.

HTML소스를 작성할때 문서의 수정사항이나 태그의 설명 등을 보기 편하게 하기위해서 사용되는 것입니다.

주석을 사용하는 이유는 소스가 아주 길고 복잡한 경우
이 소스를 수정할때 알아보기가 힘들기에 주석을 달아놓으면 쉽게 어떤 의도로 이 소스를 작성했는지 알 수 있습니다.

그리고 여러 사람이 하나의 소스를 공동으로 작업하는 경우에도
일관된 원칙에 따라서 주석을 달아 놓으면 협업에서도 효율성이 증대됩니다.

HTML을 공부하는 입장에서는 주석의 필요성을 잘 느끼지 못하지만 실무에서는 많이 사용합니다.

저작자표시 비영리 동일조건

'Web Development > HTML / CSS' 카테고리의 다른 글

[Html] 배경(background) 과 테이블(table)에 대해서  (0) 2009.06.05
[Html] 색(color) 과 HTML 색상표 모음  (0) 2009.06.05
[Html] 이미지(image) 를 어떻게 하는가.  (0) 2009.06.05
[Html] 텍스트 관련 태그 와 링크(Link) 에 대해서  (2) 2009.06.05
[Html] 줄,표제에 대해서  (0) 2009.06.05

'Web Development/HTML / CSS' Related Articles

티스토리툴바