[HTML] title | link | script ๋งจ ๋ง์ง๋ง์ ์์ฑํ๋ ์ด์
title
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>๋ง๊ณ </title>
<link href='https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>
</head>
head ์์์ ํ์์ ์ผ๋ก ์ ์ด์ผ ํ๋ ๊ฒ ์ค ํ๋์ด๋ค.
๊ทธ๋ฆฌ๊ณ ๊ฒ์ ์ต์ ํ์ ํฐ ์ญํ ์ ํ๊ณ ์๋ค.
title์ ์ ์ฐ๋ ๋ฐฉ๋ฒ (Search Engine Optimization)
โ ํค์๋ ๋จ์ ๋์ด์ ๋น์ถํ๋ค.
โก ๊ฐ๊ฐ์ ํ์ด์ง๋ง๋ค ๋ง๋ ํ์ดํ์ ๋ณ๊ฒฝํด์ฃผ๋ ๊ฒ ์ข๋ค.
โข ์์๋ฑ๊น์ผํ๊ฒ~
link
css ์คํ์ผ์ํธ๋ฅผ ์ฒจ๋ถํ๋ ํ๊ทธ์ด๋ค.
Visual Code์์ link:css๋ฅผ ์ ๋ ฅํ ๋ค์ Tab ๋ฒํผ์ ๋๋ฅด๋ฉด ์๋ ์์ฑ์ผ๋ก ๋ฌธ์ฅ์ด ์์ฑ๋๋ค.
ํฐํธ๋ฅผ ๊ฐ์ ธ์ฌ ๋๋ link ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>๋ง๊ณ </title>
<link href='https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>
</head>
<body>
<p style="font-family: 'Spoqa Han Sans Neo', 'sans-serif';">ํ์ด</p>
</body>
</html>
script
<script>์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋</script>
<script src="๊ฒฝ๋ก"></script>
html ๋ฌธ์ ๋ด์ JavaScript ํ์ผ์ ์ฒจ๋ถํ ๋ ์ฌ์ฉํ๋ค.
script๋ ์ head์ ์ ์ฐ๊ณ ๋ง์ง๋ง ๋ถ๋ถ์ ์์ฑํ๋์?
โ ์ฑ๋ฅ ํฅ์
HTML ๋ฌธ์๊ฐ ๋ก๋๋ ๋, ๋ธ๋ผ์ฐ์ ๋ ๋จผ์ ๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ํ์ฑํ๊ณ ๋ ๋๋ง์ ์์ํ๋ค.
์๋ฅผ ๋ค์ด link๋ฅผ ๋ง๋๋ฉด ์์ฒญ์ ํ ํ ๋ฐ์ ๋๊น์ง ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ , ์ผ๋จ HTML ๋ฌธ์๋ฅผ ์ฝ๋๋ค.
ํ์ง๋ง script๋ฅผ ๋ง๋๋ฉด ์คํ์ ๋ฉ์ถ๊ณ ์คํฌ๋ฆฝํธ๋ฅผ ์คํ ํ ํ ๋ค์ ๋ ๋๋ง์ ์งํํ๋ค.
๊ทธ๋์ script ํ๊ทธ๊ฐ ๋ง์ผ๋ฉด ๋ ๋๋ง์ด ์ง์ฐ๋์ด ๋๋ฆฌ๊ฒ ๋๊ปด์ง ์ ์๋ค.
โก DOM ์ ๊ทผ์ฑ
๋ง์ง๋ง์ ์์ฑํ๋ฉด, HTML ๋ฌธ์์ ๊ตฌ์กฐ๊ฐ ์์ ํ ํ์ฑ๋ ํ์ ์คํฌ๋ฆฝํธ๊ฐ ์คํ๋๋ฏ๋ก dom์ ๋ํ ์ ๊ทผ์ด ๋ ์ฉ์ดํด์ง๋ค.
โข ๋ถ๋ฆฌ์ฑ
HTML ๋ฌธ์์ ๊ฐ๋ ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ด ํฅ์
๋ํ HTML ๋ฌธ์์ SCRIPT๋ฅผ ๊ฐ๊ฐ ๋ค๋ฅธ ํ์ผ๋ก ์ ์ฅํ์ฌ ๊ด๋ฆฌํ ์๋ ์๋ค.