์น(Web)
์น์ด๋ผ ํ๋ฉด ์ธํฐ๋ท ๊ทธ ์์ฒด๋ฅผ ๋ ์ฌ๋ฆฌ๋ ์ฌ๋๋ค์ด ๋ง๊ฒ ์ง๋ง, ์ฌ์ค์ ์ธํฐ๋ท์ด ์น๋ณด๋ค ์กฐ๊ธ ๋ ํฌ๊ด์ ์ธ ๊ฐ๋ ์ด๋ค. ์ธํฐ๋ท์ ์ ์ธ๊ณ์ ์ผ๋ก ์ฐ๊ฒฐ๋ ์ปดํจํฐ ๋คํธ์ํฌ ํต์ ๋ง์ ์๋ฏธํ๋ฉฐ, ์น์ ๋ฌธ์, ์ด๋ฏธ์ง, ์์ ๋ฑ ๋ค์ํ ์ ๋ณด๋ฅผ ์ฌ๋ฌ ์ฌ๋๊ณผ ๊ณต์ ํ ์ ์๋ ์ผ์ข ์ ๊ณต๊ฐ์ด์ ํ๋ซํผ์ด๋ค.
์น ํ์ค
์น ํ์ค์ด๋ W3C(World Wide Web Consortium)์์ ๊ถ๊ณ ํ๋ โ์น์์ ํ์ค์ ์ผ๋ก ์ฌ์ฉ๋๋ ๊ธฐ์ ์ด๋ ๊ท์นโ์ผ๋ก, ์ฌ์ฉ์๊ฐ ์ด๋ ํ ์ด์์ฒด์ ๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ฌ์ฉํ๋๋ผ๋ ์น ํ์ด์ง๊ฐ ๋์ผํ๊ฒ ๋ณด์ด๊ณ ์ ์์ ์ผ๋ก ์๋ํ ์ ์๋๋ก ํ๋ ์น ํ์ด์ง ์ ์ ๊ธฐ๋ฒ์ ๋ด๊ณ ์๋ค. ์น ๊ฐ๋ฐ์์ ์ฌ์ฉ๋๋ ์ธ์ด์ธ HTML, CSS, JavaScript ๋ฑ์ ๊ธฐ์ ์ ๋ค๋ฃจ๋ฉฐ ์ด๋ค์ ๊ฐ๊ฐ ํ๋ฉด์ ๊ตฌ์กฐ, ํํ, ๋์์ ๋ด๋นํ๋ค.
ํฌ๋กฌ, ์ฃ์ง, ์ฌํ๋ฆฌ, ์คํ๋ผ, ํ์ด์ดํญ์ค ๋ฑ ์ต์ ์น ๋ธ๋ผ์ฐ์ ๋ค์ ๋ชจ๋ ์น ํ์ค์ ์ง์ํ๋ค. ๋ฐ๋ผ์ ์น ํ์ค์ ๋ง์ถ์ด ์นํ์ด์ง๋ฅผ ์์ฑํ๋ฉด ์ด๋ค ๋ธ๋ผ์ฐ์ ๋ฅผ ์ฌ์ฉํ๋ ๋์ผํ ๊ฒฐ๊ณผ๋ฌผ์ ์ป์ ์ ์๊ณ , ๋ธ๋ผ์ฐ์ ํธํ ๋๋ฌธ์ ํ๋ฉด์ด ์ ๋๋ก ํ์๋์ง ์๊ฑฐ๋ ๊ธฐ๋ฅ์ด ์๋๋์ง ์๋ ๋ฌธ์ ์ํฉ์ ๋ฐฉ์งํ ์ ์๋ ๊ฒ์ด๋ค.
์น ํ์ค์ ์ฅ์
- ์ ์ง ๋ณด์์ ์ฉ์ด์ฑ
์น ํ์ค์ผ๋ก HTML, CSS, JavaScript ๋ฑ์ ์ฌ์ฉ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํ๊ธฐ ์ด์ ์๋ ๊ตฌ์กฐ, ํํ, ๋์์ด ๋ค์์ธ ์ฝ๋, ์ฆ ๊ด์ฌ์ฌ ๋ถ๋ฆฌ๊ฐ ์๋ ์ฝ๋๋ ๋ง์๊ธฐ ๋๋ฌธ์ ์ด๋ ํ ๋ถ๋ถ์ ์์ ํ๊ธฐ ์ํด ์ ๋ถ ๋ฏ์ด๊ณ ์ณ์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ์์๋ค. ํ์ง๋ง ๊ฐ ์์ญ์ด ๋ถ๋ฆฌ๋๋ฉฐ ์ ์ง ๋ณด์๊ฐ ์ฉ์ดํด์ก๊ณ ์ฝ๋๊ฐ ๊ฒฝ๋ํ๋๋ฉฐ ํธ๋ํฝ ๋น์ฉ ์ญ์ ๊ฐ์ํ๋ ํจ๊ณผ๊ฐ ์๋ค.
- ์น ํธํ์ฑ ํ๋ณด
๊ณผ๊ฑฐ IE์ ActiveX ํ๊ฒฝ์ฒ๋ผ ์น ์ฌ์ดํธ๊ฐ ํน์ ์ด์์ฒด์ ๋ ๋ธ๋ผ์ฐ์ ์ ์ข ์์ ์ด๋ผ๋ฉด ๊ทธ ์ธ ํ๊ฒฝ์์๋ ์ ์์ ์ผ๋ก ์ฌ์ฉ์ด ๋ถ๊ฐ๋ฅํ๋ค. ์น ํ์ค์ ์ค์ํ์ฌ ์น ์ฌ์ดํธ๋ฅผ ์ ์ํ๋ฉด ์น ๋ธ๋ผ์ฐ์ ์ ์ข ๋ฅ๋ ๋ฒ์ , ์ด์ ์ฒด์ ๋ ๋๋ฐ์ด์ค์ ์๊ด ์์ด ๋์ผํ ์ปจํ ์ธ ๋ฅผ ์ ๊ณตํ ์ ์๋ค.
- ๊ฒ์ ํจ์จ์ฑ ์ฆ๋
์ ์ ํ HTML ์์(์๋ฉํฑ ํ๊ทธ ๋ฑ)์ ์ฌ์ฉ, ์น ํ์ด์ง์ ๋ํ ์ ํํ ์ ๋ณด ์์ฑ ๋ฑ ๊ฒ์ ํจ์จ์ฑ๊ณผ ๊ด๋ จ๋ ๋ด์ฉ์ ์น ํ์ค์์ ๋ค๋ฃจ๊ณ ์์ด ๊ฒ์์ ํจ์จ์ฑ์ ๋์ด๊ณ ๊ฒ์ ์์ง์์์ ์์ ๋ ธ์ถ์ ์ ๋ฆฌํ ํจ๊ณผ๊ฐ ์๋ค.
- ์น ์ ๊ทผ์ฑ ํฅ์
์น ํ์ด์ง๋ ๋จ์ํ ๋ธ๋ผ์ฐ์ , ์ด์์ฒด์ฒด, ๋๋ฐ์ด์ค๋ง ๊ณ ๋ คํ ๊ฒ์ด ์๋๋ผ ์ค์ง์ ์ผ๋ก ์น์ ์ ๊ทผํ๋ ์ฃผ์ฒด์ธ ์ฌ์ฉ์ ์ญ์ ๊ณ ๋ คํด์ผ ํ๋ค. ์น ํ์ค์ ๋ค์ํ ์ฌ์ฉ์๋ฅผ ๊ณ ๋ คํ๋ ๋ด์ฉ๋ ํฌํจํ๊ณ ์๊ธฐ ๋๋ฌธ์ ์น ํ์ค์ ๋ง์ถฐ ๊ฐ๋ฐํ๋ฉด ์ ๊ทผ์ฑ ๋ฌธ์ ๋ ๋ง์ ๋ถ๋ถ์ ํด๊ฒฐํ ์ ์๋ค.
Semantic HTML
์น ํ์ค์์๋ HTML์ ์๋งจํฑ(semantic), ์ฆ ์๋ฏธ ์๊ฒ ์์ฑํ๋ ๊ฒ์ด ์ค์ํ๋ค. HTML์ด ๊ตฌ์กฐ๋ผ๋ฉด, ๋จ์ํ ๊ตฌ์กฐ๋ฅผ ๋์ด ์๋ฏธ๋ฅผ ๊ฐ์ถ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์ด์ผ ํ๋ค๋ ๋ป์ด๋ค.
์๋งจํฑ ์์๋ฅผ ์ฌ์ฉํ๊ฒ ๋๋ฉด ๊ฐ ์์์ ์ด๋ฆ๋ง ๋ณด๊ณ ๋ ํ๋ฉด์์ ์ด๋ค ์ญํ ์ ํ๊ณ ์ด๋ค ๋ด์ฉ์ ๋ด๊ฒ ๋ ์ง ๋ช ํํ๊ฒ ๊ตฌ๋ถํ ์ ์๊ฒ ๋๋ค. ์ด์ฒ๋ผ ์์๊ฐ ์ด๋ค ๋ด์ฉ์ ๋ด๊ฒ ๋ ์ง ์ด๋ค ๊ธฐ๋ฅ์ ํ๊ฒ ๋ ์ง ํ์คํ๊ฒ ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์๋ ์์๋ฅผ ์๋งจํฑ ์์๋ผ ํ๊ณ ์ด๋ฅผ ์ ์ ํ ์ฌ์ฉํด ๊ตฌ์ฑํ HTML์ ์๋งจํฑ HTML์ด๋ผ ์ผ์ปซ๋๋ค.
์๋งจํฑ HTML์ ํ์์ฑ
- ๊ฐ๋ฐ์๊ฐ ์ํต
์๋งจํฑ ์์๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ ์์์ ์ญํ ๊ณผ ๋ด์ฉ์ด ์ด๋ฏธ ์ ํด์ ธ ์๊ธฐ ๋๋ฌธ์, ์ผ์ผ์ด ์์ญ์ id๋ class๋ฅผ ์ ์ํ๊ฑฐ๋ ์ฌ์ ์ ํ์ ํ ํ์์์ด ์ํ ํ ์ํต์ด ๊ฐ๋ฅํ๋ค.
- ๊ฒ์ ํจ์จ์ฑ
๊ฒ์ ์์ง์ HTML ์ฝ๋๋ฅผ ๋ณด๊ณ ๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ํ์ ํ๊ธฐ ๋๋ฌธ์ ์๋งจํฑ ์์๋ฅผ ์ฌ์ฉํ๊ฒ ๋๋ฉด ์ด๋ค ์์์ ๋ ์ค์ํ ๋ด์ฉ์ด ๋ค์ด์์์ง ์ฐ์ ์์๋ฅผ ์ ํ ์ ์๊ณ , ์ฐ์ ์์๊ฐ ๋๋ค๊ณ ํ์ ๋ ํ์ด์ง๋ฅผ ๊ฒ์ ๊ฒฐ๊ณผ ์๋จ์ ํ์ํ๊ฒ ๋๋ค.
- ์น ์ ๊ทผ์ฑ
์น ์ ๊ทผ์ฑ์ ๋์ด, ์ฑ๋ณ, ์ฅ์ ์ฌ๋ถ, ์ฌ์ฉ ํ๊ฒฝ์ ๋ ๋ ํญ์ ๋์ผํ ์์ค์ ์ปจํ ์ธ ๋ฅผ ์ ๊ณตํ ์ ์์ด์ผ ํจ์ ๋ปํ๋ค. ์ผ๋ฐ์ ์ผ๋ก ์น์ ์ฌ์ฉํ๋ ์ํฉ์ด ์๋๋ผ๋ฉด(์คํฌ๋ฆฐ ๋ฆฌ๋ ๋ฑ) ์ด๋ฐ ์๋งจํฑ ์์๊ฐ ๊ฐ๊ฐ ์ด๋ค ์ญํ ์ธ์ง ํ๋ฉด ๊ตฌ์กฐ์ ๋ํ ์ ๋ณด๊น์ง ์ ๋ฌํ ์ ์์ด ์ปจํ ์ธ ๋ฅผ ๋ ์ ํํ๊ฒ ์ ๋ฌํ ์ ์๊ฒ ๋๋ค.
์์ฃผ ์ฐ์ด๋ ์๋งจํฑ ์์
์์ ์ข ๋ฅ | ์ค๋ช |
---|---|
<header> | ํ์ด์ง๋ ์์์ ์ต์๋จ์ ์์นํ๋ ๋จธ๋ฆฟ๋ง ์ญํ ์ ์์ |
<nav> | ๋ฉ๋ด, ๋ชฉ์ฐจ ๋ฑ์ ์ฌ์ฉ๋๋ ์์ |
<aside> | ๋ฌธ์์ ์ฐ๊ด์ ์์ง๋ง, ์ง์ ์ ์ธ ์ฐ๊ด์ ์๋ ๋ด์ฉ์ ๋ด๋ ์์ |
<main> | ์ด๋ฆ ๊ทธ๋๋ก ๋ฌธ์์ ๋ฉ์ธ์ด ๋๋ ์ฃผ์ ์ฝํ ์ธ ๋ฅผ ๋ด๋ ์์ |
<article> | ๊ฒ์๊ธ, ๋ด์ค ๊ธฐ์ฌ ๋ฑ ๋
๋ฆฝ์ ์ผ๋ก ๊ตฌ๋ถํด ์ฌ์ฌ์ฉํ ์ ์๋ ๋ถ๋ถ์ ์๋ฏธํ๋ ์์. ๊ฐ๊ฐ์ <article> ์ ๊ตฌ๋ถํ๊ธฐ ์ํ ์๋จ์ด ํ์ํ๋ฉฐ, ๋ณดํต ์ ๋ชฉ(<hgroup> )์ ํฌํจํ๋ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ค. |
<section> | ๋ฌธ์์ ๋
๋ฆฝ์ ์ธ ๊ตฌํ์ ๋ํ๋ด๋ฉฐ, ๋ฑํ ์ ํฉํ ์๋ฏธ์ ์์๊ฐ ์์ ๋ ์ฌ์ฉํ๋ค. ์ ๋ชฉ(<hgroup> )์ ํฌํจํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค. |
<hgroup> | ์ ๋ชฉ์ ํ์ํ ๋ ์ฌ์ฉํ๋ ์์๋ก, <h1> ~ <h6> ์์๊ฐ <hgroup> ์ด๋ค. |
<footer> | ํ์ด์ง๋ ์์์ ์ตํ๋จ์ ์์นํ๋ ๊ผฌ๋ฆฟ๋ง ์ญํ ์ ์์ |
<header>

- ์ผ๋ฐ์ ์ผ๋ก ํ์ด์ง ์ต์๋จ์ ์์นํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ผ๋ฉฐ, ์ด ๊ฒฝ์ฐ ์ฌ์ดํธ ์ ์ฒด์์ ์ฌ์ฉํ ์ ์๋ ๋ด์ฉ์ ๋ด๋๋ค. ๋ก๊ณ , ์ฌ์ดํธ ์ด๋ฆ, ์ฌ์ดํธ ์ ์ฒด ๋ฉ๋ด(
<nav>
), ๊ฒ์ ํผ ๋ฑ์ ์ปจํ ์ธ ๊ฐ ๋ค์ด๊ฐ ์ ์๋ค.
- ๊ผญ ์ฌ์ดํธ ์ ์ฒด๊ฐ ์๋๋๋ผ๋
<article>
,<main>
๋ฑ ๋ค๋ฅธ ์์์ ๋จธ๋ฆฟ๋ง ์ญํ ๋ก๋ ์ฌ์ฉํ ์ ์๋ค.
<nav>

- ๋ค๋น๊ฒ์ด์ ๋ฐ์ ์ญํ ๋ก, ์ฌ์ดํธ ๋ด์ ์ด์ฉํ ์ ์๋ ๋งํฌ๋ค์ ๋ด๋๋ค.
<header>
์ GNB๊ฐ ์์นํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด๋, ํ์์ ๋ฐ๋ผ ์ฌ์ดํธ ์ ๋ฐ์ ๋ค์ํ๊ฒ ์์นํ ์ ์๋ค.
<aside>

- ๋ฉ์ธ ์ปจํ ์ธ ์ ๊ด๋ จ์ด ์๊ธด ํ์ง๋ง ์ง์ ์ ์ธ ์ฐ๊ด์ ์๋ ๋ด์ฉ์ด ๋ค์ด๊ฐ๋ค. ์ปจํ ์ธ ์ ๋ชฉ์ฐจ์ ๋ฐ๋ฅธ ๋ถ๋งํฌ(๋ฐ๋ก๊ฐ๊ธฐ)๋, ์์ ฏ, ๊ด๊ณ ๋ฑ์ด ๋ค์ด๊ฐ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด๋ค.
<main>

- ํ์ด์ง์ ๋ฉ์ธ ์ปจํ ์ธ ๊ฐ ๋ค์ด๊ฐ๋ ์์์ด๋ฉฐ, ํด๋น ํ์ด์ง์ ์ฃผ์ ์ ๊ด๋ จํ ๋ด์ฉ์ ํฌ๊ด์ ์ผ๋ก ํฌํจํ๋ ์ผ์ข ์ ์ปจํ ์ด๋ ์ญํ ์ ๋งก๋๋ค.
<article>

- ๊ฒ์๊ธ, ๋ด์ค ๊ธฐ์ฌ ์ฒ๋ผ ๋
๋ฆฝ์ ์ผ๋ก ๊ตฌ๋ถํด ์ฌ์ฌ์ฉํ ์ ์๋ ๋ถ๋ถ์ ์๋ฏธํ๋ฉฐ, ์ฌ์ฌ์ฉํ๋ ๋ถ๋ถ์ธ ๋งํผ ๊ฐ๊ฐ์
<article>
์ ์๋ณํ ์ ์๋๋ก ์ ๋ชฉ(<hgroup>
) ๊ณผ ๊ฐ์ ์์๋ฅผ ํฌํจํด์ผ ํ๋ค.
<section>

- ๋ฌธ์์ ๋
๋ฆฝ์ ์ธ ๊ตฌํ์ ๋ํ๋ด์ง๋ง ๋ฑํ ์ ํฉํ ์๋ฏธ์ ์๋งจํฑ ์์๊ฐ ์์ ๋ ์ฌ์ฉํ๋ค. ์ ํฉํ ์๋ฏธ์ ์์๊ฐ ์์ ๋ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ์๋ฏธ ๋ถ์ฌ๋ฅผ ์ํ ์ ๋ชฉ(
<hgroup>
)๊ณผ ๊ฐ์ ์์๋ฅผ ํฌํจํด์ผ ํ๋ค.
<hgroup>

- ์ ๋ชฉ์ ํ์ํ๊ธฐ ์ํด ์ฌ์ฉํ๋ฉฐ,
<h1>
๋ถํฐ<h6>
๊น์ง ์๋ค.
- ์ซ์๊ฐ ํด ์๋ก ๊ธ์์ ํฌ๊ธฐ๋ ์์์ง๋ฉฐ, ์ซ์๊ฐ ์์ ์ ๋ชฉ์ด ์ซ์๊ฐ ํฐ ์ ๋ชฉ์ ํฌํจํ๋ ๋ฐฉ์์ผ๋ก ์ฌ์ฉํด ๊ฐ ๊ตฌ์ญ๊ณผ ๋ด์ฉ์ ์๊ด ๊ด๊ณ์ ํฌํจ๊ด๊ณ๋ฅผ ํจ๊ป ํํํ ์ ์๋ค.
โ ex.
<h1>
์ธ ์ ์ฒด ๋ด์ฉ(<article>
) ์์<h2>
์ธ ํญ๋ชฉ(<section>
)์ด ์๋ ํํ
<footer>

- ํ์ด์ง๋ ์์ ์ตํ๋จ์ ์์นํ๋ ๊ผฌ๋ฆฟ๋ง ์ญํ ์ ํ๋ ์์์ด๋ฉฐ, ์ฌ์ดํธ ์ ๊ณต์, ์ ์๊ถ, ์ ์ฑ , ์ฌ์ดํธ๋งต ๋ฑ์ ๋ด์ฉ์ ํฌํจํ๋ค.
์น ํ์ค์ ์ํ ๋งํฌ์ ์ ์ฃผ์์ฌํญ
- ์ธ๋ผ์ธ ์์ ์์ ๋ธ๋ก ์์๋ ๋ฃ์ง ์๋๋ค
์ธ๋ผ์ธ ์์๋ ํญ์ ๋ธ๋ก ์์ ์์ ๋ค์ด๊ฐ์ผ ํ๋ฉฐ, ๋ฐ๋์ ๊ฒฝ์ฐ๋ ์์ด์ ์๋๋ค.
<b>
,<i>
๋์<strong>
,<em>
<b>
์<i>
๋ ๊ฐ๊ฐ ๊ธ์จ๋ฅผ ๊ตต๊ฒ ๋ง๋ค ๋, ๊ธ์จ๋ฅผ ๊ธฐ์ธ์ผ ๋ ์ฌ์ฉํ๋ ์์์ด์ง๋ง ์๋งจํฑํ์ง ์์, ํํ์ ๊ธฐ์ค์ผ๋ก ์ด๋ฆ์ด ์ง์ด์ง ์์์ด๊ธฐ ๋๋ฌธ์ ํํ์ ๋์ผํ๋ฉด์๋ ๋ด์ฉ๊น์ง ํฌํจํ๊ณ ์๋<strong>
,<em>
์์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค.
<hgroup>
๋ง๊ตฌ์ก์ด๋ก ์ฌ์ฉํ์ง ์๊ธฐํด๋น ์์๋ฅผ ์ฌ์ฉํ๋ฉด ๊ธ์์ ํฌ๊ธฐ๊ฐ ์ปค์ง๋ค ๋ณด๋ ์๋ฏธ๊ฐ ์๋ ์คํ์ผ์ ์ํด ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ์๋๋ฐ, ์์ฐํ ๋ด์ฉ์ ๊ตฌ์กฐ์ ์ธ ์๋ฏธ๋ฅผ ๊ฐ์ง ์์์ด๊ธฐ ๋๋ฌธ์ ์คํ์ผ๋ง์ ๋ชฉ์ ์ผ๋ก ์ด๋ค๋ฉด ์ฌ์ฉ์์๊ฒ ์์ ํ ์๋ชป๋ ํ๋ฉด ๊ตฌ์กฐ ์ ๋ณด๋ฅผ ์ ๋ฌํ๊ฒ ๋๋ค.
<br />
์ฐ์์ผ๋ก ์ฌ์ฉ์ ๊ธ๋ฌผ<br />
์ ์ญ ์ด์ด์ง๋ ํ ์คํธ ํ๋ฆ์ ์ค ๋ฐ๊ฟ์ ํด์ฃผ๊ธฐ ์ํด ์ฌ์ฉํ๋ ์์์ด๊ธฐ ๋๋ฌธ์ ์์ ์ฌ์ด์ ๊ฐ๊ฒฉ์ ๋ง๋ค๊ธฐ ์ํ ๋ชฉ์ ์ผ๋ก ๋จ๋ฐํด์ ์๋๋ค. ์์ ์ฌ์ด์ ๊ฐ๊ฒฉ์ด ํ์ํ๋ค๋ฉด ๋ณ๋์ ๋จ๋ฝ(<p>
)์ผ๋ก ๊ตฌ๋ถํ๊ฑฐ๋, CSS ์์ฑ(margin
,padding
๋ฑ)์ ์ฃผ์ด ์ฌ๋ฐฑ์ ์กฐ์ ํ๋ ๊ฒ์ด ์ข๋ค.
- ์ธ๋ผ์ธ ์คํ์ผ๋ง ์ฌ์ฉํ์ง ์๊ธฐ
HTML์ ์์ ์์ฑ(
style=โโ
)์ผ๋ก ์คํ์ผ์ ์ฃผ๋ ๊ฒ์ ์น ํ์ค์ ์ฅ์ ์ค ํ๋์ธ ๊ด์ฌ์ฌ ๋ถ๋ฆฌ์ ๋ง์ง ์๊ธฐ ๋๋ฌธ์, CSS ํ์ผ์ ํตํด ์คํ์ผ์ ์ฃผ์ด์ผ ํ๋ค.
ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง(Cross Browsing)

ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ์น ์ฌ์ดํธ์ ์ ๊ทผํ๋ ๋ธ๋ผ์ฐ์ ์ ์ข ๋ฅ์ ์๊ด ์์ด ๋๋ฑํ ํ๋ฉด๊ณผ ๊ธฐ๋ฅ์ ์ ๊ณตํ ์ ์๋๋ก ๋ง๋๋ ์์ ์ ์๋ฏธํ๋ค. ์ฌ๊ธฐ์ โ๋์ผํโ์ด ์๋๋ผ โ๋๋ฑํโ ์ด๋ ํํ์ ์ผ๋๋ฐ, ์ด๋ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ด ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ์์ ํ ๋๊ฐ์ ํ๋ฉด์ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ด ์๋๋ค๋ ์๋ฏธ์ด๋ค. ๋ธ๋ผ์ฐ์ ๋ง๋ค ์ฌ์ฉํ๋ ๋ ๋๋ง ์์ง์ด ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ํ๋ฉด์ ์์ ํ ๋์ผํ๊ฒ ๋ง๋๋ ๊ฒ์ ๋ถ๊ฐ๋ฅ ํ๋ฉฐ, ๋ฐ๋ผ์ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ๋ชฉํ๋ โ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ๋๋ฑํ ์์ค์ ์ ๋ณด์ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ๊ฒโ์ด๋ผ ํ ์ ์๋ค.
์น ํ์ค ์์ฒด๊ฐ ์ด๋ค ๋ธ๋ผ์ฐ์ ๋ ์ด์์ฒด์ ๋ฅผ ์ฐ๋๋ผ๋ ์น ํ์ด์ง๊ฐ ๋์ผํ๊ฒ ๋ณด์ด๊ณ ์ ์์ ์ผ๋ก ์๋ํ ์ ์๋๋ก ํ๋ ์น ํ์ด์ง ์ ์ ๊ธฐ๋ฒ์ด๊ธฐ ๋๋ฌธ์ ์น ํ์ด์ง ๊ฐ๋ฐ ์ ์น ํ์ค๋ง ์ ์ง์ผ๋ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ์ด๋์ ๋ ์คํํ ์ ์๋ค. ๋ธ๋ผ์ฐ์ ์ ๋ฐ๋ผ ์ ๋๋ก ํ์ ๋์ง ์๋ ํ๋ฉด์ด๋ ๋์ํ์ง ์๋ ๊ธฐ๋ฅ์ด ์์ ์ ์์์ ์๊ณ ๊ฐ์ ํ๋ ค๋ ํ๋๋ง ๊ฐ์ ธ๋ ์ถฉ๋ถํ๋ค.

ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ์ํฌ ํ๋ก์ฐ
1. ์ด๊ธฐ ๊ธฐํ
์ด๊ธฐ ๊ธฐํ ๋จ๊ณ์์๋ ์ด๋ค ์น ์ฌ์ดํธ๋ฅผ ๋ง๋ค ๊ฒ์ธ์ง ์ ํํ ๊ฒฐ์ ํด์ผ ํ๋ค. ์ด๋ค ์ปจํ ์ธ ์ ๊ธฐ๋ฅ์ด ์์ด์ผ ํ๋์ง, ๋์์ธ์ ์ด๋ป๊ฒ ํ ์ง ๋ฑ์ ์ฌํญ์ ๊ฒฐ์ ํด์ผ ํ๋ฉฐ ์ดํ์๋ ์ด ์ฌ์ดํธ์ ๊ณ ๊ฐ, ์ฆ ํ๊ฒ ๊ณ ๊ฐ์ ๊ณ ๋ คํด ์ด๋ค ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๊ธฐ๋ฅผ ์ฃผ๋ก ์ธ์ง ๊ณ ๋ฏผํ์ฌ ์ฌ๊ธฐ์ ๋ง๋ ๊ธฐ์ ์ ์ฌ์ฉํด ๊ฐ๋ฐํ ์ ์๋๋ก ๊ธฐํํ๋ค.
2. ๊ฐ๋ฐ
์ฝ๋๋ฅผ ์์ฑํ ๋ ์ฌ์ฉํ๋ ์ฝ๋๊ฐ ๊ฐ ๋ธ๋ผ์ฐ์ ์์ ํธํ์ฑ์ด ์ด๋ค์ง ํ์ ํ๊ณ ์ฌ์ฉํด์ผ ํ๋ค. MDN, Can I Use๋ฑ์ ์ฌ์ดํธ์์ ์ฝ๋์ ํธํ์ฑ์ ํ์ธํ ์ ์๋ค. ์๋ ์์๋ MDN์์ ์ ๊ณตํ๋ ๋ธ๋ผ์ฐ์ ํธํ์ฑ ์ ๋ณด์ด๋ฉฐ, IE์์์ ํธํ์ฑ์ด ์ฒ์ฐธํ ๊ฒ์ ๋ณผ ์ ์๋ค. ๋ง์ฝ ์ฃผ ํ๊ฒ ๊ณ ๊ฐ์ IE ์ฌ์ฉ ๋น์จ์ด ๋๋ค๋ฉด ํด๋น ์ฝ๋๋ ์ฌ์ฉํ์ง ์๋ ๊ฒ์ด ์ข๋ค.

์ฝ๋๋ฅผ ์์ฑํ๋ค ๋ณด๋ฉด ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ด ํ๋ ์ํฉ์ ๋ง๋๊ฒ ๋ ์๋ ์๋๋ฐ, ์ด ๊ฒฝ์ฐ ์ด๋ฅผ ์ธ์ ํ๊ณ ๋์ฒด ์๋จ์ ๋ง๋ จํด์ผ ํ๋ค. ๋ํ, ๊ฐ๋ฐ์ค์ธ ์น ์ฌ์ดํธ๊ฐ ์ผ๋ถ ์ค๋๋ ๋ธ๋ผ์ฐ์ ์์๋ ์ด์ฉ ์ ์์ด ์ ๋๋ก ๊ธฐ๋ฅํ ์ ์์ ์ ์๋ค๋ ์ฌ์ค์ ์๊ณ ๋ฐ์๋ค์ด๋ ๊ฒ๋ ์ค์ํ๋ค.
3. ํ ์คํธ / ๋ฐ๊ฒฌ
๊ฐ ๊ธฐ๋ฅ์ ๊ตฌํ ํ ๊ทธ ๊ธฐ๋ฅ์ ๋ํ ํ ์คํธ๊ฐ ํ์ํ๋ค. ์ง์ ํ ์คํธ๋ฅผ ์ํํ ์๋ ์์ง๋ง, ์๋์ผ๋ก ํ ์คํธ๋ฅผ ์งํํด์ฃผ๋ ๋๊ตฌ๋ฅผ ์ด์ฉํ ์๋ ์๋ค. TestComplete, LambdaTest, BitBar ๋ฑ์ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ํ ์คํธ ํด์ด ์๋ค.
- ์์ ์ ์ธ ๋ฐ์คํฌํฑ ๋ธ๋ผ์ฐ์ (ํฌ๋กฌ, ์ฃ์ง, ํ์ด์ดํญ์ค, ์คํ๋ผ, ์ฌํ๋ฆฌ ๋ฑ)์์ ํ ์คํธ ์งํ
- ํด๋ํฐ ๋ฐ ํ๋ธ๋ฆฟ ๋ธ๋ผ์ฐ์ (์ผ์ฑ ์ธํฐ๋ท, ์ฌํ๋ฆฌ, ๋ชจ๋ฐ์ผ ํฌ๋กฌ ๋ฑ)์์ ํ ์คํธ ์งํ
- ์ด๊ธฐ ๊ธฐํ ๋จ๊ณ์์ ๋ชฉํํ๋ ๋ธ๋ผ์ฐ์ (IE, ์ฑ ๋ด์ฅ ๋ธ๋ผ์ฐ์ ๋ฑ)์์๋ ํ ์คํธ ์งํ
- Window, Linux, Mac ๋ฑ ๋ค์ํ ์ด์ ์ฒด์ ์์ ํ ์คํธ ์งํ
4. ์์ / ๋ฐ๋ณต
ํ ์คํธ ๋จ๊ณ์์ ๋ฒ๊ทธ๊ฐ ๋ฐ๊ฒฌ๋์๋ค๋ฉด ์์ ์ด ํ์ํ๋ค. ๋ฒ๊ทธ๊ฐ ๋ฐ์ํ๋ ์์น๋ฅผ ์ต๋ํ ์ขํ์ ํน์ ํ๊ณ , ๋ฒ๊ทธ๊ฐ ๋ฐ์ํ๋ ํน์ ๋ธ๋ผ์ฐ์ ์์์ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ ํด์ผ ํ๋ค. ์ฃ๋ถ๋ฆฌ ์ฝ๋๋ฅผ ์์ ํ๋ฉด ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ์์ ๋ฒ๊ทธ๊ฐ ๋ฐ์ํ ์ ์์ผ๋ฏ๋ก, ์กฐ๊ฑด๋ฌธ์ ์์ฑํด ๋ค๋ฅธ ์ฝ๋๋ฅผ ์คํํ๊ฒ ํ๋ ๋ฐฉ์์ผ๋ก ๊ณ ์น๋ ๊ฒ์ด ์ข๋ค. ์์ ์ด ์๋ฃ๋๋ฉด 3๋ฒ ๊ณผ์ ๋ถํฐ ๋ฐ๋ณตํ๋ค.
๐SEO
๐์น ์ ๊ทผ์ฑ
Uploaded by N2T