안녕하세요, 이번에 인프런에서 맛집지도 만들기라는 인터넷강의를 통해 풀스택을 맛보며 공부해보겠습니다.
먼저 이번 시간에는 HTML 정의를 알아보고 구조에 대해서 파악해보겠습니다.
HTML ? : Hyper Text Markup Language 의 약어로, Chrome, Edge 등 웹 브라우저가 해석하고 사용자에게 보여줄 수 있는
언어를 의미합니다. 그리고 그 화면을 꾸며주기 위해 HTML 안에 각각 용도에 맞는 TAG 라는 것을 사용해요.
Hyper Text라는 것은 쉽게 말해 화면에서 어떤 다른 화면으로 쉽게 넘어갈 수 있는 기능을 가진 text를 의미합니다.
아래와 같이 클릭 한 번으로 다른 페이지로 넘어갈 수있는 것도 바로 HTML의 Hyper Text 기능때문이라고 보면 돼요.
또한 Markup Language라는 것을 우리 말로 해석하면 구조화된 언어입니다.
웹 브라우저(컴퓨터)가 어떤 언어를 해석하려면 컴퓨터가 이해할 수 있는 구조를 가져야 하기 때문입니다.
HTML은 무수히 많은 TAG들을 사용하기 때문에, HTML은 각종 화면을 설명하고 꾸며주는 여러 TAG들의 집합이라고 이해했습니다. (저는 그렇게 이해했습니다)
먼저 기본 HTML 문서부터 살펴볼게요.
HTML을 처음 보시는 분들은 굉장히 복잡해 보이실 수 있지만, 쉽게 HTML은 우리가 웹사이트에 들어갔을 때
보는 화면이라고 생각하시면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ahgle" />
<meta name="description" content="맛집지도 서비스" />
<meta
name="keywords"
content="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버"
/>
<title>ahgle 사이트</title>
</head>
<body>
<h1>안녕하세요.</h1>
</body>
</html>위와 같이 꽤 여러 문장으로 이루어진 HTML 문서는 실제로 화면에서 보여주는 내용은 바로 아래와 같이
매우 간단합니다.
그럼 어떻게하면 저 HTML 코드가 이렇게 "안녕하세요" 라는 문구 하나만을 나타내는 화면으로 출력될 수 있는 지 알아보도록 할게요.
HTML을 다시 이야기하자면 "문서에 어떤 요소들이 들어갈 지를 정하는 여러가지 의미를 가진 TAG들의 연속" 이라고 할 수 있습니다. HTML은 크게 head 태그와 body태그로 구분됩니다.
head 태그는 화면에 직접 출력되는 내용은 아니지만, 중요한 내용을 담고 있습니다.
HTML문서의 메타데이터(문서에 대한 정보)를 정의하는데 사용됩니다. 웹페이지의 제목, 스타일 시트, 스크립트 등과 같은 문서의 설정과 형식을 정의하는 태그가 바로 head 태그에요.
body 태그는 웹페이지의 시각적인 콘텐츠를 구성하는 부분입니다.
body 태그의 내용이 우리가 화면으로 직접 보는 내용이에요.
이렇게 간단한게 HTML 문서의 정의와 구조에 대해 확인해보았으니 이번에는 각 라인 별 좀 더 구체적으로 HTML 코드를 해석해보겠습니다.
<!DOCTYPE html>
이 문서는 HTML 문서라는 것을 알려주는 역할을 하는 문장입니다. 별 의미는 없다고 봐도 무방합니다.
<html lang="en">
lang 은 HTML 문서의 언어가 english라는 것을 알려주는 속성입니다. 속성은 옵션같은 역할입니다.
<head>
head 태그의 시작을 알리는 부분입니다.
<meta charset="UTF-8">
메타 태그가 쓰이고 있네요. 메타 태그의 charset 속성은 문서의 인코딩 방식을 설정하는 속성입니다.
UTF-8이라는 인코딩 방식을 사용하는 문서임을 알 수 있습니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
해당 tag는 사실 요즘은 사용하지 않는다고 보시면 됩니다. IE=edge는 IE 브라우저의 최신버전의 엔진을 사용하라는 의미인데, 요즘은 대부분 chrome을 이용하기 때문이죠.
<meta name="author" content="ahgle" />
name=author 라는 메타태그의 속성은 보통 이 문서를 누가 만들었는 지 알려주는 역할을 합니다.
name=author은 name 속성 값으로 author 가 온 것이며 author의 이름이 ahgle인 것입니다.
<meta name="description" content="맛집지도 서비스" />
name=description 속성은 보통 이 페이지에가 무슨 서비스인 지 알려주는 메타태그 속성입니다.
맛집지도 서비스라는 것을 알려주고 있네요.
웹에서 검색 시 아래와 같이 서비스에 대한 간단한 설명이 나타나는 부분이 description 속성 하는 역할이라고 보시면 됩니다.
<meta
name="keywords"
content="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버"
/>
name=keywords 속성은 검색엔진에서 사용자가 어떤 키워드로 검색했을 때 이 사이트를 보여줄 지 알려주는 속성입니다.
동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버 등의 키워드가 이 사이트를 위해 사용되는 키워드임을 알 수 있네요.
<title>ahgle 사이트</title>
title 태그 : 문서의 제목을 설정하는 태그입니다.
<title>ahgle 사이트 </title>아래와 같이 문서 제목이 ahgle 사이트로 노출되는 것을 볼 수 있습니다.
body 태그 : 실제 문서에 나타나는 부분을 나타내는 태그입니다.
<body>
<h1>안녕하세요.</h1>
</body><h1> 태그는 HTML 문서에서 제목을 나타내는 태그입니다. h는 Heading의 약자이며 숫자 1은 가장 높은 수준의 제목을 나타냅니다. <h1> 태그를 사용하여 텍스트를 감싸면, 해당 텍스트는 일반 텍스트보다 크고 더 강조된 형태로 표시됩니다. 일반적으로 웹 페이지의 제목이나 섹션의 주요 제목을 표시하기 위해 사용됩니다.
오늘은 이렇게 HTML의 정의와 간단한 HTML 예시를 통한 구조에 대해 알아보았습니다.
'프로젝트 > 맛집지도만들기' 카테고리의 다른 글
| [맛집지도만들기] 자주 쓰는 HTML 태그 (0) | 2023.06.04 |
|---|