๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ“ŒDevelopment/learn
3

SCSS CSS๋Š” HMTL ํƒœ๊ทธ๋ฅผ ๊พธ๋ฏธ๊ฑฐ๋‚˜ ํšจ๊ณผ๋ฅผ ๋„ฃ์–ด ์ฃผ๋Š” ๋“ฑ ๋””์ž์ธ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์ „์ฒ˜๋ฆฌ ๊ณผ์ •์ด๋‹ค. ํ•˜์ง€๋งŒ ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ๊ฐ€ ์ปค์ง€๊ฑฐ๋‚˜ ์ž‘์—…์ด ๊ณ ๋„ํ™”๋ ์ˆ˜๋กCSS๋Š” ๋ถˆ๊ฐ€ํ”ผํ•˜๊ฒŒ ๊ฐ€๋…์„ฑ์ด ๋–จ์–ด์ง€๋Š” ๋“ฑ ์œ ์ง€๋ณด์ˆ˜์˜ ์–ด๋ ค์›€์„ ์ฃผ๋Š” ์š”์†Œ๊ฐ€ ๋œ๋‹ค์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ์˜ฌ๋ฆฌ๊ณ , ๊ฐ€๋…์„ฑ์„ ์˜ฌ๋ฆฌ๋Š” ๋“ฑ CSS์—์„œ ๋ณด์ด๋˜ ๋‹จ์ ์„ ๋ณด์™„ํ•˜๊ณ , ๊ฐœ๋ฐœ์˜ ํšจ์œจ์„ ์˜ฌ๋ฆฌ๊ธฐ ์œ„ํ•ด ๋“ฑ์žฅํ•œ ๊ฐœ๋…์ด SASS / SCSS๋ผ๊ณ  ํ•œ๋‹ค CSS์˜ ํƒœ์ƒ์  ํ•œ๊ณ„๋ฅผ ๋ณด์™„ํ•˜๊ธฐ ์œ„ํ•ด Sass๋Š” ์œ ์šฉํ•œ ๋„๊ตฌ๋“ค์„ ์ œ๊ณตํ•œ๋‹ค 1. ์„ ํƒ์ž(selector)๋ฅผ ๋งŒ๋“œ๋Š” ๊ด€์ ์—์„œ ๋ณผ ๋•Œ ๋ถˆํ•„์š”ํ•œ ๋ถ€๋ชจ ์š”์†Œ ์„ ํƒ์ž๋ฅผ ๋งค๋ฒˆ ์ ์–ด์•ผ ํ•œ๋‹ค. 2. ๊ทœ๋ชจ๊ฐ€ ์ปค์ง€๋Š” ํ”„๋กœ์ ํŠธ์˜ ๊ฒฝ์šฐ์—๋„ ์ผ์›ํ™”๋œ ์ž๋™ํ™”๊ฐ€ ์–ด๋ ต๊ณ  ์ˆ˜๋™์œผ๋กœ ๋ชจ๋“  ๊ฒƒ๋“ค์„ ์ˆ˜์ •&๋ณ€๊ฒฝํ•ด์•ผํ•œ๋‹ค. ๐Ÿ“์žฅ์  1. ์„ ํƒ์ž์˜ ์ค‘์ฒฉ(Nesting).. 2023. 3. 13.
02. [CSS] Design anything CSS๋Š” ์–ด๋–ค ๋ชฉ์ ์˜ ์–ธ์–ด์ธ๊ฐ€์š”? CSS๋ฅผ ์›นํŽ˜์ด์ง€์— ์‚ฝ์ž…ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ธ๊ฐ€์š”? STYLE ์†์„ฑ์€ ๋ฌด์—‡์ธ๊ฐ€์š”? ์„ ํƒ์ž๊ฐ€ ๋ฌด์—‡์ธ๊ฐ€์š”? ID="" ์˜ˆ์™ธ์ ์œผ๋กœ ๋””์ž์ธ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ (์•ž์— .๋ถ™์ž„) ,์šฐ์„ ์ˆœ์œ„ CLASS="" ํฌ๊ด„์ , ๊ทธ๋ฃนํ•‘(์•ž์— #๋ถ™์ž„), ๋‘๋ฒˆ์งธ span ์ด ์›นํŽ˜์ด์ง€์— ์žˆ๋Š” ๋ชจ๋“  span ํƒœ๊ทธ ์ง€๋ชฉ, ์„ธ๋ฒˆ์งธ CSS๊ฐ€ ๋“ฑ์žฅํ•˜๊ธฐ ์ „์˜ ์ƒํ™ฉ HTML ์ด์šฉ ์‹œ, ์—ฌ๋Ÿฌ ๋ถˆํŽธ๊ณผ ๋ฌธ์ œ์ ์ด ์ƒ๊ฒผ๋‹ค. ๊ธ€๊ผด, ๋ฌธ์ž ํฌ๊ธฐ&์ƒ‰๊น”, ์ •๋ ฌ, ๋ฐฐ๊ฒฝ ๋“ฑ.. ์›นํŽ˜์ด์ง€๋ฅผ ๋ณด๊ธฐ ์ข‹๊ฒŒ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๊ณ ๋ฏผํ•˜๊ฒŒ ๋œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋ผ๋Š” ์ฝ”๋“œ๋ฅผ 3๋ฒˆ ์ •๋„ ์ผ๋‹ค๊ณ  ํ•œ๋‹ค๋ฉด ์ด๊ฒŒ 1์–ต๊ฐœ๊ฐ€ ๋ผ์—ˆ์„ ๋•Œ๋„ 1์–ต๊ฐœ๋ฅผ ์จ์•ผ ํ•œ๋‹ค๋Š” ๋œป์ด๋‹ค. ๋”ฐ๋ผ์„œ ์›น ์‚ฌ์ด์ฆˆ์˜ ํฌ๊ธฐ๋„ ์™„์ „ ์ปค์ง€๊ฒŒ ๋œ๋‹ค. ๋”ฐ๋ผ์„œ ์ด ๊ฒƒ์„ ํ•œ ์ฝ”๋“œ๋กœ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค ๊ฒƒ์ด๋‹ค. .. 2023. 3. 2.
01. [HTML] Hello World? "์›น ์„ธ๊ณ„์— ์˜ค์‹  ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค!" โ€‹ โ€‹ ์ฒ˜์Œ ์ฝ”๋”ฉ์„ ๋ฐฐ์› ์„ ๋•Œ ์›น์ƒ์—์„œ ๋„์šด ๊ฒฐ๊ณผ๊ฐ’์ด์—ˆ๋‹ค. โ€‹ โ€‹ ๊ทธ์ € ์•ŒํŒŒ๋ฒณ๋งŒ ์ ์—ˆ์„ ๋ฟ์ธ๋ฐ ๊ฐ•์‚ฌ๋‹˜์ด ๋‚˜๋ณด๊ณ  ์ž˜ํ–ˆ๋‹ค๊ณ ํ–ˆ๋‹ค.โ€‹ ์ •๋ง ๋ฟŒ๋“ฏ๋ฟŒ๋“ฏ ์ฝ”๋”ฉ์€ ์–ด๋ ค์šด ๊ฒƒ์ด๊ณ  ๋ชปํ•  ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ๋‚˜๋„ ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค! ์ผ๋‹จ ๊ธ€์„ ์›น์— ๋„์›Œ๋Š”๋†จ์ž–์•„?;; "๊ฐœ๋ฐœ์ž์˜ ์ž์„ธ" โ€‹ โ€‹ ๊ฐœ๋ฐœ์ž์˜ ์ž์„ธ๋Š” ๋ฌด์—‡์ธ๊ฐ€๋ฅผ ๋งŒ๋“ค๊ธฐ ์ „์— ๋ฌด์—‡์„ ๋งŒ๋“ค ๊ฒƒ์ธ๊ฐ€๋ฅผ ๋ฏธ๋ฆฌ ์ƒ์ƒํ•˜๊ณ , ๊ณ„ํšํ•ด์•ผ ํ•œ๋‹ค๊ณ  ํ–ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๊ฒƒ์„ '๊ธฐํš'์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค. ๊ทธ๋Ÿผ ์ „๋ฌธ์ ์œผ๋กœ ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์€? '๊ธฐํš์ž'๋ผ๊ณ  ๋ถ€๋ฅด๊ฒ ์ง€? โ€‹ โ€‹ ๋จผ์ € ํ•ด์•ผํ•  ์ผ์€ ๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๋Š” ์›น์‚ฌ์ดํŠธ์˜ ๋ชจ์Šต์„ ๋ˆˆ์œผ๋กœ ๋ณด์ด๊ฒŒ ๊ทธ๋ ค๋ณด๋Š” ๊ฒƒ์ด๋‹ค. โ€‹ โ€‹ ๋‚˜๋Š” ์Œฉ์ดˆ๋ณด์ด๋ฏ€๋กœ, ๊ฐ•์‚ฌ๋‹˜์ด ๊ทธ๋ ค๋†จ๋˜ ๊ฒƒ์„ ์ฐธ๊ณ ํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค. 1 - ์ „์ฒด ์ œ๋ชฉ 2 - ๋ชฉ์ฐจ (์ด ๋ชฉ์ฐจ์—๋Š” ๋งํฌ๊ฐ€ ๊ฑธ๋ ค.. 2023. 3. 1.
728x90

์ตœ๊ทผ๋Œ“๊ธ€

์ตœ๊ทผ๊ธ€

skin by ยฉ 2024 ttutta