홈페이지 만들기 html 강좌 4 - 기본 문서 구조
2020. 1. 8. 20:04
안녕하세요 엘빈입니다.
홈페이지는 기본적으로 html 웹 문서 형태로 구조되있습니다. 즉 우리가 일상에서 사이트를 접속하는 방식은 네트워크를 통해 웹문서를 다운로드 받고 이를 브라우저가 보여주는 형태입니다. 그렇다면 웹 문서 구조는 어떻게 구조화 되있을까요?
저번 포스팅에서 말한 것처럼 웹 편집기로는 여러가지 도구가 있습니다. 특별한 도구가 필요한 것은 아니니 메모장으로도 html 문서를 작성할 수 있는데요. 블로그 포스팅에서는 편집기로 visual studio code를 사용하겠습니다. visual studio code 설치 방법에 대해서는 아래 링크를 클릭해주세요.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
</head>
<body>
<h1>홈페이지 만드는 것은 절대 어렵지 않아요!</h1>
<p1>그저 이렇게 상황에 맞게 태그들을 작성해주시면 됩니다</p1>
</body>
</html>
위 사진과 같이 폴더 안에 portal.html 파일을 만들고 위와 같은 코드를 작성하였습니다. 저장하면 어떤 파일이 생길까요?
위와 같이 브라우저(크롬) 형태의 파일이 생긴 것을 알 수 있습니다. 이처럼 html 파일 형식으로 텍스트 문서를 저장하면 웹 문서로 인식되어 브라우저 파일 형태를 띄게 됩니다.
(html 문서를 만들고 싶다면 텍스트 형태의 파일 뒤에 ".html"을 작성후에 저장해야 합니다)
파일을 한번 클릭해 봅시다.
아직 홈페이지 형태라고 말하긴 좀 그렇지만 브라우저 위에 화면이 나타납니다. 문서를 작성했을 뿐인데 브라우저 위에 화면이 표시되네요? 그렇다면 조금만 꾸민다면 우리가 알고 있는 형태의 사이트를 만들수 있지 않을까요?
맞습니다. 홈페이지를 만드는데에는 큰 프로그래밍 지식이 필요한 것이 아닙니다. 그저 규정된 형식으로 웹 문서를 작성하면 되는 것이죠. 이를 웹 프로그래밍이라고 합니다. 사진을 보시면 윗 문장 글씨와 아랫 문장 글씨 크기가 다른 것을 알 수 있습니다. 이는 작성했던 코드가 서로 각기 다른 문법이 적용되어 있기 떄문입니다.
소스코드 분석에 들어가기 앞서 가장 기초가 되는 문장 형식을 알아보겠습니다.
태그
이상한 단어들이 꺾은 괄호 안에 들어가 있습니다. <html> 처럼 꺾은 괄호를 포함한 단어를 "태그"라고 합니다. 태그는 뒤에 따라올 문장에 대한 문법을 지시하는 의미를 가지고 있습니다. 몇가지를 제외한 대부분의 태그들은 여는 태그와 닫는 태그 두 쌍으로 구성됩니다.
<html>는 웹 문서 시작의 의미를 가지고 있으며 닫는 태그 </html>은 웹 문서 종료의 의미를 가집니다.
정리해보자면 다음과 같습니다.
여는 태그는 <로 시작해서 >로 끝납니다. 여는 태그를 작성하였다면 닫는 태그 또한 작성이 필요합니다. 닫는 태그는 </로 시작하여 >로 끝납니다.
속성
<meta cahrset = "utf-8">라는 코드를 분석해 봅시다. <meta>까지 오면 방금 전 배운 태그라는 것을 알 수 있을텐데 그 뒤의 charset="utf-8"은 무슨 의미일까요? 대부분의 태그들은 문법적 의미가 있다고 알려드렸는데요. 위와 같은 문장은 큰 문법 틀에 세부 사항이나 새로운 추가 기능을 지정하는 "속성"이라고 합니다.
"속성"은 태그와 함께 뒤의 문장에 대한 특성이나 성격을 지정하는 역할을 합니다.
자 기본적인 문구들을 알아보았습니다. 그렇다면 본격적으로 위의 소스 코드들을 분석해볼까요?
1. <!doctype html>
해당 문구는 문서 유형을 지정하는 문구입니다. doctype 뒤에 html이 붙어있습니다. 이는 해당 파일이 html 웹 문서라는 것을 알리는 것입니다
2. <html>,</html>
html은 웹 문서 전체의 시작과 끝을 알립니다. 모든 웹 문서 내용은 html 태그 안에 존재해야합니다. html 안에는 크게 head 태그와 body 태그로 나뉩니다
3. <head></head>
head 태그 안의 내용은 문서 전체 성격이나 참조 링크 등을 설정하는 것입니다. 즉 실제 내용은 아니지만 웹 문서를 보여주기 위한 기본 설정 내용이 모두 들어있습니다. 페이지의 이름, 스타일 참조 파일 링크 등이 해당 태그 안에 포함되어 있습니다
4.<body></body>
body 태그 안에는 웹 문서의 실제 내용이 포함되어 있습니다. 브라우저에 표시되는 모든 내용을 포함한다고 말할 수 있습니다. 해당 태그 안에 내용을 작성함으로서 홈페이지를 제작할 수 있는 것입니다
5. <meta charset="utf-8">
meta 태그는 문자 인코딩 방법을 비롯해 웹 문서 키워드 등을 지정할 수 있습니다. 이는 검색 엔진에 전달해주어 노출을 하는데에 유리해집니다.
해당 코드의 뜻은 문자 인코딩을 utf-8 방식으로 사용하겠다는 뜻입니다
6. <title>, </title>
title 태그는 페이지 이름을 설정합니다. 크롬 상단 리스트에 페이지 이름이 표시되어 있는데 이는 모두 title 태그로 설정된 것입니다. title 태그는 페이지당 단 한번 등장해야 합니다
7. <h1> , <p1>
body 태그 안에 사용할 수 있는 html 문법 태그들입니다. h1 태그는 보통 제목을 표시할 때 사용하며 p1 태그는 실제 내용을 담는데 사용합니다.
이처럼 우리는 각 문법 태그와 속성을 이용해 홈페이지를 제작하는 것입니다. 현재 html5 버전까지 출시되었으며 다양한 문법 태그들을 지원하고 있습니다. 우리가 홈페이지를 꾸밀려면 기본적인 태그들을 알아야겠죠. 다음 시간에는 html 태그들에 대해서 자세히 알아보겠습니다.
'개발 > HTML_CSS' 카테고리의 다른 글
| html 강좌 7 표(테이블) 관련 태그 정리, 간단하게 만들자 (0) | 2020.01.11 |
|---|---|
| html 강좌 6 목록 관련 태그 정리 (0) | 2020.01.10 |
| html 강좌 5 텍스트 관련 태그 정리 (0) | 2020.01.09 |
| 홈페이지 만들기 HTML 강좌 2 - 설정 및 기본 구조 (0) | 2019.03.28 |
| 홈페이지 만들기 HTML 강좌 1 - 웹 프로그래밍에 대해서 (0) | 2019.03.26 |
