[Javascript plugin] Masonry Layout ์ ์šฉํ•˜๊ธฐ

    ๋ฉ”์ด์Šจ๋ฆฌ ๋ ˆ์ด์•„์›ƒ ( Masonry Layout )์„ ์ด์šฉํ•˜๋ฉด ํฌ๊ธฐ๊ฐ€ ๋‹ค๋ฅธ ์ปจํ…์ธ ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

    ๋นˆ์˜์—ญ์„ ์ตœ์†Œํ™”ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ง€๊ฒจ์šด ์Šคํƒ€์ผ๋กœ๋ถ€ํ„ฐ ๋ฒ—์–ด๋‚˜ ์ž์œ ๋กœ์šด ๋Š๋‚Œ์„ ์ฃผ๊ธฐ๋„ ํ•œ๋‹ค!

     

    ํ•€ํ„ฐ๋ ˆ์ŠคํŠธ๊ฐ€ ์ด๋Ÿฌํ•œ ๋ ˆ์ด์•„์›ƒ์„ ์‚ฌ์šฉํ•˜๋Š”๋ฐ, width๋Š” ๊ณ ์ •ํ•˜๊ณ  height๋Š” ์„ค์ •ํ•˜์ง€ ์•Š์€ ๊ฒƒ์œผ๋กœ ๋ณด์ธ๋‹ค. 

     

     

    ๊ตฌ๊ธ€๋ง์„ ํ•ด๋ณด๋‹ˆ ์˜ค์ง css๋กœ๋งŒ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ๋‚˜์˜ค๊ธด ํ•˜๋˜๋ฐ.. ํšจ์œจ์ถฉ์ธ ๋‚˜๋Š” ๋” ๊ฐ„ํŽธํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ คํ•œ๋‹ค.

     

    https://masonry.desandro.com/

     

    Masonry

    Install Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower:  bower install masonry --save Install with npm:  npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works o

    masonry.desandro.com

     

    ์—ฌ๊ธฐ์„œ ๋‹ค์šด๋กœ๋“œ๋ฅผ ๋ฐ›์•„์„œ js ํด๋” ์•ˆ์— plugin์ด๋ผ๋Š” ํด๋”๋ฅผ ๋งŒ๋“ค๊ณ  ๊ทธ ์•ˆ์— ๋„ฃ์—ˆ๋‹ค. 

    beautify ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ •๋ ฌํ•˜๋ฉด 870์ค„์ด ๋‚˜์˜จ๋‹ค.

    ๋ฐ˜์‘ํ˜•

    ๋Œ“๊ธ€