HTML 태그 기본구조

HTML에서 이용되는 태그와 구조에 대해 살펴보았습니다. HTML이란 Hyper Text Markup Language의 각 부분을 약자로 축약한 것을 의미합니다. 뜻풀이를 해보자면 하이퍼 텍스트와 마크업을 알아보면 됩니다.

HTML이란 무엇인가

하이퍼텍스트란 어떠한 형태를 가지고 있어서 부가적인 기능을 할 수 있는 문서를 말합니다. 문서의 다른 부분으로 이동할 수 있게 해주기도 하고, 다양한 편집기에서 수정할 수 있습니다. 마크업이란 한 문서에 대하여 특정 부분을 표시하고 이 부분에 각각 의미를 부여하는 것을 말합니다. 웹 브라우저에서 마크업 언어를 읽게 되는데 그것들을 바탕으로 표시가 나타나는 것이라고 볼 수 있습니다. 확장자를 html로 저장하면 HTML 문서로 저장됩니다.

요즘은 기술자들이 많아서 HTML 태그를 직접 입력해서 홈페이지를 운영하거나, 블로그를 편집하기도 합니다. 편집기 및 에디터를 사용해보면 보통은 편집기를 통해 여닫는 태그가 기본적으로 생성되고, 작성에도 편리하여 연습해보실 때도 좋습니다. 연습 삼아 메모장에서 시도해보시는 것도 좋겠습니다.

HTML 태그

tag라는 것은 보통 시작할 때 작성해주는 여는 태그와 적용시킬 부분이 종료되는 부분 끝 부분에 닿는 태그로 구성됩니다. 내용이 많다면 종료 태그가 뒤에 붙어서 보기 어려울 수도 있습니다.

<tag>~~~~</tag>

시작할 때 작성해주어서 열고, /로 닫아주는 종료 태그 형식으로 이용합니다. 시작할 때 시작 태그, 종료할 때 종료 태그라고도 합니다. 대부분의 경우 종료 태그가 붙는데, 간혹 종료 태그가 필요 없는 경우도 있습니다. <hr>, , , <img>, <tr>, <meta> 등이 있습니다. 티스토리를 이용하다 보면 가끔 메타태그를 추가해주어야 하는 경우들이 있습니다. 플러그인을 통해서 적용하실 수도 있지만, html 편집에서도 수정이 가능한데, 여러 내용들을 살펴보시면 종료 태그가 없는 경우들도 보실 수 있습니다.

그리고 가끔 많은 분들이 헷갈려하시는 부분이 대소문자입니다. HTML 태그는 대소문자를 구분하지 않습니다. 그래서 가끔 html태그를 복사하시는 경우 대소문자까지 섬세하게 적으시는 분들이 계신데 구분하지 않고 있어 그냥 적으셔도 됩니다. 또한 엔터를 치면 태그를 볼 수 있습니다. 그리고 태그와 태그 사이에 엔터를 여러 번 치더라도 실제 웹사이트에서 보일 때는 한 칸만 띄어지는 것을 볼 수 있습니다. 하나 이상의 공백은 자동으로 무시됨을 볼 수 있습니다.

HTML의 특징

웹문서들의 표준 형식으로 이용되고 있는 데다가 마크업 언어로 빠른 속도를 보여줄 수 있습니다. 파일 용량이 적기 때문에 더 빠른 서비스를 제공받을 수 있게 됩니다. 그리고 문법만 이해하고 사용한다면 텍스트 편집기만으로도 작성이 편리해서 메모장으로도 가능합니다. 에디터도 많아져서 이용이 편리한 편에 속합니다. 주로 아래한글, 워드 등의 프로그램을 이용하는 편인데 각 프로그램이 있어야만 확인이 가능합니다. HTML로 작성했다면 제약 없이 확인할 수 있는 장점도 있습니다.

HTML에도 속성과 변수가 있습니다. 속성은 명령을 구체화시키는 역할을 수행합니다. 쉽게 글자의 색 변경, 폰트, 크기 등을 변경하는 FONT, SIZE, COLOR, FACE 등 속성을 예로 들 수 있습니다.

등의 형식으로 볼 수 있습니다. 이렇게 속성은 보통 변수를 갖게 됩니다. 속성과 관련된 값을 의미하는데, 위에서 노란색 대신 녹색, 파란색 등의 다양한 것들을 변수라고 표현합니다.

HTML의 기본적인 문서 구조

일반적인 HTML의 구조는 머리말이라고 하는 HEAD가 위에 있습니다. 그리고 이어지는 것은 제목이라고 할 수 있는 Title입니다. 타이틀 태그는 제목답게 가장 상단에 작성하면 됩니다. 상단 머리말은 제목까지 작성해주고 종료 태그를 붙여줍니다. 그리고 다음에는 본문이라고 하는 BODY가 있습니다. 본문 내용이 다 마무리되었다면 BODY태그를 종료해주고, HTML 태그도 종료해줍니다.

<html>

<head>
<title> 문서의 타이틀, 제목 </title>
</head>

<body> 문서의 본문 내용 ~~~~
~~~~
~~~~
</body>
</html>

HTML의 뼈대 기본 구조는 위와 같은 형태입니다. 첫 시작은 html태그로 시작하고 문서의 가장 하단에 종료 태그가 필요합니다. head 태그의 경우 문서가 시작되는 것을 알리고, 종료 태그가 필요합니다.

HTML 문자 태그

H 태그는 heading 문서의 제목의 약자입니다. 즉 제목을 나타내는 H태그로 <h>~</h> 형태로 합니다. 그런데 제목도 대제목, 중간 제목, 소제목 등 구분이 있습니다. 이 구분은 숫자로 표현해주고 있습니다. H1이 가장 크고, H2, H3, H4, H5, H6으로 점점 작아지는데, H6이 가장 작은 크기입니다.

font 태그는 글자의 크기와 색깔, 무슨 체인지 정할 수 있습니다. font size = 1, 2, 3, 4, 5, 6, 7 등 점점 숫자가 커질수록 글자 크기도 커지게 됩니다. font color="red"처럼 일반적인 영어를 입력할 수도 있습니다. 또한 RGB코드라고 색상의 코드값을 찾아서 입력해줄 수도 있습니다.

글자 모양 변경하는 태그들이 있습니다. 글씨를 굵게 보여주는 ~ 태그. 약간 기울어진 글씨를 보여주는 이탤릭체는 ~ 영어 I를 이용합니다. 밑줄을 쳐주고 싶다면 그 부분에서 ~를 하면 됩니다.

간혹 태그에 들어있는 <, >, "" 등을 사용하고 싶을 때가 있습니다. 공백의 경우에는 보통 &nbsp로 표현됩니다. 가끔 블로그의 글을 쓰고 HTML로 보게 되면 &nbsp를 볼 수 있는데요. 공백을 뜻하는 것입니다. HTML에서는 스페이스바를 아무리 많이 해두어도 그 이상 적용되지 않기 때문입니다. <부등호는 <로 표현할 수 있고, > 부등호는 >로 표현이 됩니다. "의 경우 &qoit;로 표현할 수 있습니다.

위처럼 HTML에서 스페이스, 엔터 등의 행위를 인식할 수 없기 때문에   또는 줄 바꿈이 필요합니다. 줄 바꿈은 을 통해서 할 수 있습니다. BR의 뜻은 Line Break의 중간에 있는 BR을 따온 의미입니다. 종료 태그가 필요 없습니다. 그리고 줄을 바꿨다면, 단락을 구분해주는 것도 가능한데 이것은 , P 태그로 가능합니다. P태그가 마지막에 줄을 띄워준다면 DIV태그는 마지막에 줄을 띄워주지 않고 단락만 구분할 수 있습니다.

가끔 블로그들을 보면 가운데 정렬해서 보다 가독성이 좋게 구성된 것들을 볼 수 있습니다. 그럴 때 사용하는 것은 CENTER 태그로 가운데 정렬을 하고 싶은 부분에 <CENTER> ~~~ </CENTER> 끝나는 부분에 추가해주면 됩니다.

또한 추가적으로 문장을 보다 보기 좋게 구분해주는 수평선이 있습니다. <HR> 태그를 이용하고 태그 안에 SIZE, WIDTH, 폭 두께, 정렬 등을 해줄 수 있습니다.

그리고 코드를 정리할 때 공통적으로 이용하는 주석이 있습니다. 주석은 으로 작성할 수 있습니다. 사이트에 공개되지 않고 코드에서만 볼 수 있습니다. 나중에 코드가 많아졌을 때 이해하기 쉽게 달아두는 편입니다.

목록을 만들 수 있는 태그들이 있습니다. 목록이라고 하면 ●, ○ 등으로 보여주는 리스트를 의미합니다. 각 항목들은 <li> 태그로 작성해주면 됩니다. 그런데 모양을 정할 때는 <UL type = circle, square> 등의 형식으로 해주어야 합니다.

그리고 하이퍼링크가 있습니다. 하이퍼링크는 아마 잘 알고 계실 텐데, 파란색 주소창으로 보이고 클릭하면 해당 웹사이트로 이동하게 되는 연결을 말합니다. 문서 안에 특정 문자열, 이미지 등을 클릭하면 되는데, 문서 연결 태그가 필요하게 됩니다. 영어로 앵커에서, Anchor의 A를 따와서 <A> 태그를 사용합니다. 일반적인 형식은 아래와 같습니다.

<A href = "연결할 문서"> 화면에 표시할 내용 </A>

여기서 A는 태그를 의미하고, href는 연결하고자 하는 HTML 또는 URL을 작성해주면 됩니다. 또는 그림파일을 적으면 됩니다. 여기에 title을 작성해주면 마우스를 위에 두었을 때 내용을 보여줄 수 있습니다.

이상 HTML 태그 기본구조에 대한 내용을 살펴보았습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

자바스크립트의 특징 장단점 (0)	2021.01.19
HTML 태그 FORM, INPUT, SELECT, TEXTAREA (0)	2021.01.19
HTML 이미지 alt 값 입력방법 (0)	2021.01.18
인터넷의 발달과 구조 (0)	2021.01.18
정보통신의 발달과정 (0)	2021.01.18

Info

HTML 태그 기본구조