๋ณธ๋ฌธ์œผ๋กœ ๊ฑด๋„ˆ๋›ฐ๊ธฐ

Bootstrap-getting-started

Bootstrap ์‹œ์ž‘ํ•˜๊ธฐ#

Bootstrap ์ด๋ž€?#

  1. ํŠธ์œ„ํ„ฐ์—์„œ ๊ฐœ๋ฐœ

  2. ์ด๋ฏธ ์ž˜ ๋””์ž์ธ๋œ ๋ฒ„ํŠผ, ๋ ˆ์ด์•„์›ƒ ๋“ฑ์„ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ

  3. Bootstrap.css ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ณ  ํด๋ž˜์Šค๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ถˆ๋Ÿฌ์™€์„œ ์‚ฌ์šฉ.

Bootstrap ์‹œ์ž‘ํ•˜๊ธฐ#

๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๊ณต์‹ ์‚ฌ์ดํŠธ

๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๋น„๊ณต์‹ ํ•œ๊ตญ์–ด ์‚ฌ์ดํŠธ

๋ถ€ํŠธ์ŠคํŠธ๋žฉ CDN

โ˜๏ธ CDN์ด๋ž€?CDN is short for content delivery network. A content delivery network (CDN) is a system of distributed servers (network) that deliver pages and other web content to a user, based on the geographic locations of the user, the origin of the webpage and the content delivery server.CDN - Webopedia

๋‹ค์šด๋กœ๋“œ ๋ฐฉ๋ฒ•#

2020-03-21-bootstrap-getting-started-image-0

bootstrap download

  1. ์ปดํŒŒ์ผ๋˜๊ณ  ์ตœ์†Œํ™”๋œ CSS, JS, font ํŒŒ์ผ์„ ๋‹ค์šด๋ฐ›์•„ HTML ๋ฌธ์„œ์— Link๋กœ ์‚ฝ์ž….

  2. ์†Œ์Šค ์ฝ”๋“œ๋กœ ๋‹ค์šด๋ฐ›๊ธฐ

์†Œ์Šค๋กœ ๋‹ค์šด๋ฐ›์œผ๋ฉด Less ๋‚˜ Grunt ๋“ฑ์„ ์‚ฌ์šฉํ•ด์„œ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ์–‘์ด๋‹ค. ์ž˜์€ ๋ชจ๋ฅด๊ฒ ๋‹ค..

  1. Sass ๋ฒ„์ „ ๋‹ค์šด๋ฐ›๊ธฐ

๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ Less ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“ค์–ด ์กŒ์ง€๋งŒ ๊ณต์‹ Sass ๋ฒ„์ „๋„ ์ œ๊ณตํ•œ๋‹ค.

  1. ๋ถ€ํŠธ์ŠคํŠธ๋žฉ CDN์œผ๋กœ ํŒŒ์ผ์„ ๋‹ค์šด๋ฐ›์ง€ ์•Š๊ณ  ๋งํฌ ์‚ฝ์ž… ๋งŒ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ.

๋ฒ„์ „ 3์™€ 4์˜ ์ฐจ์ด#

  • 3 ๋ฒ„์ „์€ px ๊ธฐ์ค€, 4 ๋ฒ„์ „์€ em ๊ธฐ์ค€

  • IE8 ์ดํ•˜ ๋ฒ„์ „ ์ง€์› ์ข…๋ฃŒ

๊ด€๋ฆฌ์ž ํ…œํ”Œ๋ฆฟ, WISYWIG ์—๋””ํ„ฐ ๋“ฑ ์•„์ง๊นŒ์ง€ ํ”Œ๋Ÿฌ๊ทธ์ธ๋“ค์ด 3๊ธฐ๋ฐ˜์— ๋จธ๋ฌผ๋Ÿฌ ์žˆ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Œ.3์„ ์ถ”์ฒœํ•œ๋‹ค๊ณ  ํ•จ.ํŒจ์ŠคํŠธ์บ ํผ์Šค - ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๊ฐ•์˜ - Bootstrap Part

๋ ˆ์ด์•„์›ƒ#

ํ™”๋ฉด ์‚ฌ์ด์ฆˆํ‘œํ˜„
768px ๋ณด๋‹ค ํด ๋•Œcol-sm-
970px ๋ณด๋‹ค ํด ๋•Œcol-md-
1170px ๋ณด๋‹ค ํด ๋•Œcol-lg-
768px ๋ณด๋‹ค ์ž‘์„ ๋•Œcol-xs-

๋’ค์—๋Š” 12 ์ปฌ๋Ÿผ์„ ๊ธฐ์ค€์œผ๋กœ ์ฐจ์ง€ํ•˜๊ณ  ์‹ถ์€ ๋งŒํผ ์ˆซ์ž๋ฅผ ๋Œ€์ž…ํ•˜์—ฌ ์‚ฌ์šฉํ•จ.