ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ด๋?
- ๊ฐ๋ฅํ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ์๋ํ๋๋ก ์์
ํ๋ ๊ฒ์ผ๋ก ์น ํธํ์ฑ์ ๋์ด๋ ๊ฒ์ ์๋ฏธ
- ํ์ค ์น ๊ธฐ์ ์ ์ฑ์ฉํ์ฌ ๋ค๋ฅธ ๊ธฐ์ข
ํน์ ํ๋ซํผ์ ๋ฐ๋ผ ๋ฌ๋ฆฌ ๊ตฌํ๋๋ ๊ธฐ์ ์ ๋น์ทํ๊ฒ ๋ง๋ฆ๊ณผ ๋์์ ์ด๋ ํ ์ชฝ์ ์ต์ ํ๋์ด ์น์ฐ์น์ง ์๋๋ก ๊ณตํต ์์๋ฅผ ์ฌ์ฉํ์ฌ ์น ํ์ด์ง๋ฅผ ์ ์ํ๋ ๊ธฐ๋ฒ
์น ํ์ด์ง์ ์ํธ ํธํ์ฑ(Cross Browsing) ๊ตฌ์ถ์ ๋ํ ์คํด
- ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ด๋ ๋ชจ๋ ์น๋ธ๋ผ์ฐ์ ์์ 100% ๋๊ฐ์ด ๋ณด์ด๋๋ก ๋ง๋๋ ๊ฒ์ด๋ผ๋ ์๊ฐ
โ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ๋์ผ์ฑ์ด ์๋ ๋๋ฑ์ฑ(๋ฑ๊ฐ์ฑ) ์ ์๋ฏธ
- OS๊ฐ ๋ค๋ฅด๊ณ , HTML์ ๋ ๋๋งํ๋ ์์ง์ด ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ๋ชจ๋ ์น๋ธ๋ผ์ฐ์ ์์ 100% ๋๊ฐ์ด ๋ณด์ด๊ฒ ํ๋ ๊ฒ์ ๊ฐ๋ฅํ์ง ์๋ค.
- ์ง์ํ ์ ์๋ ๋ค๋ฅธ ์น๋ธ๋ผ์ฐ์ ๋ฅผ ์ํ ์ฅ์น๋ฅผ ๊ตฌํํ์ฌ ๋ชจ๋ ์น๋ธ๋ผ์ฐ์ ์ฌ์ฉ์๊ฐ ๋ฐฉ๋ฌธํ์ ๋ ์ ๋ณด๋ก์์ ์์ธ๊ฐ์ ๋๋ผ์ง ์๋๋ก ํ๋ ๋ฐฉ๋ฒ๋ก ์ ๊ฐ์ด๋๋ฅผ ์๋ฏธ
- ์น ์๋น์ค์ ๋ชจ๋ ์ ์ฌ ์ฌ์ฉ์๋ค์ด ์ฌ์ดํธ์ ์ ๊ทผํ ์ ์์ด์ผ ํ๋ค๋ ๊ฒ์ ๋งค์ฐ ์ค์ํ ์์
ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ด ํ์ํ ์ด์ ?
- ๋ธ๋ผ์ฐ์ ๋ง๋ค *๋ ๋๋ง ์์ง์ด ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ด๋ค.
- ์๋๋์ง ์๋ HTML,JavaScript ์ฝ๋๊ฐ ์กด์ฌ
- ํด์ํ์ง ๋ชปํ๋ CSS ์ฝ๋ ์กด์ฌ
- ๋ธ๋ผ์ฐ์ ๋ฒ๊ทธ๋ค์ด ์กด์ฌ
- ๋ธ๋ผ์ฐ์ ์์ฒด์ ๊ธฐ๋ณธ CSS ์คํ์ผ
*๋ ๋๋ง ์์ง(๋ ์ด์์ ์์ง) : ์์ฒญ๋ฐ์ ๋ด์ฉ์ ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ํ์ํ๋ ์ญํ ์ ๋ด๋นํ๋ ์ํํธ์จ์ด
ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ๋ฐฉ๋ฒ
1. ๋ธ๋ผ์ฐ์ ์ ์ ์จ ํ์
- ๋์ ์ ์ ์จ์ ๊ฐ์ง๊ณ ์๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ํ์
ํ๊ณ , ํด๋น ๋ธ๋ผ์ฐ์ ๋ฅผ ํ๊ฒ์ผ๋ก ์ก์ ๋์
- Statcounter(Global): https://gs.statcounter.com/
2. ๋ธ๋ผ์ฐ์ ํธํ์ฑ ๊ฒํ : CSS ์์ฑ๊ณผ JavaScript ๋ช
๋ น์ด์ ๊ฐ ๋ธ๋ผ์ฐ์ ๋ณ ์ง์ ์ฌ๋ถ๋ฅผ ํ์ธ
3. CSS ์ด๊ธฐํ : ๋ธ๋ผ์ฐ์ ์์ฒด์ ๊ธฐ๋ณธ CSS ์คํ์ผ์ ์ด๊ธฐํ
4. Vender Prefix
- CSS3 ํ์ค์ผ๋ก ํ์ ๋๊ธฐ ์ด์ ๋๋ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ฌ๊ฐ ์คํ์ ์ผ๋ก ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ๋ฒค๋ ํ๋ฆฌํฝ์ค(Vendor Prefix)๋ฅผ ์ฌ์ฉ
- ๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํ๊ธฐ ์ํ์ฌ ๋ฒค๋ ํ๋ฆฌํฝ์ค๋ฅผ ์ฌ์ฉ
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
5. CSS hack
- ํน์ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ ์ธํ๊ฑฐ๋, ํน์ ๋ธ๋ผ์ฐ์ ์์๋ง CSS๋ฅผ ์ ์ฉํ๋ ๊ธฐ๋ฒ
- CSS ํต์ ๋ฌธ๋ฒ์ ์ผ๋ก ๋ง์ง ์๊ฑฐ๋, ํน์ ๋ธ๋๋ฃจ์ ์๋ง ์ ์ฉ๋๋ ๋นํ์ค์ธ ๊ฒฝ์ฐ๊ฐ ๋ง์ผ๋ฏ๋ก ์ด์ฉ ์ ์๋ ๊ฒฝ์ฐ๊ฐ ์๋๋ผ๋ฉด ์ฌ์ฉํ๋ ๊ฒ์ ์ง์
6. Babel/Polyfill
- Babel : ๊ตฌ ๋ธ๋ผ์ฐ์ ์์๋ ์ต์ JavaScript ์ฝ๋๊ฐ ์ ์๋ํ๋๋ก ๋ณํํด์ฃผ๋ ํธ๋์คํ์ผ๋ฌ(Transpiler)
- Polyfill : ์ต์ JavaScript ๋ฒ์ (ES6)์ ์๋กญ๊ฒ ์ถ๊ฐ๋ Map, Set, Promise์ ๊ฐ์ ๊ฐ์ฒด๋ฅผ ๊ตฌ ๋ธ๋ผ์ฐ์ ์์ ์ฌ์ฉ๊ฐ๋ฅํ ๊ฐ์ฒด๋ก ๋ณํํด์ฃผ๋์์ฃผ๋ ๋๊ตฌ
์ฐธ๊ณ