๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๊ฐœ๋ฐœ/HTML, CSS, JS

๊ฐœ์š”

by Jaeguk 2023. 1. 11.

ํ‘œ๊ธฐ๋ฒ•

HTML, CSS, JavaScript๋ฅผ ํ†ตํ‹€์–ด์„œ 4๊ฐ€์ง€์˜ ํ‘œ๊ธฐ๋ฒ•์ด ์กด์žฌํ•œ๋‹ค.

dash-case(kebab-case). snake_case, camelCase, ParcelCase

 

thequickbrownfoxjumpsoverthelazydog ๋ผ๊ณ  ์ž‘์„ฑํ•˜๋ฉด ๋ฌด์Šจ ์˜๋„๋กœ ์ž‘์„ฑํ•œ ๊ฒƒ์ธ์ง€ ํ•œ ๋ˆˆ์— ํŒŒ์•…ํ•˜๊ธฐ๊ฐ€ ์–ด๋ ต๋‹ค.

๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๊ธฐํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ปดํ“จํ„ฐ๋Š” ํ•˜๋‚˜์˜ ๋‹จ์–ด๋กœ ์ธ์‹ํ•˜๊ฒŒ ํ•˜๋ฉด์„œ๋„ ์‚ฌ๋žŒ์ด ์ฝ๊ธฐ ์‰ฝ๋„๋ก ๊ฐ ๋‹จ์–ด๋ฅผ ๊ตฌ๋ถ„ํ•ด์ค„ ํ•„์š”๊ฐ€ ์žˆ๋‹ค.

 

1. dash-case

๋Œ€์‰ฌ ๊ธฐํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ‘œ๊ธฐ๋ฒ•

์ฃผ๋กœ HTML๊ณผ CSS์—์„œ ์‚ฌ์šฉ๋œ๋‹ค.

 

2. snake_case

์–ธ๋”๋ฐ” ๊ธฐํ˜ธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋‹จ์–ด์™€ ๋‹จ์–ด๋ฅผ ๊ตฌ๋ถ„ํ•ด์ฃผ๋Š” ํ‘œ๊ธฐ๋ฒ•

snake_case ์—ญ์‹œ HTML๊ณผ CSS์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค.

 

3. camelCase

์ฒซ๋ฒˆ์งธ ๋‹จ์–ด๋ฅผ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ๋‹จ์–ด๋“ค์€ ์‹œ์ž‘ ๊ธ€์ž๋ฅผ ๋Œ€๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•˜์—ฌ ํ‘œ๊ธฐํ•˜๋Š” ๋ฐฉ๋ฒ•

HTML์ด๋‚˜ CSS ๋ณด๋‹ค๋Š” ์ฃผ๋กœ JS์—์„œ ์‚ฌ์šฉ๋˜๋Š” ํ‘œ๊ธฐ๋ฒ•์ด๋‹ค.

 

4. PascalCase

์ฒซ๋ฒˆ์งธ ๋‹จ์–ด๋ฅผ ํฌํ•จํ•˜์—ฌ ๋ชจ๋“  ๋‹จ์–ด๋“ค์˜ ์‹œ์ž‘ ๊ธ€์ž๋ฅผ ๋Œ€๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•˜์—ฌ ํ‘œ๊ธฐํ•˜๋Š” ๋ฐฉ๋ฒ•

์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ์—์„œ ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ์—๋Š” camelCase๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ ํŠน์ˆ˜ํ•œ ๊ฒฝ์šฐ pascalCase๋‚˜ dash-case, snake_case๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

 

Zero-based Numbering

์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๊ฐœ๋ฐœ ์–ธ์–ด์™€ ๊ฐ™์ด ์ˆซ์ž๋ฅผ 0๋ถ€ํ„ฐ ์‹œ์ž‘ํ•จ.

 

์ฃผ์„

์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ์—ญ์‹œ Ctrl + / ๋‹จ์ถ•ํ‚ค๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ฝ”๋“œ๋ฅผ ์ฃผ์„์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.

728x90

'๊ฐœ๋ฐœ > HTML, CSS, JS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

๋ณ€์ˆ˜, ์˜ˆ์•ฝ์–ด  (0) 2023.01.11
๋ฐ์ดํ„ฐ ์ข…๋ฅ˜(์ž๋ฃŒํ˜•)  (0) 2023.01.11
๋ณ€ํ™˜(2)  (1) 2023.01.09
๋ณ€ํ™˜(1)  (0) 2023.01.09
์ „ํ™˜  (0) 2023.01.09