저번 시간에는 HTML의 개발 환경을 만들었으며 이번에는 HTML의 기본적인 구조와 문법에 대해 알아보도록 하겠다.
HTML의 태그
HTML은 마크업 언어로, 태그로 문서나 데이터를 구분해 웹문서를 나타내는 언어이다.
태그란 무엇인가?? 일종의 분류하는 식별표지 같은 것으로 이해하면 편하다. HTML에서의 태그는 <, 태그의 내용, 그리고 >으로 이루어진다. 예를 들어 이미지 파일을 표시할 때, <img src="이미지 경로"> 이런 식으로 표현이 된다.
대부분의 경우, <h1> 들어갈 내용 </h1>이나 <p> 들어갈 내용 </p>처럼 여는 태그(<h1>, <p>)와 닫는 태그(</h1>, </p>가 쌍으로 표현된다는 것을 명심해야 한다.
<tag attribute1="value1" attribute2="value2">보이는 내용</tag>
또한 태그는 이런 식으로 여러 가지 속성, 즉 해당 태그에 대한 설정들도 함께 쓸 수 있다는 점도 염두에 두자.
HTML의 구조
html은 어떤 구조로 쓰여있을까?? 알아보기 위해서 저번 시간에 실행시킨 html 코드를 불러와 보자.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>나의 첫 HTML 개발환경</title>
</head>
<body>
<h1>비주얼 스튜디오로 만든나의 첫 HTML 개발환경이다.</h1>
</body>
</html>
위 코드를 분석해 보면, <!doctype html>, <html>~</html> 이 있으며, html 태그로 묶어진 부분안에 <head>~</head>, 그리고 <body>~</body> 태그가 있다는 것을 알 수 있다.
보다 이해하기 쉽게 그림으로 나타내 보았다.
<!doctype html> 부분의 경우는 현재 문서가 html으로 쓰였다는 것을 알려주고 있으며,
<html> ~ </html>은 웹문서의 시작과 끝을 나타내 주며,
<head> ~ </head>은 웹페이지의 제목, 키워드, meta 데이터 등 웹페이지의 기본적인 정보를 입력하는 곳이며,
<body> ~ </body>는 실제 웹페이지에 나타나는 부분을 포함하는 공간으로 이해하면 된다.
이번 시간에는 HTML의 구조와 문법에 대해 간단히 알아보았다. 다음 시간부터 HTML의 태그들에 대해서 알아볼 예정이다.
참조
고경희, Do it! HTML + CSS3 웹 표준의 정석, 이지스퍼블리싱, 2017
"HTML", 위키백과, last modified Oct 4.2022,accessed Nov 19. 2022,https://ko.wikipedia.org/wiki/HTML
'나의 풀스택 개발일지' 카테고리의 다른 글
| [풀스택개발일지#4][HTML]텍스트 태그 (0) | 2022.11.25 |
|---|---|
| [풀스택개발일지#2][HTML]HTML 개발 환경 만들기 (0) | 2022.11.22 |
| [풀스택개발일지#1][HTML]HTML이란? (0) | 2022.11.19 |
| [풀스택개발일지#0.5]풀스택을 위한 첫걸음_기본개념과 방향잡기 (0) | 2022.11.17 |
| [풀스택개발일지#0]풀스택은 어떻게 시작해야할까..? (0) | 2022.11.17 |
