CSS_03_Grid System

Seungju Hwangยท2020๋…„ 8์›” 23์ผ
0

CSS

๋ชฉ๋ก ๋ณด๊ธฐ
4/4
post-thumbnail

Grid System

bootstrap์—์„œ ์ •์˜ํ•œ layout์œผ๋กœ์„œ containers, rows ๊ทธ๋ฆฌ๊ณ  columns ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ปจํ…์ธ ๋ฅผ ๋ ˆ์ด์•„์›ƒํ•˜๊ณ  ์ •๋ ฌ

module

1 Bootstrap

The most popular HTML, CSS, and JS library in the world.

  • ์›น์—์„œ bootsrtap๊ฐ€์ ธ์˜ค๊ธฐ
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
    <!--์ˆ˜๋งŽ์€ ์ฝ”๋“œ-->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

1.1 ํŠน์ง•

  • ํŠธ์œ„ํ„ฐ์—์„œ ์‹œ์ž‘๋œ ์˜คํ”ˆ ์†Œ์Šค ํ”„๋ก ํŠธ์—”๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  • ์›น ํŽ˜์ด์ง€์—์„œ ๋งŽ์ด ์“ฐ์ด๋Š” ์š”์†Œ๋ฅผ ๊ฑฐ์˜ ์ „๋ถ€ ๋‚ด์žฅํ•˜๊ณ  ์žˆ๋‹ค.
  • ๋””์ž์ธ์„ ํ•  ์‹œ๊ฐ„์ด ํฌ๊ฒŒ ์ค„์–ด๋“ค๊ณ , ์—ฌ๋Ÿฌ ์›น ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•œ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์— ๊ณจ๋จธ๋ฆฌ๋ฅผ ์ฉ์ผ ํ•„์š”๊ฐ€ ์—†๋‹ค.
  • ์›น ๋ธŒ๋ผ์šฐ์ € ํฌ๊ธฐ์— ๋”ฐ๋ผ ์ž๋™์œผ๋กœ ์ •๋ ฌ๋˜๋Š” "๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ"์„ ์ง€์›ํ•˜๋ฉฐ,
  • "one souce multi use" โ†’ ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ์„ ์ถ”๊ตฌํ•œ๋‹ค.

1.2 Responsive web design

๋ฐ˜์‘ํ˜•

  • layout์€ ๋ฐฉ๋ฌธ์ž์˜ ํ™”๋ฉด ํ•ด์ƒ๋„๋ฅผ ๊ณ ๋ คํ•˜์—ฌ์•ผ ํ•œ๋‹ค.
  • ์Šค๋งˆํŠธํฐ์ด๋‚˜ ํƒœ๋ธ”๋ฆฟ ๋“ฑ ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ๋Š” ํ™”๋ฉด์ด ์ž‘๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€๋…์„ฑ์— ๋”์šฑ ์‹ ๊ฒฝ์จ์•ผ ํ•œ๋‹ค.
  • ๋ณดํ†ต ์›น์‚ฌ์ดํŠธ๊ฐ€ ์ถ•์†Œ๋˜์–ด ๊ฐ€๋กœ ์Šคํฌ๋กค ์—†์ด ์ฝ˜ํ…์ธ ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์œผ๋‚˜ ๊ธ€์ž๊ฐ€ ๋„ˆ๋ฌด ์ž‘์•„์ง€๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
  • ๋ฐ์Šคํฌํƒ‘์šฉ, ํ…Œ๋ธ”๋ฆฟ์šฉ, ๋ชจ๋ฐ”์ผ์šฉ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋ณ„๋„ ๊ตฌ์ถ•ํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ One Source Multi Use์˜ ๊ด€์ ์—์„œ ์˜ฌ๋ฐ”๋ฅธ ํ•ด๊ฒฐ์ฑ…์€ ์•„๋‹ˆ๋‹ค.
  • ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ(Responsive Web Design)์€ ํ™”๋ฉด ํ•ด์ƒ๋„์— ๋”ฐ๋ผ ๊ฐ€๋กœํญ์ด๋‚˜ ๋ฐฐ์น˜๋ฅผ ๋ณ€๊ฒฝํ•˜์—ฌ ๊ฐ€๋…์„ฑ์„ ๋†’์—ฌ ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•œ๋‹ค.
  • ์ฆ‰, ํ•˜๋‚˜์˜ ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์ถ•ํ•˜์—ฌ ๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค์˜ ํ™”๋ฉด ํ•ด์ƒ๋„์— ์ตœ์ ํ™”๋œ ์›น์‚ฌ์ดํŠธ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

2 Bootstrap Grid System

2.1 Grid System

grid

  • ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ grid system ์€ containers, rows ๊ทธ๋ฆฌ๊ณ  columns ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ปจํ…์ธ ๋ฅผ ๋ ˆ์ด์•„์›ƒํ•˜๊ณ  ์ •๋ ฌํ•œ๋‹ค.
  • ๋ชจ๋ฐ”์ผ ์šฐ์„  flexbox grid ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ 12๊ฐœ์˜ column ์‹œ์Šคํ…œ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.
  • ์™œ 12 columns ์ผ๊นŒ ?
    • 12๋Š” ์•ฝ์ˆ˜๊ฐ€ ๊ฐ€์žฅ ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— ํ•œ ์ค„์— ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋Š” ์ข…๋ฅ˜๊ฐ€ ์ œ์ผ ๋งŽ๋‹ค.
  • ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ตฌ์กฐ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.
    • .container > .row > col-*

2.2 row

<div class="container">
    <div class="row">
        <!-- ์—ฌ๊ธฐ์„œ grid system ๊ตฌํ˜„ -->
        <div class="col">
            <h3> grid system </h3>
            <p> ์—ฌ๊ธฐ์—์„œ ๊ตฌํ˜„๋ฉ๋‹ˆ๋‹น</p>
        </div>
    </div>
</div>
  • row ๋Š” columns ์˜ wrapper ์ด๋‹ค.
  • ๊ฐ column ์—๋Š” ๊ณต๊ฐ„ ์‚ฌ์ด๋ฅผ ์ œ์–ดํ•˜๊ธฐ ์œ„ํ•œ ์ขŒ์šฐ padding ๊ฐ’์ด ์žˆ๋Š”๋ฐ ์ด๋ฅผ gutter ๋ผ๊ณ ๋„ ํ•œ๋‹ค.
    • row ์˜ margin ๊ฐ’๊ณผ gutter ๋ฅผ ์ œ๊ฑฐํ•˜๋ ค๋ฉด .row ์— .no-gutters class ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

2.3 .col / .col-*

  • column class ๋Š” row ๋‹น ๊ฐ€๋Šฅํ•œ 12๊ฐœ ์ค‘ ์‚ฌ์šฉํ•˜๋ ค๋Š” columns ์ˆ˜๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.
  • columns ๋„ˆ๋น„๋Š” ๋ฐฑ๋ถ„์œจ๋กœ ์„ค์ • ๋˜๋ฏ€๋กœ ํ•ญ์ƒ ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์œ ๋™์ ์œผ๋กœ ํฌ๊ธฐ๊ฐ€ ์กฐ์ •๋œ๋‹ค.
  • grid layout ์—์„œ ๋‚ด์šฉ์€ ๋ฐ˜๋“œ์‹œ columns ์•ˆ์— ์žˆ์–ด์•ผ ํ•˜๋ฉฐ ๊ทธ๋ฆฌ๊ณ  ์˜ค์ง columns ๋งŒ row ์˜ ๋ฐ”๋กœ ํ•˜์œ„ ์ž์‹ ์ผ ์ˆ˜ ์žˆ๋‹ค.

2.4 offset

  • offset-* ์€ ์ง€์ •ํ•œ ๋งŒํผ์˜ column ๊ณต๊ฐ„์„ ๋ฌด์‹œํ•˜๊ณ  ๋‹ค์Œ ๊ณต๊ฐ„๋ถ€ํ„ฐ ์ปจํ…์ธ ๋ฅผ ์ ์šฉํ•œ๋‹ค.

2.5 Nesting

  • .row > .col- > .row > .col- ์˜ ๋ฐฉ์‹์œผ๋กœ ์ค‘์ฒฉ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.

2.6 Grid breakpoints

์˜ต์…˜

  • ๋ถ€ํŠธ์ŠคํŠธ๋žฉ grid system ์€ ๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค์—์„œ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด ํŠน์ • px ์กฐ๊ฑด์— ๋Œ€ํ•œ ์ง€์ ์„ ์ •ํ•ด ๋‘์—ˆ๋Š”๋ฐ ์ด๋ฅผ breakpoints ๋ผ๊ณ  ํ•œ๋‹ค.
  • ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ ๋Œ€๋ถ€๋ถ„์˜ ํฌ๊ธฐ๋ฅผ ์ •์˜ํ•˜๊ธฐ ์œ„ํ•ด em ๋˜๋Š” rem ์„ ์‚ฌ์šฉํ•˜์ง€๋งŒ px ๋Š” ๊ทธ๋ฆฌ๋“œ breakpoint ์— ์‚ฌ์šฉ๋œ๋‹ค. (๋ทฐํฌํŠธ ๋„ˆ๋น„๊ฐ€ ํ”ฝ์…€ ๋‹จ์œ„์ด๊ณ  ๊ธ€๊ผด ํฌ๊ธฐ์— ๋”ฐ๋ผ ๋ณ€ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ)

์ฐธ๊ณ 

w3schools

poiemaweb

bootstrap DOCS

profile
๊ธฐ๋กํ•˜๋Š” ์Šต๊ด€์€ ์‰ฝ๊ฒŒ ๋ฌด๋„ˆ์ง€์ง€ ์•Š์•„์š”.

0๊ฐœ์˜ ๋Œ“๊ธ€