HTML의 기본 구조
인터넷에서는 수많은 웹페이지들을 볼 수 있습니다. 그 웹페이지들이 웹페이지의 모습을 보이도록 해주는 컴퓨터 언어가 바로 HTML, CSS, Javascript 입니다.
그 중, HTML은 웹페이지의 구조를 만드는 역할을 하며, CSS는 디자인적인 부분을 담당합니다. Javascript는 팝업창 같은 동적인 부분들을 구현하는 역할을 합니다. 이 글에서는 그 중 HTML에 대해서만 살펴보도록 하겠습니다.
HTML 문서를 보면 크게 4부분으로 나누어 볼 수 있습니다. 미리 각 부분들의 역할을 알아두면 이후 HTML에 대해 본격적으로 배울 때 이해하기가 더 쉬울 것입니다.
그 전에 태그(tag)라는 개념에 대해 먼저 알아보겠습니다. <>로 표시되는 글자들 ex. <body>, <html> 등을 태그라고 부릅니다. 이러이러한 작업을 수행하거나 웹페이지에 이러이러하게 나타나도록 알려주는 명령어라고 생각하면 되겠습니다.
먼저 <!doctype> 태그입니다.
위의 작성된 코드에서 가장 윗부분을 보면 <!doctype html>이라 작성된 것을 볼 수 있습니다. 이것은 해당 html문서의 속성을 알려주는 역할을 합니다. 위의 코드를 보면 !doctype이 html이니 컴퓨터가 해당 문서를 읽을 때, html로 간주하고 읽을 것입니다. 참고로 html5 이전에는 !doctype이 여러가지가 있었지만, html5로 넘어가면서 html만 남게 되었습니다.
그 다음으로는 <html> 태그입니다.
<html> 태그는 해당 웹문서의 시작과 끝을 알려주는 역할을 합니다. 따라서 <html> </html>로 감싸진 부분을 웹문서 하나 라고 볼 수 있겠습니다.
3번째로는 <head> 태그입니다.
<head> 태그는 <html> 태그 안에 들어있는데, 웹브라우저가 해당 문서를 읽을 때 필요한 정보를 담고 있는 부분입니다. 문자 인코딩 방법, 웹문서 제목 같은 것을 정할 수 있습니다.
마지막으로는 <body> 태그입니다.
<body> 태그도 <html> 태그 안에 들어있습니다. <head> 태그가 웹브라우저에게 필요한 정보를 알려주는 역할을 한다면, <body> 태그는 겉으로 보여지는 부분을 만드는 역할을 합니다. 따라서 웹페이지를 열었을 때 우리가 보는 부분들은 모두 <body>태그 안에서 작성된 내용이라고 생각하면 되겠습니다.
'IT공부 > HTML + CSS + Javascript' 카테고리의 다른 글
| 반응형 웹 만들기 1 - 고정 그리드 레이아웃 vs 가변 그리드 레이아웃 (0) | 2021.01.08 |
|---|---|
| HTML 기초 4 - select 태그와 datalist 태그의 차이점 (0) | 2021.01.02 |
| HTML 기초 3 - map, area 태그를 활용하여 하나의 이미지에 링크 여러개 달기 (0) | 2020.12.31 |
| HTML 기초 2 - table(표) 만들기 (thead, tbody, tfoot, col, colgroup 태그) (0) | 2020.12.30 |
방구석 세계인
관심분야 : 외국어 학습, 프로그래밍, 책 리뷰 등...