[HTML] 02. 기본 Tag

Front-End/HTML

[HTML] 02. 기본 Tag

Bigone17 2021. 11. 8. 11:54

🟡 1. DOCTYPE html

- DOCTYPE html이란 웹문서가 어떤 버전의 html 언어로 작성되었지를 표시하는 기능을 하는 태그입니다.
이를 문서 형식 정의(Document Type Definition, DTD) 태그라고 하는데, html문서 최상단에 위치해야 합니다. 그럼 웹브라우저는 DTD를 통해서 맞는 버전에 맞게 페이지를 로드해줍니다.

<!DOCTYPE html>

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 1.0

🟡 2. html tag

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>페이지 제목</title>
	</head>
	<body>
		화면에 실제로 보이는 구간
	</body>
</html>

- html태그는 모든 HTML요소들의 부모 요소이자 웹페이지의 제일 큰 테두리입니다. 그리고 웹페이지에서 단 한 번만 기술되면 됩니다.

🟡 3. head tag

- head 태그 안에는 많은 메타데이터(다른 데이터를 설명하는 데이터)들을 포함할 수 있고, 그 메타데이터들은 웹페이지의 title, style, link 등에 대한 데이터들을 표기합니다. title을 제외한 메타데이터들은 웹페이지 화면에 표시되지 않습니다.

- 메타데이터(metadata)란? '데이터를 설명하기 위한 데이터', '어떤 목적을 가지고 만들어진 데이터'라고 표현을 하는데 무슨 말인지 이해가 잘 되지 않는다... 개인적으로 쉽게 생각해서 음식을 사면 성분 표시 표? 원산지 표기? 그런 거라고 생각을 합니다.

위 사진은 네이버 메인화면의 페이지 소스인데, 굉장히 많은 메타태그가 있는 게 보이실 겁니다. 6번째 메타태그를 보면 description이라는 이름을 가진 메타태그가 보이는데 이것은 그 페이지의 설명을 보여주는 메타태그입니다. 곧 메타데이터는 html만 기준으로 봤을 때 이 사이트가 어떤 속성을 가지고 있고, 어떤 언어로 만들어졌으며, 어떠한 메인 설명을 가지고 있고, 화면 크기 설정은 어떤 식으로 설정되어 있는지를 알려주는 데이터입니다.

🟡 3-1. title tag

- title 태그는 html문서의 제목을 표시한다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML WORLD!</title>
	</head>

🟡 3-2. style tag

- style 태그는 html문서의 style을 설정할 수 있다.

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>문서 제목</title>
		<style>
			body {
				background-color: yellow;
				color: blue;
			}
		</style>
	</head>
	<body>
 		오징어 게임 꿀잼
	</body>
</html>

style태그에서 배경은 노란색이고 글자색은 파란색으로 설정해서 브라우저에서도 그와 같이 그려졌습니다.

🟡 3-3. link tag

- link 태그는 외부의 문서를 연결해주는 태그입니다. 주로 css파일 같은 스타일시트 파일이나, 외부 사이트에서 제공해주는 폰트 등을 연결해줍니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>문서 제목</title>
		<link rel="stylesheet" type="text/css" href="css/1.css">
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap" rel="stylesheet">
	</head>
	<body>
 		<p>SQUID GAME!</p>
	</body>
</html>

--1.css
body{
    background-color:lightcyan;
    color: violet;
    font-family: 'Mochiy Pop P One', sans-serif;
}

- 첫 번째 link태그를 통해서 css폴더에 있는 1.css파일을 불러와서 배경색과 글씨 색을 바꿨습니다. 그리고 2, 3, 4번째 링크 태그를 통해서 구글 폰트에서 제공해주는 폰트를 불러와서 적용했습니다. 위와 같이 link태그를 통해서 자신의 컴퓨터 안에 있는 다른 파일(css)을 불러오거나, 외부 사이트에서 제공해주는 스타일을 불러와 적용할 수 있습니다.

🟡 3-4. script tag

- script요소에는 client-side JavaScript를 기술합니다. html에서 버튼을 클릭했을 때 알럿이 뜬다거나, 저장이 된다거나 하는 동작들을 해주는 것이 javascript입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      document.addEventListener('click', function () {
        alert('징검다리 건너기 게임입니다!');
      });
    </script>
  </head>
  <body>
    다섯번째 게임은?
  </body>
</html>

위 코드를 간략하게 설명하자면, body부분(브라우저에 표시되는 부분)을 클릭 시에 "징검다리 건너기 게임입니다."라는 알럿이 뜨게 하는 코드입니다. 클릭이 되었을 때 알럿을 띄우는 기능을 html이 자체적으로는 할 수 없기 때문에 js를 사용해야 되는데 그러기 위해서는 script 태그를 사용하는 것입니다.

- src 속성을 이용하면 외부 js 파일을 로드할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="js/1.js"></script>
  </head>
  <body>
    다섯번째 게임은?
  </body>
</html>

🟡 3-5. meta tag

- meta요소는 charset, description, keywords, author, robots 등 여러 종류의 메타데이터를 정의하는 데 사용됩니다. 웹페이지의 속성을 관여할 때 사용할 수도 있고, 검색엔진에 어떻게 노출이 되는지도 설정할 수 있습니다.

위 사진과 같이 description이라는 메타태크를 통해서 검색엔진에서 검색 시 어떻게 표현이 되는지 설정을 하는 것을 볼 수 있습니다.

🟡 4. body tag

- body 태그는 html문서에서 단 한번만 기술이 되고, head태그에 들어가지 않는 모든 요소들이 body태그 안에 기술이 되면 됩니다. 화면에 보이는 모든 요소들은 body태그 안에 있다고 생각하시면 됩니다.

긴 글 읽어주셔서 감사합니다 :)
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽은 신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~

728x90

저작자표시

'Front-End > HTML' 카테고리의 다른 글

[HTML] 06. LIST & TABLE (1)	2021.11.17
[HTML] 05. Hyperlink (0)	2021.11.15
[HTML] 04. 텍스트 관련 태그2 (0)	2021.11.12
[HTML] 03. 텍스트 관련 태그 (0)	2021.11.10
[HTML] 01. HTML란? 그리고 기분 문법 (0)	2021.10.31

현재글[HTML] 02. 기본 Tag

250x250

programmers, HTML FORM, 프로그래머스, JS, jsonServer, NextJS, rn 세모 모드 고정, rn 화면 회전, 코딩테스트, json-server, HTML, Sentry, tag, html button, Next.js, 자바스크립트 객체, 자바스크립트, 코테, rn 화면 회전 금지, JavaScript,

Today :
Yesterday :

운좋개