์น ๊ฐ๋ฐ์์ CSS ์ต์ปค ์ด๋ฆ ์ถฉ๋์ ์๋ณํ๊ณ ํด๊ฒฐํ์ฌ ์ํํ ํ์๊ณผ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ณด์ฅํ๋ ์ข ํฉ ๊ฐ์ด๋์ ๋๋ค.
CSS ์ต์ปค ์ด๋ฆ ์ถฉ๋: ์ต์ปค ๋งํฌ ์ถฉ๋ ์๋ณ ๋ฐ ํด๊ฒฐ
ํด์ ๋งํฌ ๋๋ ์ ํ ๋งํฌ๋ผ๊ณ ๋ ์๋ ค์ง ์ต์ปค ๋งํฌ๋ ์น ํ์์ ๊ธฐ๋ณธ ์์์
๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๋ ์น ํ์ด์ง์ ํน์ ์น์
์ผ๋ก ๋น ๋ฅด๊ฒ ์ด๋ํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ํ์ด์ง์ ์ฌ๋ฌ ์์๊ฐ ๋์ผํ id ์์ฑ์ ๊ณต์ ํ์ฌ ์ต์ปค ์ด๋ฆ ์ถฉ๋์ด ๋ฐ์ํ๋ฉด ์์๋ ํ์ ๋์์ด ์ค๋จ๋ฉ๋๋ค. ์ด ๋ฌธ์๋ CSS ์ต์ปค ์ด๋ฆ ์ถฉ๋์ ์ดํดํ๊ณ , ์๋ณํ๋ฉฐ, ํด๊ฒฐํ์ฌ ์ํํ๊ณ ์์ธก ๊ฐ๋ฅํ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ณด์ฅํ๋ ์ข
ํฉ์ ์ธ ๊ฐ์ด๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
์ต์ปค ๋งํฌ์ id ์์ฑ ์ดํดํ๊ธฐ
์ถฉ๋์ ๋ณต์ก์ฑ์ ์ดํด๋ณด๊ธฐ ์ ์ ์ต์ปค ๋งํฌ์ ๊ธฐ๋ณธ๊ณผ ์๋ ๋ฐฉ์์ ๋ค์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์ต์ปค ๋งํฌ ์๋ ๋ฐฉ์
์ต์ปค ๋งํฌ๋ URL์์ # ๊ธฐํธ ๋ค์ ์๋ณ์(์ต์ปค ์ด๋ฆ)๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด ์๋ณ์๋ ํ์ด์ง์ ์๋ HTML ์์์ id ์์ฑ๊ณผ ์ผ์นํฉ๋๋ค. ์ฌ์ฉ์๊ฐ ์ต์ปค ๋งํฌ๋ฅผ ํด๋ฆญํ๊ฑฐ๋ ํด์๊ฐ ํฌํจ๋ URL๋ก ์ด๋ํ๋ฉด ๋ธ๋ผ์ฐ์ ๋ ์ผ์นํ๋ id๋ฅผ ๊ฐ์ง ์์๊ฐ ๋ณด์ด๋๋ก ํ์ด์ง๋ฅผ ์คํฌ๋กคํฉ๋๋ค.
์๋ฅผ ๋ค์ด, ๋ค์ HTML์ "introduction"์ด๋ผ๋ id๋ฅผ ๊ฐ์ง ์น์
์ผ๋ก ์ด๋ํ๋ ๋งํฌ๋ฅผ ์์ฑํฉ๋๋ค:
<a href="#introduction">Jump to Introduction</a>
<div id="introduction">
<h2>Introduction</h2>
<p>This is the introduction section.</p>
</div>
๊ณ ์ ํ id ์์ฑ์ ์ค์์ฑ
id ์์ฑ์ HTML ๋ฌธ์ ๋ด์์ ๊ณ ์ ํ๋๋ก ์ค๊ณ๋์์ต๋๋ค. ์ด ๊ณ ์ ์ฑ์ ์ต์ปค ๋งํฌ, ์๋ฐ์คํฌ๋ฆฝํธ ์ํธ์์ฉ ๋ฐ CSS ์คํ์ผ๋ง์ ์ฌ๋ฐ๋ฅธ ์๋์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ฌ๋ฌ ์์๊ฐ ๋์ผํ id๋ฅผ ๊ณต์ ํ๋ฉด ๋ธ๋ผ์ฐ์ ์ ๋์์ ์์ธกํ ์ ์๊ฒ ๋๋ฉฐ, ์ข
์ข
ํด๋น id๋ฅผ ๊ฐ์ง ์ฒซ ๋ฒ์งธ ์์๋ง ๋์์ผ๋ก ํฉ๋๋ค.
์ต์ปค ์ด๋ฆ ์ถฉ๋ ์๋ณํ๊ธฐ
์ต์ปค ์ด๋ฆ ์ถฉ๋์ ํนํ ํฌ๊ฑฐ๋ ๋์ ์ผ๋ก ์์ฑ๋๋ ์น ํ์ด์ง์์ ๋ฏธ๋ฌํ๊ณ ๋ฐ๊ฒฌํ๊ธฐ ์ด๋ ค์ธ ์ ์์ต๋๋ค. ์ด๋ฌํ ์ถฉ๋์ ์๋ณํ๋ ๋ช ๊ฐ์ง ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
HTML ์ฝ๋ ์๋ ๊ฒ์ฌ
๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ HTML ์์ค ์ฝ๋๋ฅผ ์๋์ผ๋ก ๊ฒํ ํ๋ ๊ฒ์
๋๋ค. ๋์ผํ id ์์ฑ์ด ์ฌ๋ฌ ์์์ ์ฌ์ฉ๋ ์ธ์คํด์ค๋ฅผ ๊ฒ์ํฉ๋๋ค. ์ด ๋ฐฉ๋ฒ์ ์ง๋ฃจํ ์ ์์ง๋ง, ํนํ ์๊ท๋ชจ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ ์ข์ ์ถ๋ฐ์ ์
๋๋ค.
๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ
๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ ์น ํ์ด์ง๋ฅผ ๊ฒ์ฌํ๊ณ ๋๋ฒ๊น ํ๋ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ์ต์ปค ์ด๋ฆ ์ถฉ๋์ ์๋ณํ๊ธฐ ์ํด ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์์ ๊ฒ์ฌ: ์์ฌ๋๋ ์์๋ฅผ ๋ง์ฐ์ค ์ค๋ฅธ์ชฝ ๋ฒํผ์ผ๋ก ํด๋ฆญํ๊ณ "Inspect" ๋๋ "Inspect Element"๋ฅผ ์ ํํ์ฌ HTML ์ฝ๋๋ฅผ ๋ด ๋๋ค.
id์์ฑ ๊ฒ์: ์์ ํจ๋์์ ๊ฒ์ ๊ธฐ๋ฅ(๋ณดํต Ctrl+F ๋๋ Cmd+F)์ ์ฌ์ฉํ์ฌid์์ฑ์ ์ธ์คํด์ค๋ฅผ ๊ฒ์ํฉ๋๋ค.- ์ฝ์ ์ค๋ฅ: ์ผ๋ถ ๋ธ๋ผ์ฐ์ ๋ ์ค๋ณต๋
id์์ฑ์ด ๊ฐ์ง๋๋ฉด ์ฝ์์ ๊ฒฝ๊ณ ๋ ์ค๋ฅ๋ฅผ ํ์ํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๋ฉ์์ง๊ฐ ์๋์ง ์ฝ์์ ์ฃผ์ํ์ญ์์ค. - ๊ฐ์ฌ ๋๊ตฌ: ์ต์ ๋ธ๋ผ์ฐ์ ์๋ ์ค๋ณต
id์์ฑ์ ํฌํจํ ์ผ๋ฐ์ ์ธ ๋ฌธ์ ๋ฅผ ์๋์ผ๋ก ์ค์บํ ์ ์๋ ๊ฐ์ฌ ๋๊ตฌ๊ฐ ํฌํจ๋์ด ์๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. Chrome์ Lighthouse์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฌํ ๊ฐ์ฌ๋ฅผ ์ํํ์ญ์์ค.
HTML ์ ํจ์ฑ ๊ฒ์ฌ๊ธฐ
W3C ๋งํฌ์
์ ํจ์ฑ ๊ฒ์ฌ ์๋น์ค(validator.w3.org)์ ๊ฐ์ HTML ์ ํจ์ฑ ๊ฒ์ฌ๊ธฐ๋ HTML ์ฝ๋๋ฅผ ๋ถ์ํ๊ณ ์ค๋ณต id ์์ฑ์ ํฌํจํ HTML ํ์ค ์๋ฐ ์ฌํญ์ ์๋ณํ ์ ์์ต๋๋ค. ์ด๋ฌํ ์ ํจ์ฑ ๊ฒ์ฌ๊ธฐ๋ ์ค๋ฅ์ ์ ํํ ์์น๋ฅผ ์๋ ค์ฃผ๋ ์์ธ ๋ณด๊ณ ์๋ฅผ ์ ๊ณตํฉ๋๋ค.
์๋ํ๋ ํ ์คํธ ๋๊ตฌ
๋ ํฐ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ ์ต์ปค ์ด๋ฆ ์ถฉ๋์ ํฌํจํ ์ ์ฌ์ ๋ฌธ์ ๋ฅผ ์ฝ๋๋ฅผ ์ค์บํ ์ ์๋ ์๋ํ๋ ํ ์คํธ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค. ์ด๋ฌํ ๋๊ตฌ๋ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ์ ํตํฉ๋์ด ์ค๋ฅ๋ฅผ ์กฐ๊ธฐ์ ๋ฐ๊ฒฌํ ์ ์์ต๋๋ค.
์ต์ปค ์ด๋ฆ ์ถฉ๋ ํด๊ฒฐํ๊ธฐ
์ต์ปค ์ด๋ฆ ์ถฉ๋์ ์๋ณํ๋ค๋ฉด ๋ค์ ๋จ๊ณ๋ ์ด๋ฅผ ํด๊ฒฐํ๋ ๊ฒ์ ๋๋ค. ๋ช ๊ฐ์ง ์ ๋ต์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
id ์์ฑ ์ด๋ฆ ๋ณ๊ฒฝ
๊ฐ์ฅ ๊ฐ๋จํ ํด๊ฒฐ์ฑ
์ ๊ณ ์ ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด id ์์ฑ์ ์ด๋ฆ์ ๋ฐ๊พธ๋ ๊ฒ์
๋๋ค. ์์์ ๋ชฉ์ ์ ๋ฐ์ํ๋ ์ค๋ช
์ ์ด๊ณ ์๋ฏธ ์๋ ์ด๋ฆ์ ์ ํํ์ญ์์ค.
์์:
๋ค์ ๋์ :
<div id="section">...
<div id="section">...
<div id="section">...
๋ค์์ ์ฌ์ฉํ์ธ์:
<div id="section-one">...
<div id="section-two">...
<div id="section-three">...
์ด๋ฆ์ด ๋ณ๊ฒฝ๋ id ์์ฑ์ ์ฐธ์กฐํ๋ ๋ชจ๋ ์ต์ปค ๋งํฌ๋ฅผ ์
๋ฐ์ดํธํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค.
์คํ์ผ๋ง์ ์ํด id ์์ฑ ๋์ CSS ํด๋์ค ์ฌ์ฉ
id ์์ฑ์ด ์ฃผ๋ก ์คํ์ผ๋ง์ ์ฌ์ฉ๋๋ ๊ฒฝ์ฐ, ๋์ CSS ํด๋์ค๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค. CSS ํด๋์ค๋ ์ฌ๋ฌ ์์์ ์ ์ฉํ ์ ์์ผ๋ฏ๋ก ์น์ฌ์ดํธ ์ ์ฒด์ ์ผ๊ด๋ ์คํ์ผ์ ์ ์ฉํ๋ ๋ฐ ์ด์์ ์
๋๋ค.
์์:
๋ค์ ๋์ :
<div id="highlight" style="color: yellow;">...
<div id="highlight" style="color: yellow;">...
๋ค์์ ์ฌ์ฉํ์ธ์:
<div class="highlight">...
<div class="highlight">...
<style>
.highlight {
color: yellow;
}
</style>
์ด ์ ๊ทผ ๋ฐฉ์์ ์คํ์ผ๋ง ๋ชฉ์ ์ผ๋ก ๊ณ ์ ํ id ์์ฑ์ ์ฌ์ฉํ ํ์๋ฅผ ์์ ์ค๋๋ค.
๋ค์์คํ์ด์ค์ ์ ๋์ฌ
๋ ํฐ ํ๋ก์ ํธ๋ ํ์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์์
ํ ๋ id ์์ฑ์ ๋ค์์คํ์ด์ค๋ ์ ๋์ฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๋์์ด ๋ฉ๋๋ค. ์ด๋ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ฌ์ฉํ๋ id ์์ฑ๊ณผ์ ์ถฉ๋์ ํผํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
์์:
<div id="my-component-title">...
<div id="my-component-content">...
"my-component-"์ ๊ฐ์ ์ผ๊ด๋ ์ ๋์ฌ๋ฅผ ์ฌ์ฉํ๋ฉด id ์์ฑ์ด ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์์ฑ๊ณผ ์ถฉ๋ํ ๊ฐ๋ฅ์ฑ์ด ์ค์ด๋ญ๋๋ค.
๋์ id ์์ฑ
์๋ฐ์คํฌ๋ฆฝํธ๋ ์๋ฒ ์ธก ํ
ํ๋ฆฟ ์์ง์ ์ฌ์ฉํ์ฌ ๋์ ์ผ๋ก HTML์ ์์ฑํ ๋ id ์์ฑ์ด ๊ณ ์ ํ๊ฒ ์์ฑ๋๋๋ก ํ์ญ์์ค. ์ด๋ ๋ค์๊ณผ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ๋ฌ์ฑํ ์ ์์ต๋๋ค:
- ๊ณ ์ ์๋ณ์:
UUID()์ ๊ฐ์ ํจ์๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ํ์์คํฌํ์ ๋์๋ฅผ ๊ฒฐํฉํ์ฌ ๊ณ ์ ์๋ณ์๋ฅผ ์์ฑํฉ๋๋ค. - ์นด์ดํฐ: ์นด์ดํฐ๋ฅผ ์ฌ์ฉํ์ฌ ์์๊ฐ ์์ฑ๋ ๋
id์์ฑ์ ๊ณ ์ ํ ๋ฒํธ๋ฅผ ํ ๋นํฉ๋๋ค.
์์ (์๋ฐ์คํฌ๋ฆฝํธ):
function createUniqueId() {
return 'id-' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}
let newElement = document.createElement('div');
newElement.id = createUniqueId();
document.body.appendChild(newElement);
ํผ ์์์ name ์์ฑ ์ฌ์ฉ
ํผ ์์์ ๊ฒฝ์ฐ id ์์ฑ์ ์์กดํ๋ ๋์ name ์์ฑ์ ์ฌ์ฉํ์ฌ ํผ ํ๋๋ฅผ ์๋ณํ์ญ์์ค. name ์์ฑ์ ์ด ๋ชฉ์ ์ ์ํด ํน๋ณํ ์ค๊ณ๋์์ผ๋ฉฐ ๊ณ ์ ์ฑ์ด ํ์ํ์ง ์์ต๋๋ค.
์์:
<input type="text" name="username">
<input type="password" name="password">
์ต์ปค ์ด๋ฆ ์ถฉ๋์ ํผํ๊ธฐ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
์ต์ปค ์ด๋ฆ ์ถฉ๋์ ๋ฐฉ์งํ๋ ๊ฒ์ ์ ๊ตฌ์กฐํ๋๊ณ ๊ธฐ๋ฅ์ ์ธ ์น์ฌ์ดํธ๋ฅผ ์ ์งํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ค์์ ๋ฐ๋ผ์ผ ํ ๋ช ๊ฐ์ง ๋ชจ๋ฒ ์ฌ๋ก์ ๋๋ค:
์ฝ๋ฉ ํ์ค ์๋ฆฝ
๊ณ ์ ํ id ์์ฑ์ ์ค์์ฑ์ ๊ฐ์กฐํ๋ ํ์ ์ํ ๋ช
ํํ ์ฝ๋ฉ ํ์ค์ ์ ์ํ์ญ์์ค. ๋ช
๋ช
๊ท์น, ์ ๋์ฌ ๋ฐ ๋์ id ์์ฑ์ ๋ํ ์ง์นจ์ ํฌํจํ์ญ์์ค.
์ฝ๋ ๋ฆฌ๋ทฐ
๊ฐ๋ฐ ํ๋ก์ธ์ค์ ์ผ๋ถ๋ก ์ฝ๋ ๋ฆฌ๋ทฐ๋ฅผ ๊ตฌํํ์ญ์์ค. ์ด๋ฅผ ํตํด ํ์๋ค์ ์ ์ฌ์ ์ธ ์ต์ปค ์ด๋ฆ ์ถฉ๋ ๋ฐ ๊ธฐํ ์ฝ๋ฉ ์ค๋ฅ๋ฅผ ํ๋ก๋์ ์ ๋ฐ์๋๊ธฐ ์ ์ ์๋ณํ ์ ์์ต๋๋ค.
์๋ ๋ฆฐํ
๋ฆฐํ
๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ค๋ณต id ์์ฑ์ ํฌํจํ ์ผ๋ฐ์ ์ธ ์ค๋ฅ์ ๋ํด ์ฝ๋๋ฅผ ์๋์ผ๋ก ํ์ธํ์ญ์์ค. ๋ฆฐํ
์ ๊ฐ๋ฐ ํ๊ฒฝ์ ํตํฉ๋์ด ์ค์๊ฐ ํผ๋๋ฐฑ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
์ ๊ธฐ์ ์ธ ํ ์คํธ
์ต์ปค ๋งํฌ๊ฐ ์์๋๋ก ์๋ํ๋์ง ํ์ธํ๊ธฐ ์ํด ์ ๊ธฐ์ ์ธ ํ ์คํธ๋ฅผ ์ํํ์ญ์์ค. ์ฌ๊ธฐ์๋ ํธํ์ฑ ๋ฌธ์ ๋ฅผ ์๋ณํ๊ธฐ ์ํด ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ์ ์ฅ์น์์ ํ ์คํธํ๋ ๊ฒ์ด ํฌํจ๋ฉ๋๋ค.
์ ๊ทผ์ฑ ๊ณ ๋ ค
์ต์ปค ๋งํฌ์ ๊ณ ์ ID์ ์ฌ๋ฐ๋ฅธ ์ฌ์ฉ์ ์น ์ ๊ทผ์ฑ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์คํฌ๋ฆฐ ๋ฆฌ๋ ๋ฐ ๊ธฐํ ๋ณด์กฐ ๊ธฐ์ ์ ์ด๋ฌํ ์์ฑ์ ์์กดํ์ฌ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์๊ฒ ์๋ฏธ ์๋ ๋ธ๋ผ์ฐ์ง ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค. ์ต์ปค ๋งํฌ๊ฐ ์ค๋ช ์ ์ด๊ณ ๋์ ์น์ ์ ๋ช ํํ๊ฒ ๋ ์ด๋ธ์ด ์ง์ ๋์๋์ง ํ์ธํ์ญ์์ค.
์ฑ๊ธ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA)์ ๋ฏธ์น๋ ์ํฅ
์ฑ๊ธ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA)์ ์ ํ๋ฆฌ์ผ์ด์ ๋ด ํ์์ ์ํด ์ต์ปค ๋งํฌ์ ํฌ๊ฒ ์์กดํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. SPA์์ ์ต์ปค ์ด๋ฆ ์ถฉ๋์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ผ์ฐํ ๊ณผ ์ํ ๊ด๋ฆฌ๋ฅผ ๋ฐฉํดํ ์ ์์ผ๋ฏ๋ก ํนํ ์ค๋ง์ค๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
SPA ๋ผ์ฐํ ๊ณผ ํด์ ๋งํฌ
๋ง์ SPA ํ๋ ์์ํฌ๋ ํด์ ๋งํฌ(# ๋ค์ ๊ฒฝ๋ก)๋ฅผ ์ฌ์ฉํ์ฌ ๋ค๋ฅธ ๋ทฐ ๊ฐ์ ํ์์ ์๋ฎฌ๋ ์ด์
ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, #/products์ ๊ฐ์ ๊ฒฝ๋ก๋ ์ ํ ๋ชฉ๋ก์ ํ์ํ ์ ์์ต๋๋ค.
SPA์์์ ์ถฉ๋ ๋ฌธ์
SPA์์ ์ต์ปค ์ด๋ฆ ์ถฉ๋์ ๋ผ์ฐํ ๋ก์ง์ ๋ฐฉํดํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์๋ชป๋ ๋ทฐ๋ก ์ด๋ํ๊ฑฐ๋ ์๋ชป๋ ์ฝํ ์ธ ๋ฅผ ํ์ํ๊ฒ ํ ์ ์์ต๋๋ค. ์ด๋ SPA์ ๋ผ์ฐํ ๋ฉ์ปค๋์ฆ์ด ์ต์ปค ์ด๋ฆ์ ๊ณ ์ ์ฑ์ ์์กดํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
SPA๋ฅผ ์ํ ์ ๋ต
SPA์์ ์ต์ปค ์ด๋ฆ ์ถฉ๋์ ํผํ๋ ค๋ฉด ๋ค์ ์ ๋ต์ ๊ณ ๋ คํ์ญ์์ค:
- ์ค์ ์ง์ค์ ๋ผ์ฐํ : ์ ํ๋ฆฌ์ผ์ด์ ์ ํ์์ ์ผ๊ด๋ ๋ฐฉ์์ผ๋ก ๊ด๋ฆฌํ๋ ์ค์ ์ง์ค์ ๋ผ์ฐํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋๋ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ์ญ์์ค.
- URL ๋งค๊ฐ๋ณ์: ํด์ ๋งํฌ์๋ง ์์กดํ๋ ๋์ URL ๋งค๊ฐ๋ณ์๋ฅผ ์ฌ์ฉํ์ฌ ๋ทฐ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ์ญ์์ค.
- ๋์ ์ฝํ
์ธ ์ ๋ํ ๊ณ ์ ID: ๋์ ์ฝํ
์ธ ๋ฅผ ์์ฑํ ๋ ๊ฐ ๋ทฐ์ ๋ํด
id์์ฑ์ด ๊ณ ์ ํ๊ฒ ์์ฑ๋๋๋ก ํ์ญ์์ค.
๊ตญ์ ํ(i18n) ๊ณ ๋ ค ์ฌํญ
์ ์ธ๊ณ ๊ณ ๊ฐ์ ๋์์ผ๋ก ์น์ฌ์ดํธ๋ฅผ ๊ฐ๋ฐํ ๋๋ ๊ตญ์ ํ(i18n)๊ฐ ์ต์ปค ๋งํฌ ๋ฐ id ์์ฑ์ ๋ฏธ์น๋ ์ํฅ์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ค๋ฅธ ์ธ์ด์ ๋ฌธ์ ์งํฉ์ ํด๊ฒฐํด์ผ ํ ๋ณต์ก์ฑ์ ์ผ๊ธฐํ ์ ์์ต๋๋ค.
๋ฌธ์ ์ธ์ฝ๋ฉ
HTML ๋ฌธ์๊ฐ ์ง์ํ๋ ค๋ ๋ชจ๋ ์ธ์ด๋ฅผ ์ง์ํ๋ ๋ฌธ์ ์ธ์ฝ๋ฉ์ ์ฌ์ฉํ๊ณ ์๋์ง ํ์ธํ์ญ์์ค. UTF-8์ ๋๋ถ๋ถ์ ์ต์ ์น์ฌ์ดํธ์ ๊ถ์ฅ๋๋ ์ธ์ฝ๋ฉ์ ๋๋ค.
id ์์ฑ์ ์ง์ญํ
id ์์ฑ์ ์ธ์ด๋ณ ์ฉ์ด๋ฅผ ์ฌ์ฉํ์ง ๋ง์ญ์์ค. ์ด๋ ์ฌ๋ฌ ์ธ์ด๋ก ์น์ฌ์ดํธ๋ฅผ ์ ์ง ๊ด๋ฆฌํ๊ธฐ ์ด๋ ต๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. ๋์ ์ผ๋ฐ์ ์ด๊ฑฐ๋ ์ธ์ด ์ค๋ฆฝ์ ์ธ ์ฉ์ด๋ฅผ ์ฌ์ฉํ์ญ์์ค.
์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ์ผ๋ก ์ฐ๋(RTL) ์ธ์ด
์๋์ด๋ ํ๋ธ๋ฆฌ์ด์ ๊ฐ์ ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ์ผ๋ก ์ฐ๋(RTL) ์ธ์ด๋ฅผ ์ง์ํ ๋ CSS ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๊ฐ ๋ ์ด์์์ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํ๋์ง ํ์ธํ์ญ์์ค. ์ฌ๊ธฐ์๋ ์์์ ์์น์ ํ ์คํธ ๋ฐฉํฅ์ ์กฐ์ ํ๋ ๊ฒ์ด ํฌํจ๋ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
์ต์ปค ์ด๋ฆ ์ถฉ๋์ ์น ๊ฐ๋ฐ์์ ํ์์ ์ค๋จ์ํค๊ณ ์ข์ง ์์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ด๋ํ๋ ์ค๋ง์ค๋ฌ์ด ๋ฌธ์ ์ผ ์ ์์ต๋๋ค. ์ด๋ฌํ ์ถฉ๋์ ์์ธ์ ์ดํดํ๊ณ ์ด ๋ฌธ์์ ์ค๋ช
๋ ์ ๋ต์ ๊ตฌํํจ์ผ๋ก์จ ์น์ฌ์ดํธ๊ฐ ์ ๊ตฌ์กฐํ๋๊ณ , ์ ๊ทผ ๊ฐ๋ฅํ๋ฉฐ, ์ฌ์ฉ์ ์นํ์ ์ธ์ง ํ์ธํ ์ ์์ต๋๋ค. ๊ณ ์ ํ id ์์ฑ์ ์ฐ์ ์ํ๊ณ , ๋ช
ํํ ์ฝ๋ฉ ํ์ค์ ์๋ฆฝํ๋ฉฐ, ์ต์ปค ์ด๋ฆ ์ถฉ๋์ด ์ฒ์๋ถํฐ ๋ฐ์ํ์ง ์๋๋ก ์ ๊ธฐ์ ์ธ ํ
์คํธ๋ฅผ ์ํํ๋ ๊ฒ์ ๊ธฐ์ตํ์ญ์์ค. ์ด๋ฌํ ๊ดํ์ ์ ์ธ๊ณ ๊ณ ๊ฐ์ ๋ง์กฑ์ํค๋ ๊ฐ๋ ฅํ๊ณ ์ ์ง ๊ด๋ฆฌ ๊ฐ๋ฅํ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋๋ ๋ฐ ํ์์ ์
๋๋ค.