"웹 기술로 앱 개발자 되기" 시리즈 입니다.
스스로 그 동안 사용하던 웹 기반 기술들에 대한 복습을 겸한 강의여서 html -> css -> javascript 의 순으로 먼저 정리하고,
추가로 es6 -> react -> graphql + mongodb -> react native 의 순으로 진행해 볼까 합니다. 기간은 두어달 정도로 예상을 해 봅니다.
웹 개발자 또는 웹 기술을 통해 앱을 개발해 보고 싶은 분들에게 조금이라도 도움이 되었으면 하는 바램으로 차근차근 정리해 보도록 하겠습니다.
이번 포스트는 HTML 기본구성요소(Elements 라고 함)에 대해 알아보도록 하겠습니다.
HTML 기본구성요소 - Elements
사실 HTML 의 기본 단위는 태그가 아닌 Elements 입니다.
태그는 이 Elements 를 구성하는 부품들 중 하나일 뿐이지요. Elements 는 반드시 시작태그에서 부터 시작되고 종료태그로 마감됩니다. 그 시작태그와 종료태그 사이에 컨텐츠 즉 내용이 들어가게 되고, 이렇게 Opening Tag + Contents + Closing Tag 의 하나의 세트를 Elements 라고 합니다.
< Head 엘리먼츠와 Body 엘리먼츠로 구성된 HTML 에 대한 예시 >
| Start tag | Element content | End tag |
|---|---|---|
<h1> | 첫 번째 제목 | </h1> |
<p> | 첫 번째 단락 | </p> |
<br> |
HTML Element 중첩
당연히 모든 Element 들은 중첩이 가능합니다. Element 중첩의 의미는 Element 안에 다른 Element 를 포함한다는 의미로, 이때 포함된 Element 역시 다른 Element 를 포함할 수 있고, 필요한 만큼 얼마든지 내부에 중첩해서 Element 를 포함할 수 있습니다.
모든 HTML 문서는 이렇게 중첩된 Element 들의 조합으로 구성됩니다.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
< Element 들이 중첩된 HTMl 의 전형적인 예 >
위 예시 코드를 구성하는 엘리먼트들을 좀 자세히 살펴 보자면,
<body>엘리먼트는 문서의 body 를 정의하고 있습니다.<body>엘리먼트는 시작태그로<body>태그를 가졌고, 종료태그로</body>태그를 가졌습니다.<body>엘리먼트는 컨텐츠로 두 개의 다른 엘리먼트(<h1>,<p>)를 가졌습니다.
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
body 엘리먼트가 구분되시나요?
<h1>엘리먼트는 단락 제목을 정의하고 있습니다.<h1>엘리먼트는 시작태그로<h1>태그를 가졌고, 종료태그로</h1>태그를 가졌습니다.<h1>엘리먼트는 컨텐츠로 "My First Heading" 문자열을 가졌습니다.
<h1>My First Heading</h1>
h1 엘리먼트가 역시 구분 되시나요?
<p>엘리먼트는 단락의 내용을 정의하고 있습니다.<p>엘리먼트는 시작태그로<p>태그를 가졌고, 종료태그로</p>태그를 가졌습니다.<p>엘리먼트는 컨텐츠로 "My First Paragraph" 문자열을 가졌습니다.
<p>My First Paragraph</p>
마지막으로 p 엘리먼트도 구분 할 수 있겠죠?
이렇게 HTML 은 가장 기본 구성요소인 Element 들의 조합으로 이루어져 있습니다.
종료 태그 잊지말기
HTML 엘리먼트는 시작태그와 종료태그로 구성되기 때문에 반드시 종료태그로 엘리먼트를 마감해 주셔야만 합니다.
종료 태그가 누락되면 브라우저가 현재 엘리먼트의 끝을 알 수가 없기 때문에 내가 원하는 형태로 화면에 출력이 되기 어렵습니다. (완성되지 않은 엘리먼트를 화면에 어떻게 출력할 지 알수가 없으니 출력을 하지 않을 수 밖에 없습니다.)
일부 HTML 엘리먼트는 종료태그가 제공되지 않아도 브라우저가 종료태그를 짐작할 수 있는 경우가 있어서 아래 코드와 같이 단순한 p 엘리먼트가 있고, 라인이 바뀌면서 새로운 엘리먼트가 시작되었기 때문에 종료태그가 없이도 어느 정도 엘리먼트의 시작과 끝을 판단할 수 있는 경우에는 올바로 출력하기도 합니다.
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
하지만 절대, 반드시 종료 태그로 엘리먼트를 완성해 주어야만 한다는 것을 잊지마시기 바랍니다.
언제 갑자기 종료 태그가 없는 HTML 문서가 모두 깨져서 출력될지 모르는 일이고, 그렇게 갑자기 깨져서 출력이 되면 왜 그런지를 그걸 만들었던 사람도 자신이 종료태그를 넣지 않았던 사실을 기억을 하고 있을 수가 없기 때문에 나중에 디버그(올바르지 않은 동작의 원인을 찾아 고치는 일)시에 엄청 고생을 하게 되거나 아니면 아예 문제된 부분을 찾지 못하는 경우가 왕왕 발생하기 때문입니다.
아무튼 브라우저를 믿지 말고, 반드시 엘리먼트는 시작태그로 열고 종료태그로 닫는다라고만 기억하시기 바랍니다.
내용없는 빈 HTML 엘리먼트
HTML 엘리먼트 중에는 컨텐츠, 즉 내용이 없어도 되는 엘리먼트도 있습니다.
이를 영어로는 Empty Element 라고 하며 가장 대표적으로 <br> 엘리먼트가 있습니다.<br> 태그는 내가 원하는 위치에 빈 라인을 줘서 내용들간에 줄칸을 띄우고자 할 때 사용하는데요. 이 <br> 태그가 있는 곳에서 줄칸을 띄우기만 하면 되기 때문에 이 엘리먼트는 추가로 필요한 컨텐츠가 없습니다.
필요한 컨텐츠가 없기 때문에 편의상 <br> 처럼 종료태그 없이 사용해도 되지만, 반드시 종료태그를 제공한다는 대 원칙에 맞추기 위해 아래와 같이 축약된 태그 사용을 권장합니다.
<br>
</br>
<br/>
위 세 라인은 모두 같은 의미 입니다. 이 중 마지막 세번째 형식의 사용이 가장 흔하고 또 권장됩니다. 컨텐츠를 갖지 않는 태그를 사용할 경우 태그가 열리자 마자 닫힌 것을 표현하기 위해 <br/> 형식을 사용할 것을 권장합니다.
태그는 되도록 소문자 사용
HTML 태그는 대소문자를 구분하지 않습니다.
따라서 <P> 나 <p> 를 모두 사용할 수 있습니다. 하지만 보통 표준적으로 대문자 보다는 소문자를 주로 사용(대문자 입력하려면 쉬프트 키 눌러야 하니 불편하잖아요) 하고 있구요. 문법 검증이 까다로운 XHTML 표준 같은 경우에는 반드시 소문자를 요구하기도 하니 그냥 태그는 항상 소문자로 쓰시는 것이 좋습니다.
본 포스트에서는 HTML 을 구성하는 기본 구성요소인 Element 에 대해 정리해 보았습니다.
태그라는 용어 보다는 주로 이 Element 라는 용어를 주로 사용하고, 나중에 Javascript 를 통해 HTML 문서에 어떤 수정 작업을 수행할 경우에도 기본 단위는 Tag 가 아닌 이 Element 가 되기 때문에 가능하다면 태그와 Element 의 소소한 범위 차이에 대해 이해를 먼저 하시기를 바라는 마음입니다.
이제 시작일 뿐인데도 좀 자세히 설명드리다 보니 항상 글이 길어지네요.
긴 글 읽어 주셔서 감사합니다.
그럼 이만. 다음 포스트에서 뵙겠습니다.
'Programming JavaScript > HTML' 카테고리의 다른 글
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 제목 태그 (0) | 2018.05.28 |
|---|---|
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 태그 속성 (0) | 2018.05.26 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 기본 태그 (0) | 2018.05.24 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 편집도구 준비 (1) | 2018.05.23 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 이란? (0) | 2018.05.23 |