01.HTML의 기본 구조
HTML은 <태그>로 동작하는 마크업 언어 라고 소개글에 썼었어요. 그래서, 기본적인 구조만 파악한다면 아주 raw한 페이지 정도는 만들어 볼 수 있죠. 물론, HTML을 '본격적으로 다루려면' 단순히 구조를 알고, 여러 태그를 알아가는 수준에서 끝나지는 않아요. 아무튼, HTML의 기본 구조는 '헤드 섹션'과 '바디 섹션'으로 나누어져요. 그리고 이러한 섹션의 구분은 <태그>와 </태그>로 시작과 끝을 지정할 수 있죠. 대부분의 경우에, 특정 영역이 <태그>로 시작되고, </태그>로 끝나요.
아주 간단한 예시
정말 간단한 HTML 문서 예시 하나를 볼게요 : 페이지로 보기
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목이 들어가요.</title>
</head>
<body>
<h1>h1수준의 제목이에요.</h1>
<p>문단을 지정하는 태그에요.</p>
<!-- 주석은 이렇게 달아요. -->
</body>
</html>
2
3
4
5
6
7
8
9
10
11
자 여기서, 각각 요소는 다음과 같은 역할을 수행해요.
<!DOCTYPE html>은 이 문서가 'HTML'이라고 선언해요.- 꼭 필요한 건 아니지만, 그래도 선언되어 있는게 안정적이에요.
<html>태그가 html 문서의 시작을 알리구요.</html>태그는 html 문서의 끝을 알리죠.<head>부터</head>까지가 이 html 문서의 '헤드 섹션'이 되겠고,<body>부터</body>까지는 '바디 섹션'이 돼요.
이 외에, 바디 섹션에 포함된 두 가지 태그, <h1>과 <p>는 각각 '본문 안의 h1수준의 헤더'와 '문단'을 정의하는 태그에요. <p>태그로 문단을 정의하는 게 지금은 별 쓸데없어 보일 수 있지만, 그래도 나름의 역할을 수행하게 돼요.
script 섹션
<script>를 통해서, 스크립트 섹션을 만들 수 있어요. 이 섹션에는 HTML이 아닌 JavaScript (이하 js라고 약어를 사용할게요!) 언어로 작성한 스크립트를 넣을 수 있죠.
여기는 HTML 카테고리이기 때문에 JS를 다루지는 않을거에요. 하지만, HTML에서 JS를 이런 식으로 넣어 사용한다는 것 정도는 알아도 괜찮을거 같아 소개해요. JS를 통해 웹 페이지에서 정말 다양한 일을 수행할 수 있답니다. 사용자에게 물어보고, 입력받고, 연산하고... 단순한 페이지 구성을 넘은 대부분의 일은 JS를 통해 이루어지죠. 그래서, HTML&CSS 다음 단계로 많이들 JS를 언급해요.
요약
이번 "01. HTML의 기본 구조"에서 다룬 핵심 내용들은 다음과 같아요
- HTML은 태그로 구분되는 언어이다.
- HTML문서(웹페이지)는 크게 '헤드 섹션'과 '바디 섹션'으로 구분된다.
- 헤드 섹션에는 페이지 제목 등이 들어간다.
- 바디 섹션에는 페이지의 내용들이 들어간다.
<script>태그를 이용해, JS 언어를 사용할 수 있다.
점검
- HTML은 크게 두 파트로 구분됩니다. 어느 섹션과 어느 섹션인가요? 스크립트 섹션은 빼고 생각해요.
정답!
헤드 섹션과 바디 섹션이죠.
- HTML만으로 수행하기 힘든 일들(ex.연산 등)은 주로 어떤 언어를 통해 처리하나요?
정답!
자바 스크립트(JS, JavaScript)를 통해 처리해요.
- 헤드 섹션의 타이틀 태그를 통해 선언한 제목은 어디 표시되나요?
정답!
말 그대로 '페이지 제목'을 표현하는 곳에 표시되죠. 탭 제목이나, 브라우저를 내렸을 때 작업표시줄 등에 표시돼요.
- HTML 문서에 쓸 수 있는 태그 5개 정도만 말해볼까요? 어렵다면, 예제 코드를 한 번 확인해보세요!
태그를 외울 필요는 없다고 소개글에 썼지만...이정도는 기본이에요😃정답!
헤드(
<head>), 바디(<body>), 타이틀(<title>), 헤더(<h1>), 문단(<p>) 정도가 있겠네요. - 마지막으로, 주석은 어떻게 달죠?
정답!
<!-- 로 시작해서 -->로 끝나요.