태그를 작성하는 방법
이전 강의에서 HTML은 <html>, <head>, <body> 3가지 태그를 기본구조로 한다고 했었습니다.
ex) HTML의 기본 구조
<html>
<head></head>
<body></body>
</html>
하지만 이때, 주의할 점이 있습니다.
바로, 태그내에 들어가는 영문자가 소문자로 작성되어야 한다는 점입니다.
물론, 대문자로 작성을 해도 동작하는데는 크게 상관이 없지만, HTML5 발표이후, 표준명세에서 태그 사이의 속성을 이루는 모든 문자는 소문자로 사용할 것을 권장하고 있기 때문입니다.
그리고 태그는 <br>태그와 같이 닫는 태그가 필요 없는 특정 태그를 제외하고 여는 태그가 이으면 닫는 태그는 필수로 삽입해야 합니다.
단, 닫는 태그가 없는 경우 보통 <br /> 이런식으로 표현하기도 합니다.
* 닫는 태그가 없는 태그들
area, base, meta, param, col, source, hr, embed, img, command, hr, input, link 등
그리고 태그를 작성할 때는 항상 부모태그를 기준으로 자식 태그들은 들여쓰기(Tab)를 이용하여 작성하는 것이 가독성면에서 훌륭합니다.
※ 부모태그와 자식태그 개념은 아래 설명을 참고하세요.
| 들여쓰기 적용 | 들여쓰기 미적용 |
| <html><head></head> <body></body> </html> |
<html><head></head><body></body></html> |
태그의 구조
태그의 구조는 부모와 자식관계, 동등 관계로 이루어집니다.
ex)
<html>
<head></head>
<body></body>
</html>
위 예제에서 파란색의 html태그와 빨간색의 head, body 태그의 관계는 부모 자식관계에 해당됩니다.
그리고 빨간색의 head와 body는 동등 관계입니다.
태그의 속성
그리고 태그들은 보통 속성값을 갖고 있는데, <태그 속성="속성값"></태그> 형태로 사용합니다.
사용법은 간단하지만, 각 태그마다 여러 속성을 갖고 있기 때문에 암기까진 아니더라도 태그와 속성에 대한 충분한 숙지가 필요합니다.
그 이유는 요즘 툴에서 자동완성을 대부분 지원하고 있기 때문에 이해만 하셔도 충분히 사용하실 수 있기 때문이죠.
ex) <div class="attributeClass" id="attributeId"></div>
위 예제에서 녹색div는 태그에 해당하고, 파란색의 class, id는 속성을 뜻하며, 빨간색의 attributeClass, attributeId는 속성 값을 뜻합니다.
HTML 문서의 기본 구성 살펴보기
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제목입니다</title>
</head>
<body>
<p>내용입니다1.<br>
내용입니다2.</p>
</body>
</html>
<!doctype>은 문서 유형을 지정하는 역할을 하는 태그입니다. html이라고 설정을 해주면 HTML5로 자동인식됩니다.
<html>은 웹문서의 시작과 끝을 알리는 태그입니다.
<head>는 웹 브라우저에게 정보를 제공해주는 역할을 하는 태그입니다. 보통 웹 브라우저의 탭에 정보가 표시됩니다.
<meta>는 문자 인코딩 및 문서 키워드 등 정보를 지정하는 태그입니다. 예제에서는 "utf-8"로 인코딩을 설정해주었습니다.
<p>는 페이지 태그로 텍스트 단락을 표시해주는데, 나중에 다시 자세히 다루도록 하겠습니다.
<br>은 줄바꿈을 해주는 태그입니다. 문서를 작성할 때 사용하는 [Enter]와 동일한 역할을 한다고 생각하시면 되겠습니다.
마지막으로 <body>는 실제 웹 브라우저 화면에 표시 될 내용을 담는 태그입니다.
지금까지 HTML의 기본구성에 대해 알아봤습니다. 다음 강의에서는 웹문서를 작성할 때 꼭 필요한 텍스트 관련 태그에 대해 알아보겠습니다.
'IT 강좌(IT Lectures) > HTML' 카테고리의 다른 글
| [HTML] 6강 표 관련 태그 (0) | 2018.01.09 |
|---|---|
| [HTML] 5강 문단 및 형식 관련 태그 (0) | 2018.01.08 |
| [HTML] 4강 텍스트 태그 (0) | 2018.01.05 |
| [HTML] 2강 웹브라우저와 웹표준 그리고 웹에디터 (0) | 2018.01.03 |
| [HTML] 1강 HTML에 대하여 (0) | 2018.01.02 |