ํ‹ฐ์Šคํ† ๋ฆฌ ๋ทฐ



"1+1์€ ๋ฌด์—‡์ผ๊นŒ์š”?"๋ผ๋Š” ์งˆ๋ฌธ์„ ์ž์ฃผ ๋“ฃ์Šต๋‹ˆ๋‹ค. ์‚ฐ์ˆ˜ ์‹œ๊ฐ„์— ๋งํ•˜๋Š” ์ •๋‹ต์€ 2๊ฐ€ ๋˜๊ฒ ์ฃ . ์„ธ์ƒ์—๋Š” ๊ทธ ๋„ˆ๋จธ ๋‹ค์–‘ํ•œ ์ •๋‹ต์ด ์กด์žฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์–ด๋–ค ๊ด€์ ์œผ๋กœ ์ƒ๊ฐํ•˜๋Š๋ƒ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์ •๋‹ต์ด ๋‚˜์˜ค์ฃ . ์ €์ž์ธ ํœด๊ณ  ๊ธฐ๋กœ๋ธ์€ ์ด ๊ธ€์—์„œ ๋…์ž์—๊ฒŒ 'Sass ํ”„๋กœ์ ํŠธ์˜ ์•„ํ‚คํ…์ฒ˜๋ž€ ๋ฐ”๋กœ ์ด๊ฒƒ์ด๋‹ค'๋ผ๊ณ  ์ •๋‹ต์„ ์•Œ๋ ค์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹  ๋‹ค์–‘ํ•œ ์ •๋‹ต์ด ๋‚˜์˜ค๋„๋ก Sass ํ”„๋กœ์ ํŠธ์˜ ์•„ํ‚คํ…์ฒ˜ ๊ฐœ๋…์„ ์–˜๊ธฐํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธ€์„ ์ฝ๊ณ  ์—ฌ๋Ÿฌ๋ถ„์˜ Sass ํ”„๋กœ์ ํŠธ์—์„œ ๋ฉ‹์ง€๊ฒŒ ์ฐฝ์˜๋ ฅ์„ ๊ฐ€๋ฏธํ•œ ์•„ํ‚คํ…์ฒ˜๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค. 
[ํŽธ์ง‘์ž ์ฃผ]

์˜ˆ์ „์˜ ๋‹จ์ˆœํ–ˆ๋˜ CSS๋งŒ์œผ๋กœ ์ผํ–ˆ๋˜ ๊ทธ๋•Œ๋ฅผ ๊ธฐ์–ตํ•˜์‹œ๋‚˜์š”? ์‚ฌ์šฉํ•œ CSS ํŒŒ์ผ์€ ๋‹จ ํ•˜๋‚˜์ง€๋งŒ (์ฝ”๋“œ์˜ ์ค„์€) ์ž  ๋ชป ์ด๋ฃจ๋Š” ๋ฐค๋ณด๋‹ค ๋” ๊ธธ์—ˆ์Šต๋‹ˆ๋‹ค. (๋Œ€๊ฒŒ ์„œํˆด๊ฒŒ ์ž‘์„ฑ๋œ) ์…€ ์ˆ˜ ์—†์ด ๋งŽ์€ ์ค„๊ณผ ๊ฑฐ๊ธฐ์„œ ์•Œ๋ ค์ง€์ง€ ์•Š๊ณ  ์ขŒ์ ˆ์Šค๋Ÿฝ๊ธฐ๋งŒํ•œ IE ๋ฒ„๊ทธ๋ฅผ ๊ณ ์น˜๊ณ ์ž, ๋ณ€๊ฒฝํ•  ๊ฐ’ ํ•˜๋‚˜๋ฅผ ์ฐพ์œผ๋ ค๊ณ  ์• ์ผ์ฃ .

์—ฌ๋Ÿฌ๋ถ„, ์ด์ œ ๊ทธ๋Ÿฐ ๋‚ ๋“ค์€ ๊ณผ๊ฑฐ๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. CSS๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ฒƒ์€ ๋” ํฅ๋ฏธ๋กœ์›Œ์ง€๊ณ  ๋” ๋ณต์žกํ•ด์ง‘๋‹ˆ๋‹ค. ์•„๋งˆ๋„ ํฅ๋ฏธ๋กœ์›Œ์ง€๋‹ˆ ๋ณต์žกํ•ด์ง€๊ฒ ์ฃ (์—ญ์ž:๋‹ค์–‘ํ•˜๊ฒŒ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ๊ฐ€ ์Ÿ์•„์ง€๋ฏ€๋กœ ๋” ๋ณต์žกํ•ด์ง„๋‹ค๋Š” ์˜๋ฏธ). ๋ฉ‹์ง„ ์ด๋“ค์ด ์–˜๊ธฐํ•˜๋Š” CSS ์ „์ฒ˜๋ฆฌ๊ธฐ, ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ, ์ ์ง„์  ํ–ฅ์ƒprogressive enhancement, ์šฐ์•„ํ•œ ์„ฑ๋Šฅ ์ €ํ•˜graceful degradation [1], ๊ทธ ์™ธ์— CSS๋Š” ์–ด๋Š ๋•Œ๋ณด๋‹ค ๋” ๊ฐ•ํ•ด์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

CSS๋Š” ๋” ํฅ๋ฏธ๋กญ๊ณ  ๋” ๋ณต์žกํ•ด์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

โ€” ์ €์ž

๋‹ค๋ฃจ์–ด์•ผ ํ•  ๊ฒƒ์ด ๋„ˆ๋ฌด ๋งŽ๊ธฐ์— ์ฒด๊ณ„์ ์ธ ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฒŒ ํ•ญ์ƒ ์ˆ˜์›”ํ•˜์ง€ ์•Š๋‹ค๋Š” ๊ฒƒ์— ๋Œ€ํ•ด ๋™์˜ํ•˜์‹ค ๊ฑฐ์˜ˆ์š”. ์ด ๊ธ€์—์„œ ์ €๋Š” ์—ฌ๋Ÿฌ๋ถ„์—๊ฒŒ ์ƒ๊ฐํ•˜๋Š” ๋ฒ•(๊ตฌํ˜„๋ฐฉ๋ฒ•์ด ์•„๋‹Œโ†์ด๊ฒƒ์€ ์—ฌ๋Ÿฌ๋ถ„๊ป˜ ๋งก๊ธธ๊ฒŒ์š”)์„ ํ„ฐ๋“ํ•˜๋„๋ก ๋„์›€์„ ๋“œ๋ฆฌ๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.

๋‚ด ๊ตฌ์กฐ ๋งŒ๋“ค๊ธฐ

CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์–ป๋Š” ํ˜œํƒ ์ค‘ ํ•˜๋‚˜๋Š” ์„ฑ๋Šฅ์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๊ณ  ์ฝ”๋“œ๋ฅผ ๋‚˜๋ˆ„์–ด ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํŒŒ์ผ์— ๋‹ด์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. Sass์˜ @import ์ง€์‹œ์ž ๋•๋ถ„์— ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ ์›ํ•˜๋Š” ๋งŒํผ ๋งŽ์€ ํŒŒ์ผ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‹ค์‹œ๊ฐ„ ํ™˜๊ฒฝ์—์„œ ๋ชจ๋“  ํŒŒ์ผ์ด ํ•˜๋‚˜์˜ ํŒŒ์ผ๋กœ ์ปดํŒŒ์ผ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋‹ค์ค‘ ํŒŒ์ผ์€ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ, ํ•˜๋‚˜์˜ ํŒŒ์ผ์€ ์‹ค์‹œ๊ฐ„ ํ™˜๊ฒฝ์—์„œ.

โ€” ๋ธŒ๋ฃจ์Šค ๋ฆฌBruce Lee

CSS๋ฅผ ์—ฌ๋Ÿฌ ํŒŒ์ผ๊ณผ ํด๋”์— ์ ์ ˆํžˆ ๋‚˜๋ˆ„์–ด ๋„ฃ๋Š” ๊ฒƒ์—์„œ ์ •๋ฆฌ๊ฐ€ ์‹œ์ž‘๋ฉ๋‹ˆ๋‹ค. ์ €์˜ ์€์‚ฌ ์ค‘ ํ•œ ๋ถ„์ด ์ด๋Ÿฐ ๋ง์”€์„ ํ•˜์‹œ๊ณค ํ•˜์…จ์–ด์š”. โ€œ๋ชจ๋“  ๊ฒƒ์€ ๊ทธ๊ฒƒ์— ๋งž๋Š” ์žฅ์†Œ๊ฐ€ ์žˆ๊ณ , ๋ชจ๋“  ์žฅ์†Œ์—๋Š” ๊ทธ์— ๋งž๋Š” ๊ฒƒ์ด ์žˆ๋‹ค.โ€ ๊ทธ ๋ง์”€๋Œ€๋กœ ์ œ๊ฐ€ ์—ฌ๊ธฐ์„œ ํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค!

ํด๋”๋Š” ํ›Œ๋ฅญํ•˜๊ธฐ์— ์ด๊ฒƒ์„ ์‚ฌ์šฉํ•˜๋ผ

ํด๋”๊ฐ€ ์—†์–ด์„œ๋Š” ์•ˆ๋˜์ฃ . ์—ฌ๋Ÿฌ๋ถ„์€ ์ง‘์—์„œ ๋ชจ๋“  ๋ฌธ์„œ๋ฅผ ์ƒ์ž ํ•˜๋‚˜์— ๋‹ค ๋„ฃ์ง€ ์•Š์ฃ . ์•„๋งˆ๋„ ์„œ๋ฅ˜์ฒ ๋“คfolders์ด ์žˆ๊ฒ ์ง€์š”. ์ง‘/์•„ํŒŒํŠธ์šฉ ์„œ๋ฅ˜์ฒ , ์€ํ–‰์šฉ ์„œ๋ฅ˜์ฒ , ์˜์ˆ˜์ฆ์šฉ ์„œ๋ฅ˜์ฒ  ๋“ฑ๋“ฑ.



>
์ œ๊ฐ€ ๋ชจ๋“  SASS ํŒŒ์ผ์„ ๊ฐ™์€ ํด๋”์— ๋„ฃ์„ ํ•„์š”๊ฐ€ ์—†๋‹ค๊ณ  ๋งํ•œ๋‹ค๋ฉด์š”?

 

CSS ๊ตฌ์กฐ๋ฅผ ์„ค๊ณ„ํ•˜๋Š” ๊ฒƒ๋„ ์ •ํ™•ํžˆ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  Sass ํŒŒ์ผ๋“ค์„ ๊ฐ™์€ ํด๋”์— ๋„ฃ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ๋“ค์„ ๋ถ„๋ฅ˜ํ•˜์„ธ์š”.

์•„๋ž˜๋Š” ํŒŒ์ผ๋“ค์„ ๊ตฌ์กฐํ™”ํ•˜๋Š” ๊ฒƒ์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.


๋ณด๋‹ค์‹œํ”ผ ๋ฃจํŠธroot์— Sass ํŒŒ์ผ(main.scss) ํ•œ ๊ฐœ๋งŒ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋จธ์ง€ ๋‹ค๋ฅธ ํŒŒ์ผ๋“ค์€ ์ ๋‹นํžˆ ๋‚˜๋ˆ„์–ด์ ธ ํด๋”์— ๋“ค์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ํŒŒ์ผ๋ช… ์•ž์— ๋ฐ‘์ค„(_)์ด ๋ถ™์€ ๊ฒƒ์€ Sass์—๊ฒŒ ํŒŒ์…œpartial .scss ํŒŒ์ผ์ด๋ผ๊ณ  ๋งํ•ด์ฃผ๋Š” ๊ฒƒ์ด์—์š”. ํŒŒ์…œ .scss ํŒŒ์ผ์€ .css ํŒŒ์ผ๋กœ ์ปดํŒŒ์ผ ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ค๊ณ  ํ•ฉ์น˜๋Š” ๊ธฐ๋ณธ ํŒŒ์ผbase file์˜ ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

ํŒŒ์ผ๋“ค์„ ์ฐพ๋Š” ํŒŒ์ผ ํ•˜๋‚˜,
๋ชจ๋“  ํŒŒ์ผ์„ ๊ฐ€์ ธ์˜ค๋Š” ํŒŒ์ผ ํ•˜๋‚˜,
๊ทธ๋“ค์„ Sass ๋ฐฉ์‹์œผ๋กœ ํ•ฉ์ณ๋ผ.

โ€” J.R.R. ํ†จํ‚จTolkien

์œ„์˜ ํŒŒ์ผ ๊ตฌ์กฐ์—์„œ ํด๋”๋ฅผ ํ•˜๋‚˜์”ฉ ๋ณด์ง€์š”.

Base

base/ ํด๋”์— ์ผ๋ช… ํ”„๋กœ์ ํŠธ์šฉ ํ‘œ์ค€ ๋ฌธ์•ˆboilerplate [2] ๊ด€๋ จ ๋‚ด์šฉ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฑฐ๊ธฐ์—์„œ reset(์•„๋‹ˆ๋ฉด Normalize.css๋‚˜ ๊ทธ์— ์œ ์‚ฌํ•œ ๋ฌด์—‡์ด๋“ ) ์ฝ”๋“œ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋งˆ ํ”„๋กœ์ ํŠธ์— ๋”ฐ๋ผ ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ๋ฅผ ๋‹ค๋ฃจ๋Š” ์†Œ์Šค๋‚˜ ๋‹ค๋ฅธ ์†Œ์Šค๋ฅผ ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

  • _reset.scss๋‚˜ _normalize.scss
  • _typography.scss

Helpers

helpers/ ํด๋”(๋•Œ๋ก  utils/๋กœ ๋ถ€๋ฅด๋Š”)์— ๋ชจ๋“  Sass ํˆด๊ณผ ํ”„๋กœ์ ํŠธ ์—ฌ๊ธฐ์ €๊ธฐ์„œ ์‚ฌ์šฉํ•  ํ—ฌํผ๋“ค์ด ๋ชจ์—ฌ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋Šฅ์ด ํฌํ•จ๋๋‚˜์š”? ๋ฏน์Šค์ธ? ๋‹ค ์ด ํด๋”์— ๋„ฃ์œผ์„ธ์š”. ์ด ํด๋”์—๋Š” _variables.scss(๋•Œ๋ก  _config.scss๋กœ ๋ถ€๋ฅด๋Š”) ํŒŒ์ผ๋„ ์žˆ์–ด ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•œ ๋ชจ๋“  ๊ธ€๋กœ๋ฒŒ ๋ณ€์ˆ˜(ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ, ์ƒ‰ ๊ตฌ์„ฑcolor schemes ๋“ฑ)๋ฅผ ์ด๊ณณ์— ๋‹ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

  • _variables.scss
  • _mixins.scss
  • _functions.scss
  • _placeholders.scss (ํ”ํžˆ _helpers.scss๋กœ ๋ถ€๋ฅด๋Š”)

Layout

layout/ ํด๋”(๋•Œ๋ก  partials/๋กœ ๋ถ€๋ฅด๋Š”)์— ๋ณดํ†ต ํŒŒ์ผ์ด ๋งŽ์ด ๋“ค์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ณ„ ํŒŒ์ผ์—์„œ ๋ ˆ์ด์•„์›ƒ(ํ—ค๋”, ํ‘ธํ„ฐ ๋“ฑ)์˜ ์ฃผ์š” ๋ถ€๋ถ„์— ๊ด€ํ•œ ์Šคํƒ€์ผ์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. _grid ํŒŒ์ผ๋„ ์žˆ์–ด์„œ ์ด ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“œ๋Š”๋ฐ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์ด ์‚ฌ์šฉ๋œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • _grid.scss
  • _header.scss
  • _footer.scss
  • _sidebar.scss
  • _forms.scss

์ด ํด๋”์— ๋„ค๋น„๊ฒŒ์ด์…˜ ํŒŒ์ผ์„ ๋„ฃ๋Š” ๊ฒƒ์ด ์ด์น˜์— ๋งž์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” ์ด ํŒŒ์ผ์„ components/(๋‹ค์Œ ๋‚ด์šฉ์—์„œ ๋ณด์‹ค๊ฑฐ์˜ˆ์š”)์— ๋„ฃ์ง€๋งŒ์š”. /layout ํด๋”์— ๋„ฃ๋Š” ๊ฒƒ์ด ๋” ์ข‹์„ ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ ๊ฒฐ์ •์€ ์—ฌ๋Ÿฌ๋ถ„ ๋ชซ์œผ๋กœ ํ• ๊ฒŒ์š”.

Components

์ข€ ๋” ์ž‘์€ ๊ตฌ์„ฑ์š”์†Œ๋ฅผ ์œ„ํ•œ components/ ํด๋”(ํ”ํžˆ modules/๋กœ ๋ถ€๋ฅด๋Š”)๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. layout/์„ (์ „์—ญ์ global ์™€์ด์–ดํ”„๋ ˆ์ž„์„ ์ •์˜ํ•˜๋Š”) ๋งคํฌ๋กœ๋ผ๊ณ  ์น˜๋ฉด components/๋Š” ์ข€ ๋” ๋งˆ์ดํฌ๋กœ์ž…๋‹ˆ๋‹ค. ์Šฌ๋ผ์ด๋”, ๋กœ๋”loader๋‚˜ ๊ทธ๋Ÿฐ ์œ ํ˜•์˜ ํŠน์ •ํ•œ ๋ชจ๋“ˆ์„ ๋‹ด์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์˜ ์‚ฌ์ดํŠธ๊ฐ€ ๊ฑฐ์˜ ์ž‘์€ ๋ชจ๋“ˆ๋“ค๋กœ ์ด๋ฃจ์–ด์กŒ๊ธฐ์— ๋ณดํ†ต components/์— ๋งŽ์€ ํŒŒ์ผ๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • _media.scss
  • _carousel.scss
  • _thumbnails.scss

Pages

ํŽ˜์ด์ง€์— ํŠน์ •ํ™”๋œ ์Šคํƒ€์ผ์ด ์žˆ๋‹ค๋ฉด pages/ ํด๋”์— ๊ทธ ์Šคํƒ€์ผ์„ ๋„ฃ๊ณ  ํŽ˜์ด์ง€๋ช…๊ณผ ํŒŒ์ผ๋ช…์„ ์ผ์น˜์‹œํ‚ค๋Š” ๊ฒƒ์ด ์ข‹์„๊ฑฐ๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉด Home ํŽ˜์ด์ง€์— ๋…ํŠนํ•œ ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜๋Š” ์ผ์€ ํ”ํ•˜์ฃ . ์ด ์Šคํƒ€์ผ์„ ์ฒ˜๋ฆฌํ•˜๋ ค๊ณ  pages/ ํด๋”์— _home.scss ํŒŒ์ผ์„ ๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • _home.scss
  • _contact.scss

์—ฌ๋Ÿฌ๋ถ„์˜ ๋ฐฐํฌ ๊ณผ์ •์— ๋”ฐ๋ผ ์ด ํŒŒ์ผ๋“ค์€ ๋ณ„๋„๋กœ ํ˜ธ์ถœ๋  ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด๋Š” ์ถœ๋ ฅ๋˜๋Š” ์Šคํƒ€์ผ์‹œํŠธ์—์„œ ๋‹ค๋ฅธ ํŒŒ์ผ๊ณผ ํ•ฉ์ณ์ง€๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•จ์ž…๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„ ๊ฒฐ์ •์— ๋‹ฌ๋ ธ์Šต๋‹ˆ๋‹ค. ์ €์˜ ํšŒ์‚ฌ์—์„œ๋Š” ๊ทธ๊ฒƒ์„ partials๋กœ ๋งŒ๋“ค์ง€ ์•Š๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์„ ์š”์ฒญํ•˜๋Š” ํŽ˜์ด์ง€์—๋งŒ ํฌํ•จ์‹œํ‚ค๋„๋ก ํ•˜๋ ค๋Š” ๋ชฉ์ ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด Home ํŽ˜์ด์ง€์— ํŠน๋ณ„ํ•œ ๋ ˆ์ด์•„์›ƒ์ด ์žˆ๊ณ  ๋Œ€๋žต 200์ค„ ๋˜๋Š” CSS๋ฅผ ์ปดํŒŒ์ผํ•œ๋‹ค๊ณ  ํ•˜์ฃ . ๋ชจ๋“  ํŽ˜์ด์ง€์—์„œ ๊ทธ ๊ทœ์น™์ด ๋กœ๋”ฉ๋˜๋Š” ๊ฒƒ์„ ๋ง‰๊ณ ์ž ๊ทธ ํŒŒ์ผ์„ Home ํŽ˜์ด์ง€์—๋งŒ ๋„ฃ์—ˆ์Šต๋‹ˆ๋‹ค.

Themes

์ €์ฒ˜๋Ÿผ ์—ฌ๋Ÿฌ ํ…Œ๋งˆ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ทœ๋ชจ๊ฐ€ ํฐ ์‚ฌ์ดํŠธ์—์„œ ์ž‘์—…ํ•œ๋‹ค๋ฉด themes/ ํด๋”๊ฐ€ ์žˆ๋Š” ๊ฒƒ์ด ์ด์น˜์— ๋งž์Šต๋‹ˆ๋‹ค. ํ…Œ๋งˆ/๋””์ž์ธ๊ณผ ๊ด€๋ จ๋œ ์Šคํƒ€์ผ ๋ชจ๋‘ ๊ฑฐ๊ธฐ์— ๋„ฃ์œผ์„ธ์š”. ์™„์ „ํžˆ ํ”„๋กœ์ ํŠธ์— ํŠนํ™”๋œ ๊ฒƒ์ด์–ด์„œ ์—ฌ๋Ÿฌ๋ถ„์ด ํ•„์š”๋ฅผ ๋Š๋‚„ ๋•Œ๋งŒ ํŒŒ์ผ์„ ๋„ฃ์œผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

  • _theme.scss
  • _admin.scss

Vendors

๋งˆ์ง€๋ง‰์ด์ง€๋งŒ ์ค‘์š”ํ•œ ๊ฒƒ์œผ๋กœ ์—ฌ๋Ÿฌ๋ถ„์€ ์•„๋งˆ ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ํ”„๋ ˆ์ž„์›Œํฌ(๋ถ€ํŠธ์ŠคํŠธ๋žฉ, jQueryUI, jQuery์—์„œ ์ œ๊ณตํ•˜๋ฉฐ ์ž˜ ๋‹ค๋“ฌ์–ด์ง„ ์บ๋กœ์…€ ์Šฌ๋ผ์ด๋”FancyCarouselSliderjQueryPowered ๋“ฑ)์— ํฌํ•จ๋œ ๋ชจ๋“  CSS ํŒŒ์ผ์„ vendors/ ํด๋”์— ๋„ฃ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํŒŒ์ผ๋“ค์„ ๋ณ„๊ฐœ์˜ ํด๋”์— ๋„ฃ๋Š” ๊ฒƒ์€ ์ข‹์€ ๋ฐฉ๋ฒ•์œผ๋กœ โ€œ์ด๋ด, ์ด๊ฑด ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ํŒŒ์ผ์ด ์•„๋‹ˆ๊ณ , ๋‚ด๊ฐ€ ์ง  ์ฝ”๋“œ๋„ ์•„๋‹ˆ๋ฉฐ, ๋‚ด ์ฑ…์ž„์ด ์•„๋‹ˆ์•ผโ€๋ผ๋Š” ๊ฒƒ์„ ์•Œ๋ ค์ค๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค๋ฉด

  • bootstrap.scss
  • jquery-ui.scss
  • select2.scss

๊ฒŒ๋‹ค๊ฐ€ ์ €ํฌ ํšŒ์‚ฌ์—์„œ vendors-extensions/ ํด๋”๋„ ์žˆ์—ˆ๋Š”๋ฐ ์—ฌ๊ธฐ์— ๋ฒค๋” ํŒŒ์ผ์„ ์ผ๋ถ€ ๋ฎ์–ด์“ฐ๊ธฐํ•˜๋Š” ํŒŒ์ผ์„ ๋„ฃ์—ˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด _bootstrap.scss ํŒŒ์ผ์„ ๊ฑฐ๊ธฐ ๋„ฃ์–ด์„œ ๋ถ€ํŠธ์ŠคํŠธ๋ ™์— ์žˆ๋Š” ๊ตฌ์„ฑ์š”์†Œ ์ผ๋ถ€๋ฅผ ๋ฐ”๊พธ๋Š”๋ฐ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฒค๋” ํŒŒ์ผ ์ž์ฒด๋ฅผ ํŽธ์ง‘ํ•˜์ง€ ์•Š์œผ๋ ค๊ณ  ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ์ข‹์€ ์ƒ๊ฐ์ด ์•„๋‹™๋‹ˆ๋‹ค.

 


 

์ด๊ฒŒ ์ „๋ถ€์ž…๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ์— ๋”ฐ๋ผ ๊ตฌ์กฐ๊ฐ€ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ๊ฒ ์ง€๋งŒ ์—ฌ๋Ÿฌ๋ถ„์ด ์ด ๊ฐœ๋…์„ ์ดํ•ดํ–ˆ๋‹ค๊ณ  ํ™•์‹ ํ•ฉ๋‹ˆ๋‹ค. ํด๋” ์•ˆ์— ํด๋”๋ฅผ ์ค‘์ฒฉํ•˜๋Š” ๊ฒƒ์— ๊ด€ํ•ด ํ•ญ์ƒ ๋ฐ˜๋Œ€ํ•˜์ง„ ์•Š์ง€๋งŒ ๊ทธ๋ ‡๋‹ค๊ณ  ์„ ํ˜ธํ•˜์ง€๋„ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ๋‹จ์ผ ๋ ˆ๋ฒจsingle level ๊ตฌ์กฐ๊ฐ€ ๋„ˆ๋ฌด ๋ณต์žกํ•ด์ง€์ง€ ์•Š๊ณ  ํŒŒ์ผ์„ ๊น”๋”ํ•˜๊ณ  ์ •๋ˆ๋œ ์ƒํƒœ๋กœ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋”๋ผ๋„ ํ”„๋กœ์ ํŠธ์—์„œ ํ•˜์œ„ ๋ ˆ๋ฒจ ๊ตฌ์กฐ๊ฐ€ ํ•„์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค๋ฉด ๊ทธ๋ ‡๊ฒŒ ํ•˜์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์ „๋ฌธ๊ฐ€ ์กฐ์–ธ: ์—ฌ๋Ÿฌ๋ถ„์ด scss ํด๋”๋ฅผ ๋ณธ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ํŒŒ์ผ ๊ตฌ์กฐ๋ฅผ ๋ช…ํ™•ํžˆ ์ดํ•ดํ•  ์ˆ˜ ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค๋ฉด ๊ตฌ์กฐ ์ „์ฒด๋ฅผ ์„ค๋ช…ํ•˜๋Š” README.md ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด (main.scss์™€ ๋‚˜๋ž€ํžˆ) ๋ฃจํŠธ ๋ ˆ๋ฒจ์— ๋„ฃ๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•ด ๋ณด์„ธ์š”.

ํŒŒ์ผ๋„ ํ›Œ๋ฅญํ•ด!

์ œ๊ฐ€ ์ž์ฃผ ๋ฐ›๋Š” ์งˆ๋ฌธ์€ โ€œ์–ผ๋งˆ๋‚˜ ๋งŽ์•„์•ผ์ง€ ๋„ˆ๋ฌด ๋งŽ์€ ํŒŒ์ผ์ด๋ผ๊ณ  ๋งํ•˜๋‚˜์š”?โ€์ž…๋‹ˆ๋‹ค. ์ €๋Š” ๋„ˆ๋ฌด ๋งŽ์€ ํŒŒ์ผ์€ ์ ˆ๋Œ€ ์—†์Šต๋‹ˆ๋‹ค๊ณ  ๋‹ต๋ณ€ํ•ฉ๋‹ˆ๋‹ค. ์ž‘์—…์„ ๋ช‡๋ช‡ ํŒŒ์ผ๋กœ ์ชผ๊ฐœ๋Š” ๊ฒƒ์€ ์ฝ”๋“œ๋ฅผ ์ •๋ฆฌํ•˜๋ ค๋Š” ๋ชฉ์ ์ž…๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์ด ๋ฌด์–ธ๊ฐ€ ๋” ๋งŽ์€ ํŒŒ์ผ๋กœ ๋‚˜๋ˆ ์•ผ๊ฒ ๋‹ค๊ณ  ๋Š๋ผ๋ฉด ๊ทธ๋ ‡๊ฒŒ ๋ฐ€์–ด๋ถ™์ด์„ธ์š”!

ํฌ๋ฆฌ์Šค ์ฝ”์ด์–ด๊ฐ€ ๊ทธ์˜ Sass ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ์—์„œ ๋งํ–ˆ๋“ฏ์ด

์ดํ•ด๋  ๋•Œ๊นŒ์ง€ ์ž‘์€ ํŒŒ์ผ๋กœ ๋‚˜๋ˆ„์„ธ์š”.

โ€“ ํฌ๋ฆฌ์Šค ์ฝ”์ด์–ดChris Coyier

์ €๋Š” ๋‹จ์ผ ๊ตฌ์„ฑ์š”์†Œ๋ฅผ ๋‹ค์ˆ˜์˜ ํŒŒ์ผ๋กœ ํญ๋ฐœ์ ์œผ๋กœ ์ฆ๊ฐ€์‹œํ‚ค๋Š” ๋ฐ ๋ฐ˜๋Œ€ํ•˜๋Š” ํŽธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ํ•˜๋Š” ํƒ€๋‹นํ•œ ์ด์œ ๊ฐ€ ์—†๋Š” ํ•œ ๋ง์ด์ฃ . ์ผ๋ฐ˜์ ์œผ๋กœ ์ €๋Š” ๋”๋„ ๋œ๋„ ๋ง๊ณ  ํŒŒ์ผ๋‹น ๋ชจ๋“ˆ ํ•˜๋‚˜๋ฅผ ๋„ฃ๊ณ  ๋ชจ๋“ˆ์˜ ์˜๋ฏธ๋ฅผ ์•Œ ์ˆ˜ ์žˆ๋Š” ์ด๋ฆ„์„ ์ง“์Šต๋‹ˆ๋‹ค. ์ด ๋ฐฉ์‹์œผ๋กœ ์ €๋Š” ์„œ๋ธŒ๋ผ์ž„ ํ…์ŠคํŠธSublime text์—์„œ ์ฝ”๋“œ๋ฅผ ์ฐพ๊ณ ์ž ํ•  ๋•Œ ๋น ๋ฅธ ์ฐพ๊ธฐgo to [3]๋ฅผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์š”์•ฝ

์ด ๊ธ€์—์„œ ์ œ์•ˆํ•œ ๋ชจ๋“  ๋‚ด์šฉ์€ ์ €์˜ ๊ฐœ์ธ์  ๊ฒฝํ—˜์„ ๊ทผ๊ฑฐ๋กœ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” ํ”„๋ž‘์Šค์—์„œ ๊ทœ๋ชจ๊ฐ€ ํฐ ์€ํ–‰ ๊ทธ๋ฃน ์ค‘ ํ•˜๋‚˜์ธ ํฌ๋ ˆ๋”” ์•„๊ทธ๋ฆฌ๊ผดCrรฉdit Agricole์‚ฌ์˜ ์›น๊ธฐ๋ฐ˜ ์ง€์‚ฌweb-based branch์— ๊ทผ๋ฌดํ•˜๋Š” ๋‹จ ํ•œ ๋ช…์˜ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค. ์•„๋งˆ ์—ฌ๋Ÿฌ๋ถ„์˜ ํ™˜๊ฒฝ๊ณผ ๊ฒฝํ—˜์— ๋งž๋Š” ๋‹ค๋ฅธ ์ ‘๊ทผ๋ฐฉ๋ฒ•์ด ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Sass ํ”„๋กœ์ ํŠธ์˜ ์•„ํ‚คํ…์ฒ˜์— ๊ด€ํ•œ ํ™ฉ๊ธˆ๋ฅ Golden Rule์„ ๋ฝ‘์œผ๋ผ๊ณ  ํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋‹จ์ˆœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ง์ด ๋˜๋Š” ๊ฒƒ์„ ๋ฝ‘์œผ์„ธ์š”. ์—ฌ๋Ÿฌ๋ถ„์ด ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์—์„œ ์ผ์„ ํ•˜๋ฉด ๋ชจ๋“  ํŒ€์›๋“ค์ด ์„ ํƒํ•œ ๊ตฌ์กฐ์— ๋Œ€ํ•ด ํŽธํžˆ ๋Š๋ผ๋Š”์ง€ ํ™•์ธํ•˜์„ธ์š”. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์–ด๋”˜๊ฐ€์— ๋ฌธ์„œํ™”ํ•˜๊ณ  ๊ณต๊ฐœํ•ด์„œ ๋ˆ„๊ตฌ๋‚˜ ํŒŒ์ผ๊ตฌ์กฐ๊ฐ€ ์–ด๋–ป๊ฒŒ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋Š”์ง€ ์ดํ•ดํ•˜๋„๋ก ํ•ด์ฃผ์„ธ์š”.



๋Œ“๊ธ€
๊ณต์ง€์‚ฌํ•ญ
์ตœ๊ทผ์— ์˜ฌ๋ผ์˜จ ๊ธ€
์ตœ๊ทผ์— ๋‹ฌ๋ฆฐ ๋Œ“๊ธ€
Total
Today
Yesterday
ยซ   2024/03   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
๊ธ€ ๋ณด๊ด€ํ•จ