Client/Bootstrap 2

[Bootstrap] ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ (Grid System)

๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ (Grid System) ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ layout๊ณผ content ์ •๋ ฌ์„ ์œ„ํ•œ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ทธ์ค‘์—์„œ container, row, column์— ๋Œ€ํ•œ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•๊ณผ ์˜ˆ์‹œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. 1 2 3 4 5 6 7 column1 column2 column3 cs 1. container - container๊ฐ€ ๊ฐ์‹ธ๊ณ  ์žˆ๋Š” contents๋ฅผ ๊ฐ€์šด๋ฐ ์ •๋ ฌํ•ด์คŒ - ๋ฐ˜์‘ํ˜•์œผ๋กœ width๋ฅผ ์ง€์ •ํ•˜๊ณ  ์‹ถ์„ ๊ฒฝ์šฐ => .container ์‚ฌ์šฉ - width๋ฅผ ํ™”๋ฉด์˜ 100%๋กœ ์ง€์ •ํ•˜๊ณ  ์‹ถ์„ ๊ฒฝ์šฐ => .container-fluid ์‚ฌ์šฉ 2. row - column์„ ๊ฐ์‹ธ์ฃผ๋Š” ์—ญํ•  3. column - row์— ๋“ค์–ด๊ฐ€๋Š” ๊ฐ๊ฐ์˜ content - ์˜ต์…˜์„ ์ง€์ • ์•ˆ ํ•˜๋ฉด ๋ธ”๋ก ์š”์†Œ์ฒ˜๋Ÿผ ํ•œ ์ค„์”ฉ ์ฐจ์ง€..

Client/Bootstrap 2020.06.12

[Bootstrap] ๋ถ€ํŠธ์ŠคํŠธ๋žฉ Navbar(๋ฉ”๋‰ด ๋ฐ”) ์‚ฌ์šฉ ์˜ˆ์ œ

๋ถ€ํŠธ์ŠคํŠธ๋žฉ Navbar ์„ค๋ช… ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ Navbar๋Š” ๋งŽ์€ ์›นํŽ˜์ด์ง€์˜ ํ™”๋ฉด ์ƒ๋‹จ์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๋ฉ”๋‰ด ๋ฐ”์˜ ๊ธฐ๋ณธ ํ‹€์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์‚ฌ์ดํŠธ(https://getbootstrap.com/)์˜ Documentation ํƒญ์—์„œ Navbar๋ฅผ ๊ฒ€์ƒ‰ํ•˜๋ฉด ์ž์„ธํ•œ ์„ค๋ช…๊ณผ ํ•จ๊ป˜ ์˜ˆ์‹œ ์ฝ”๋“œ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์‚ฌ์ดํŠธ์˜ Examples ํƒญ์— ์žˆ๋Š” Navbar fixed ์˜ˆ์ œ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. Navbar์˜ Documentation์— ์žˆ๋Š” ๊ธฐ๋ณธ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ Navbar๊ฐ€ ๋งŒ๋“ค์–ด์ง‘๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ๋ณ€๊ฒฝํ•ด์•ผํ•  ์ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. 1. ํ™”๋ฉด์˜ ํฌ๊ธฐ๊ฐ€ medium ์ดํ•˜์ผ ๋•Œ toggle ๋ฒ„ํŠผ์ด ์ƒ๊ธฐ๋„๋ก ๋ณ€๊ฒฝ 2. Navbar์˜ ๋ฐฐ๊ฒฝ ์ƒ‰์„ dark๋กœ ๋ณ€๊ฒฝ 3. Navbar-brand์˜ ํ…์ŠคํŠธ ..

Client/Bootstrap 2020.06.11