21๋
11์ 10์ผ
๐ CSS
๐ Coding conventions(์ฝ๋ฉ ์ปจ๋ฒค์
)
-
๋งํฌ์
๊ฐ๋ฐ์ ํ๋ก ํธ-์๋ ํ์ด์ง์ ๊ธฐ๋ณธ ๊ณจ๊ฒฉ์ ํ์ฑํ๊ธฐ ๋๋ฌธ์ ๋์์ธ, ๋ธ๋ผ์ฐ์ , ์คํฌ๋ฆฝํธ, ์ฑ๋ฅ, ์ ๊ทผ์ฑ ๋ฑ๊ณผ ๊ธด๋ฐํ ๊ด๊ณ๊ฐ ์๋ค.
์ฆ, ๋งํฌ์
๊ฐ๋ฐ์ ์ ํด์ผ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ์ฝํ
์ธ ๋ฅผ ์์ค ์์ด, ๋น ๋ฅด๊ณ ์ฝ๊ฒ ์ฌ์ฉ์์๊ฒ ์ ๋ฌํ ์ ์์ต๋๋ค.
-
์ฝ๋ฉ ์ปจ๋ฒค์
์ ์ด๋ฌํ ์กฐ๊ฑด์ ๋ง์กฑ์ํค๊ธฐ ์ํด ๋งํฌ์
๊ฐ๋ฐ์๊ฐ ์ง์ผ์ผํ ํ์ค์ ์ ์ํฉ๋๋ค.
๋ํ ๋ค๋ฅธ ์ฌ๋๋ ์ฝ๋๋ฅผ ๋น ๋ฅด๊ณ ์ฝ๊ฒ ์ดํดํ ์ ์๋๋ก ํ์ฌ ์ ์ง๋ณด์ ๋น์ฉ์ ์ ๊ฐํ๊ณ ์
๋ฌด ํจ์จ์ ๋์
๋๋ค.
-
NHN Coding Convention for Markup Languages (HTML/CSS)
-
Google HTML/CSS Style Guide
์ฐธ๊ณ ๋งํฌ
๐ ๊ณผ์ - ๋ฐ์ํ ์น ๊ตฌํ
๐ ๋ฉ์์ดํก_1 with FE developer ์ด์์ง๋
้๊ฐ๋ฐ์์์ ้ฃ๊ฐ๋ฐ์๋ก
- ๋น๊ฐ๋ฐ์์์ ์ฃผ๋์ด ๊ฐ๋ฐ์๋ก ํด์ธ ์ทจ์
ํ๊ธฐ
"๋น์ ๊ณต์ ํ๋ ์์ ๊ฐํ์ง ์๊ณ (้๊ฐ๋ฐ์) ๋ ๋์ ์ธ์์ ํฅํด ๋์ ํ๊ณ , ํ๊ป ๋ ๊ฐ์งํ๋ ์ฌ๋ฌ๋ถ(้ฃ๊ฐ๋ฐ์)์ด ๋์
จ์ผ๋ฉด ์ข๊ฒ ์ต๋๋ค."
Sujin Lee | Creative Technologist
์ง์์๋ต
๐ฃ ๊ธฐ๋ณธ๊ธฐ๊ฐ ์ค์ํ๋ค๊ณ ํ์
จ๋๋ฐ, ๊ตฌ์ฒด์ ์ผ๋ก ๊ธฐ๋ณธ๊ธฐ๋ฅผ ์ด๋ป๊ฒ ์๋ ๊ฒ์ด ์ข์๊น์?
(JavaScript ๊ธฐ์ค์ผ๋ก ์ค๋ช
)
๐ฃ ๊ธฐ์ ๋ธ๋ก๊ทธ๋ ์ทจ์งํ๊ณ ์ ํ๋ ๊ตญ๊ฐ ์ธ์ด์ ๋ง๊ฒ ์ ๋ฆฌํด๋๋ ๊ฒ์ด ์ข์๊น์?
- ํด๋น ์ธ์ด๋ก ์์ฑํ๋ฉด ์ข์ง๋ง ์์ฑํ ๋ ์คํธ๋ ์ค ๋ฐ๊ณ ํ๋ค๋ค๋ฉด ํ๊ตญ์ด๋ก ์์ฑํด๋ ์ข๋ค.
- ํด์ธ ๊ธฐ์
์์ ์ง์์์ ๋ธ๋ก๊ทธ ์์ฑ ์ธ์ด๊ฐ ๋ค๋ฅด๋ค๋ฉด ๋ฒ์ญ๊ธฐ๋ฅผ ๋๋ ค์ ํ์ธํ๊ธฐ๋ ํ๋ค.
๐ฃ ํด์ธ์์ ์ฃผ๋์ด๋ก ์ทจ์
์ ํ๋ ค๋ฉด ํ๊ตญ์์ ์ด๋์ ๋ ๊ฒฝ๋ ฅ์ ์์์ผ ํ๋์?
- ์๋ฌด ๊ฒฝ๋ ฅ ์์ด ๋ฐ๋ก ํด์ธ๋ก ์ทจ์
ํ๊ธฐ๋ ์ด๋ ต๋ค. ๋ณดํต์ ์ธํด์ฝ ํ ์ก ์คํผ๊ฐ ์จ๋ค.
- 2-3๋
์ฐจ ๋ฏธ๋ ๋ ๋ฒจ์ผ ๋ ํด์ธ์ด์ง ์ค๋นํ๋ ๊ฒ ์ถ์ฒ, ๋ฏธ๋ฆฌ ์ธ์ด ๊ณต๋ถ๋ฅผ ํ๊ณ ๋คํธ์ํฌ๋ฅผ ์ ์๋ ๊ฒ์ด ์ข๋ค.
- ํธ๋ฆญ : LinkedIn ๊ตญ๊ฐ ์ค์ ์ ์ด์งํ๊ณ ์ถ์ ๊ตญ๊ฐ๋ก ๋ณ๊ฒฝํ๊ธฐ
๐ฃ ์์ด ๋ฌธ์๋ฅผ ๋ณด๋๊ฒ ์ค์ํ๋ค๋ ๊ฒ์ ์์ง๋ง, ๊ณ์ ํ๊ธ ๋ฌธ์๋ง ์ฐพ์๋ณด๊ฒ ๋ฉ๋๋ค. ์์ด ๋ฌธ์์ ๋ํ ๋๋ ค์์ ๋จ์น ํ์ด ์์๊น์?
- ์ผ๋จ ์์ด๋ก ๊ฒ์ ํด๋ณด๊ธฐ
- ์์ด๋ก ์ง๋ฌธ/๋ต๋ณ์ ์ฐพ๋ ๊ฒ ์์ฒด๋ ์ด๋ ต์ง๋ง ๊ณ์ ์๋ํ๋ค.
- ์ธ์ด ์ธํ
์ ์์ด๋ก ํด๋๋๋ค
- ์ฌ์ด ๊ฐ๋
๋ถํฐ ์์ด๋ก ์ฐพ์๋ณด๊ธฐ(๋ณต์กํ ๊ฒ๋ถํฐ ๋ณด๋ฉด ๋๋ฌด ์ด๋ ต๊ธฐ ๋๋ฌธ์)
๐ฃ ์์ง๋์ ์ฑ์ฅ ์๋๋ ฅ์ ๋ฌด์์ธ๊ฐ์? ์ด๋ป๊ฒ ๋์์์ด ๋์ ํ๊ณ ์ฑ์ฅํ ์ ์์๋์ง ๊ถ๊ธํฉ๋๋ค!
- ์ ์ ๋ฆฌํด์ ๊ทธ๋ ๊ฒ ๋ณด์์ ์ ์์ง๋ง ์คํจ๋ฅผ ๋ง์ด ๊ฒช์๋ค. ํ์ง๋ง ๋ชฉํ๊ฐ ๋๋ ทํ๊ณ , ๊ฐ๋ฐ์ด ๋์๊ฒ ์ ๋ง๋ค๊ณ ์๊ฐํ๊ธฐ ๋๋ฌธ์ ์ง์น์ง ์๊ณ ๊พธ์คํ ํ๋ค. ๋ด๊ฐ ๋ฒ ์คํธ ๊ฐ๋ฐ์๋ ์๋์ง๋ง ๊ฐ๋ฐ์ ํ๋ฉด์ ์ค์ค๋ก ์ฑ์ทจ๊ฐ์ ๋ง์ด ๋๊ผ๋ค.
๊ทธ๋ฆฌ๊ณ ๋์๊ฒ ๋๊ธฐ๋ถ์ฌ๋ฅผ ์ฃผ๋ ์ฌ๋๋ค์ ๋ง์ด ๋ง๋๋ณด๋ ค๊ณ ํ๋ค.
๐ฃ ๋ฒ์์์ด ์ค์ง๋ ์์ผ์
จ๋์? ์คํธ๋ ์ค๋ ์ด๋ป๊ฒ ํด์ํ์๋์?
- ๋ฒ์์์ด ์ ๋ง ๋ง์ด ์์๋ค. ์ทจ๋ฏธ๋ ์ด๋(๋ฌ๋ฆฌ๊ธฐ)๋ฅผ ํตํด ์คํธ๋ ์ค๋ฅผ ํด์ํ๊ณ ์ฒด๋ ฅ์ ๊ด๋ฆฌํ๋ค.
๐ฃ ํ
์คํธ ์ฝ๋ ์์ฑํ๋ ๊ฑธ ๋ฐฐ์ฐ๊ณ ์ถ์๋ฐ ์ด๋ป๊ฒ ์์์ ํ๋๊ฒ ์ข์์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค. ์ถ์ฒํด์ฃผ์ค๋งํ ๋ฆฌ์์ค๊ฐ ์๋์?
- https://jestjs.io/
- ๋จผ์ , ๊ฐ๋จํ ์๊ณ ๋ฆฌ์ฆ์ด๋ ํจ์์ ํ
์คํธ ์ฝ๋๋ฅผ ์์ฑํด๋ณด๊ณ , ๊ทธ ๋ค์ ์ปดํฌ๋ํธ ๋ ๋ฒจ์ ํ
์คํธ ์ฝ๋๋ฅผ ์์ฑํด๋ณด๋ ๊ฒ์ ์ถ์ฒํ๋ค.
- ํ
์คํธ ์ฝ๋๋ฅผ ์์ฑํ๋ ๊ฒ์ด ํ์๋ ์๋์ง๋ง ์์ฑํ๋ฉด ๊ฐ์ฐ์ ์ด ๋๋ค!
- ๋ฉด์ ์์ ํ
์คํธ ์ฝ๋๋ฅผ ์์ฑํด์ผํ๋ ๊ฒฝ์ฐ, ํ
์คํธ ์ผ์ด์ค๊ฐ ์๋์ง ํ์ธํ๊ณ ์๋ค๋ฉด ๋ฐ๋ก ๋ง๋ค์ด์ ํ
์คํธ ์ฝ๋ ์์ฑํ ๊ฒ
๐ฃ ๊ธฐ์ ๋ฉด์ ์ ์ด๋ป๊ฒ ์ค๋นํ์
จ๋์?
- ์ธํฐ๋ทฐ ์ง๋ฌธ์ ๋ํด ๋ง์ด ์ฐพ์๋ณด๊ณ , ๋งํ๋ ์ฐ์ต์ ๋ง์ด ํด์ผํ๋ค.
- ํด์ธ๊ธฐ์
์ ์ง๋ฌธ ์์ค์ ํ๊ตญ๊ณผ ํฌ๊ฒ ๋ค๋ฅด์ง ์๋ค.
๐ฃ ์ฃผ๋ก ๋งฅ์ ์ฌ์ฉํ๋ค๊ณ ๋ค์๋๋ฐ ๋งฅ์ด ์๋ ์๋์ฐ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๋ ๋ณด์
จ๋์? ํด์ธ ์ทจ์
์ ์ํ๋ ์๋์ฐ๋ฅผ ์ฒ๋ถํด์ผ ํ๋์?
- ๊ตณ์ด ๋งฅ์ ์ฌ์ฉํ์ง ์์๋ ๋๋ค!
๋ง๋ฌด๋ฆฌ
- ๋ฉ์์ดํก ์ข์๋๋ฐ ์ด๋ฒ ์ฃผ ์ ์ ๋๋ฌด ๋ชป์ค๋์ง ๊ณ์ ํผ๊ณคํ๋คใ
ใ
์์์์์์ใ
ใ
- ์ด๋ ๊ฒ ํผ๊ณคํ ์์ค์ ์์ดํจ๋๋ฅผ ๋น๊ทผ๋ง์ผ์์ ๊ฒ ํ๋จ ๋ง์ด์ง ์์์์!
=> ์์ดํจ๋๋ก ์ค ํ์ด๋๊ณ ์์
๋ค์ผ๋ฉด ํธํ ๊ฒ ๊ฐ์๋ฐ ๋์ ์ ์์ ์ด๋ป๊ฒ ํ๋๊ฑฐ์ง? ์๊พธ ์ ํ๋์ pc์์ ์ ์ํ๋ฉด ์์ดํจ๋๋ก๋ ๊ฐ์ด ๋ชป๋ค์ด๊ฐ๋๋ฐ...
=> ์ ๊ทธ๋ฅ ์์ดํจ๋์๋ง ์ค ์ ์ํด๋ ๊ด์ฐฎ์ง ์๋? ์ด๊ฑฐ ์์ฑํ๋ฉด์ ์๊ฐ๋๋ค ํ
- ์ ๋
์๊ฐ์ ํน๊ฐ์ด ์๋ ๋ ์ ์๊ฐ ๋ถ๋ฐฐ๋ฅผ ์ด๋ป๊ฒ ํด์ผํ ์ง ๋ชจ๋ฅด๊ฒ ๋ค. ์ด๋ฐ ๋ ์ ๊ฐ์ธ ๊ณต๋ถ ์๊ฐ ๊ฑฐ์ ํฌ๊ธฐํด์ผํ๋?
=> ์ ํน๊ฐ ์๋ ๋ ์ ์ผ์ฐ์๊ณ ๋ค์๋ ์ผ์ฐ ์ผ์ด๋์ ํ ๊น? ๋ผ๊ณ ์๊ฐ๋ง ํด๋ณธ๋ค.