๋น„์ฃผ์–ผ ์ŠคํŠœ๋””์˜ค ์ฝ”๋“œ(visual studio code) ์ดˆ๊ธฐ ์„ธํŒ… ๊ฐ€์ด๋“œ

2023. 3. 6. 13:05ใ†Development๐Ÿ‘ฉ๐Ÿป‍๐Ÿฆณ

์‹œ์ž‘ํ•˜๊ธฐ์— ์•ž์„œ ์—๋””ํŠธํˆด์„ ๋จผ์ € ์„ค์น˜ํ•ด ์ค€๋‹ค
Visual Studio Code๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•  ์˜ˆ์ •์ด๋‹ค
์œˆ๋„์šฐ์™€ ๋งฅ์„ ๋ฒˆ๊ฐˆ์•„๊ฐ€๋ฉด์„œ ํฌ์ŠคํŒ…ํ•  ์˜ˆ์ •์ด๋‹ค๐Ÿ˜‰

๋น„์ฃผ์–ผ์ŠคํŠœ๋””์˜ค์ฝ”๋“œ ํ™ˆํŽ˜์ด์ง€ ์ด๋‹ค

 

๊ฒ€์€ ํ™”๋ฉด์— ๊ธ€์”จ๋Š” ํฐ์ƒ‰์ด๋‹ค

์ฝ”๋”ฉ์˜ ์›๋ฆฌ๋งŒ ์•Œ๊ณ ์žˆ๋‹ค๋ฉด ํˆด์„ ๊ฐˆ์•„ํƒ€๋Š”๊ฑด ๋งค์šฐ ์‰ฝ๋‹ค
์ผ๋‹จ ๊ธฐ๋ณธ์ด ๋˜๋Š” ์›๋ฆฌ๋ฅผ ์•Œ์•„๊ฐ€๋ณด๋„๋กํ•˜์ž

 

๊ฒ€์€ ํ™”๋ฉด์— ํ•˜์–€์ƒ‰ ๊ธ€์”จ
๋ฒŒ์จ ์–ด๋ ค์›Œ ๋ณด์ด์ง€๋งŒ ๋งค์šฐ ์ •์ƒ์ด๋‹ค 
์ž‘์—…์„ ์‹œ์ž‘ํ•˜๊ธฐ์— ์•ž์„œ ์ž‘์—… ๋Šฅ๋ฅ ์„ ์˜ฌ๋ ค์ค„ Extension์„ ์„ค์น˜ํ•ด์ค€๋‹ค
(์ผ์ข…์˜ ํ”Œ๋Ÿฌ๊ทธ์ธ ๊ฐ™์€๊ฒƒ์ด๋‹ค)

 

Auto Close Tag
HTMLํƒœ๊ทธ๋ฅผ ๋๊นŒ์ง€ ์™„์„ฑํ•˜์ง€ ์•Š์•„๋„ ์ž๋™์œผ๋กœ ๋’ค์— ๋‹ซํžˆ๋Š” ํƒœ๊ทธ๋ฅผ ์ณ์ค€๋‹ค
(์–ผ๋งˆ๋‚˜ ์ข‹์€๊ฑด์ง„ ๋‚˜์ค‘์— ์•Œ๊ฒŒ๋ ๊ฒƒ์ด๋‹ค)

Auto Rename Tag
ํƒœ๊ทธ์ค‘์—์„œ๋„ ์—ด์–ด์ค˜์•ผํ•˜๊ณ  ๋‹ซ์•„์ค˜์•ผํ•˜๋Š” ํƒœ๊ทธ๊ฐ€ ์กด์žฌ๋ฅผ ํ•œ๋‹ค
ํ•ด๋‹น ํƒœ๊ทธ๋“ค์˜ ์—ด๊ณ ๋‹ซ์Œ์„ ํ•œ๊บผ๋ฒˆ์— ๋ฐ˜์˜์„ ์‹œ์ผœ์ค€๋‹ค

 

HTML Boilerplate
Div —> <div></div>
doc —> <!DOCTYPE html>
A.    —> <a href=“”></a>
ํƒญํ‚ค๋ฅผ ๋ˆ„๋ฅด๋ฉด ์ž๋™์œผ๋กœ ์ฝ”๋“œ๋ฆด ์ƒ์„ฑํ•ด์ค€๋‹ค

LIVE SERVER
์ด๊ฑด ์šฐ๋ฆฌ๊ฐ€ ์˜ˆ์ œ๊ฐ€ ์‹ค์ œ๋กœ ๋ณ€ํ•˜๋Š” ๋ถ€๋ถ„์˜ ๊ด€์ธก์„
์ฆ‰๊ฐ์ ์œผ๋กœ ํ•˜๊ธฐ์œ„ํ•ด ๊ผญ ํ•„์š”ํ•œ ์š”์†Œ์ž…๋‹ˆ๋‹ค
๋ฐ˜๋“œ์‹œ ์„ค์น˜ ํ•ด์ฃผ์„ธ์š”

+๊ผญ ์„ค์น˜ํ•  ํ•„์š”๋Š” ์—†์œผ๋‚˜
Autoprefixer
๊ฐ„๋‹จํ•˜๊ฒŒ ์„ค๋ช…ํ•˜์ž๋ฉด ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ์ง€์›ํ•˜๋Š” ์ฝ”๋“œ๊ฐ€ ์žˆ๋‹ค
์ฝ”๋“œ๊ฐ€ ๋‹ค ๋‹ค๋ฅด๋ฏ€๋กœ  css์•ž์— ์ˆ˜์‹์–ด๋ฅผ ๋„ฃ์–ด์ฃผ์–ด์•ผํ•œ๋‹ค